简单几步小操作，移动网页快上天（一）

高效运维 · 公众号 · 运维 · 2017-05-23 07:14

正文

导语

在这个信息爆炸的时代，使用移动终端获取新鲜信息已经是大势所趋，但是移动网页浏览速度还有巨大的提升空间。据Strangeloop Networks 统计，在同样的网络条件下，使用移动端访问相同网页会平均会比PC端慢40%！

然而另一方面，用户对网速的要求却步步紧逼。 Akamai的研究表明，网页响应时间可容忍的阀值是2秒，一旦超过3秒，会有40%的用户放弃浏览页面。简而言之，作为内容服务商的你，可能因为移动网页的加载“太持久”，已经默默的流失了众多客户。

这是一个需要快枪手的时代！如果你不够快，快去搞一把好枪！

那么，我该怎么打磨出一把好枪？

一、借鉴PC端网站优化经验

不论在PC还是在移动浏览器上，只有不到10%的时间是用来读取页面的HTML的。剩下的90%是用来加载额外的像样式表、脚本文件、或者图片这样的资源和执行客户端的程序。因此，许多在PC端的传统网页优化方案在移动端仍然可行。

1.1减少每个页面的 HTTP请求数

将共用的JavaScript和CSS代码放在公共的文件夹中与多个页面共享。

确保在一个页面中相同的脚本不会被加载多次。同时，将脚本中的Click事件改为On Touch事件来减少固有的300ms延迟。

III

使用CSS Sprites来整合图像，将多张图片整合到一个线性的网状的大图片中。

使用Cache-Control或者Expires标记来实现浏览器缓存，从而减少不必要的服务器请求，尽可能地从本地缓存中获取资源。

1.2减少每个请求加载的大小

使用gzip这样的压缩技术来压缩图像和文本，依靠增加服务端压缩和浏览器解压的步骤，来减少资源的负载。

整合并压缩CSS与JavaScript，删除不必要的字符与变量。

III