且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

《移动优先与响应式Web设计》一2.2 速度

更新时间:2022-09-08 21:46:25

本节书摘来异步社区《移动优先与响应式Web设计》一书中的第2章,第2.2节,作者: 【美】Luke Wroblewski , Ethan Marcotte 译者: 司徒卓恆 责编: 赵轩,更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.2 速度

移动优先与响应式Web设计
人们不论身在何处,都会尝试使用移动设备,但并不是到处都有移动网络,就算有也会很昂贵(视乎用什么套餐),并且不稳定,以致网速更慢,等待更久。

设计移动体验时,必须接受这个现实,并施展浑身解数,设法提高速度。应减少文件的发送,采用好的浏览器和服务器技术,尽量提升传送速度,减少用户每月的上网费用。

传送文件时,尽量降低文件大小,减少文件数量,要求移动用户减少下载量。可是,由于有移动网络延迟,发送HTTP要求可能会耗时更多。因此请确保做到如下几点。

  • 将多幅图片压缩至单一文件(但要确保解压后不会太大)。
  • 组合并简化CSS和JavaScript文件。
  • 尽量不要依赖复杂的JavaScript函数库,尤其是只有一两个函数时。
  • 同一道理,尽量少用CSS网格系统(Grid System)。
  • 用正确的HTTP标头,确保能暂存文件至浏览器。
  • 如适用,利用现代浏览器的功能,善用HTML5,例如Canvas和Appcache。
  • 还有我的至爱:用CSS3特性来做圆角、渐变色、文字阴影和方块阴影。这样做就不需要用图像来排版了,这在现代浏览器上固然美观,不过就算是旧浏览器不太支持CSS3,也能兼顾。但不要过份使用CSS的效果,否则会有太多效果需要排版,这样就会减慢速度。

速度不只在移动平台上才重要。亚玛逊、雅虎、微软等公司经常指出,就算网页加载延迟很短时间(100毫秒),用户也会察觉,然后转用其他服务。谷歌做过长期测试,发现表现差会有长远影响。延迟问题就算修复好,在随后5个星期内,用量仍然会减少。因此在桌面版上,速度同样重要。

若你以移动优先,并且连接移动网络也够快,网站和应用程序的桌面版就会快如闪电,用户一定会喜欢。为何欣然接受移动平台的限制?又有一个理由。