如何减少页面载入时间

也许是因为越来越多的人用上了大号的水管&＃xff0c;前端程序员差不多将网页的优化工作都抛在脑后了。越来越多的 widget 和 Javascript 代码被加在网页上&＃xff0c;以致网页越来越慢。瞬间的载入速度让你感觉就像呼吸到一口新鲜空气。程序员有时忽略了一些非常简单的规则&＃xff0c;导致降低了用户体验。

页面的载入速度决定用户的情绪&＃xff0c;尤其是电子商务网站。以下是一些它之所以这么重要的原因。
快速的载入可以提升用户体验。用户关注页面的载入速度&＃xff0c;或自觉或不自觉地。就好比一个球队中的球员&＃xff0c;只有当他表现差的时候才会引起关注。
载入迅速的网页让人感觉更清爽。网页的载入速度有可能影响你的搜索引擎排名。Google 已经明确表示他们很关注网页的载入速度&＃xff0c;并且会影响到 Adword 网页的索引&＃xff0c;所以也不会在排名中占有太大的比重。
慢速则赔钱——载入速度过慢会赶走你的访客。据估计每年电子商务网站都会因载入速度过慢&＃xff0c;而损失11亿到13亿的收入。
载入龟速就算是最优秀的网页设计也会被埋没。这里有一些很好的方法和工具可以帮助你建立一个快速流畅的网站。

1. 一个基本的网页分析器

可选的工具有很多&＃xff0c;但我总是用“Web Page Analyzer”来检查一般性的错误&＃xff0c;并且根据载入速度来判断网站的健康程度。这个分析工具可以显示海量的数据&＃xff0c;比如有多少脚本代码、文件有多大等等可能影响到载入速度的因素。&＃xff08;这个工具很小气&＃xff0c;100K的图片就警告了 - 译者注&＃xff09;

2. Pingdom

Pingdom 这个网站可以帮你检查损坏的图片链接或链接&＃xff0c;测试你的图片和脚本的载入速度。坏链和图片是导致载入缓慢的主要原因。比如&＃xff0c;我用这个分析了我的博客LifeDev 后&＃xff0c;我找到了一个错误脚本和2张失效的图片。搞定了这些错误后&＃xff0c;网站的载入速度快了一倍。

它还有另外一个功能&＃xff0c;就是可以看到载入的每一个阶段所用的时间。Pingdom 用不同的颜色表示载入过程的每一个阶段&＃xff0c;比如开始连接&＃xff0c;载入的第一个字节到最后一个字节等&＃xff0c;这样你就可以知道时间究竟是浪费在了哪。

3. 把文件放在本地

虽然这么做会消耗一些带宽&＃xff0c;但以本地文件替代照片管理服务&＃xff08;比如 flickr.com&＃xff09;&＃xff0c;可以省下浏览器从站外下载图片的时间。本地文件总是比外部文件更快。

4. 设置图片的长度和宽度

这是一个正确设置图片长度和宽度的示例&＃xff1a;
width&＃61;”125″ height&＃61;”250″/>
图片的长度和宽度设置与否简直是天壤之别。若设置了长宽&＃xff0c;浏览器会在图片未完成下载前先载入其它内容&＃xff0c;并且会在网页预留出图片的空间。否则浏览器会等待图片下载完成&＃xff0c;再去载入其余的内容。

5. 慎用 widget

即使 widget&＃xff08;窗口小插件&＃xff0c;小固件&＃xff0c;小器件等等&＃xff0c;什么译法都有&＃xff0c;这里保留英文 - 译者注&＃xff09;非常酷而且有一些非同寻常的功能&＃xff0c;但考虑到牺牲掉的载入速度&＃xff0c;忘掉它也应该不难。要是你的网站因 widget 而挂掉的话&＃xff0c;赶紧删掉吧。

6. 使用静态缓存

关于缓存可以有很多种解决方案。从本质上讲&＃xff0c;缓存就是&＃xff1a;把用动态语言&＃xff08;比如 PHP&＃xff09;写出的页面转换成最终的静态的网页。服务器难以置信地擅长处理静态页面。把动态页面转换成静态页面可以减轻服务器负荷&＃xff0c;并节省载入的时间。这里有一些流行语言的缓存教程可供参考&＃xff1a;

• PHP
• Rails
• Perl
• Java
• ASP

7. 加速器

动态语言通常都有脚本帮助加速运行。如果你使用的是 PHP&＃xff0c;这些脚本也许有帮助&＃xff1a;APC, Zend cache, Xcache

8. Firebug

Firebug 是火狐浏览器的一个扩展插件&＃xff0c;内嵌在浏览器内。Firebug 的一大功能就是分析网页的每一方面&＃xff0c;特别是载入速度。

9. 优化CSS

减小JS和CSS代码可以大幅改善网页的载入速度。可以使用一些在线服务比如“CSS clean”来优化你的CSS代码&＃xff0c;删去一些不必要的东西比如&＃xff1a;

• 空格
• 换行符
• 多余的字符
• 根据级别更多地压缩代码

10. 使用多个域名

如果你的网页上有很多东西&＃xff0c;建议多绑定几个域名&＃xff0c;比如 server.example.com&＃xff0c;server2.example.com&＃xff0c;等等。你同时只有有限的链接数到浏览器&＃xff0c;如果绑定多个域名&＃xff08;即使使用同一IP&＃xff09;就可以同时下载多个对象。

11. 精简 COOKIE

就像我们的日常饮食&＃xff0c;想要保存健康&＃xff08;载入迅速&＃xff09;就不要吃太多的饼干&＃xff08;COOKIE&＃xff09;。多余的 COOKIE 会拖慢每个网页的载入速度。确保你的 COOKIE 已经精简到最小&＃xff0c;同时也优化下 COOKIE 的使用。

12. 为 COOKIE 资源使用独立的域名

为了优化 COOKIE 的使用&＃xff0c;要为资源使用独立的域名。这对于使用顶级 COOKIE 的人很有帮助&＃xff0c;当你从上面下载文件的同时就会附上一个 COOKIE 文件&＃xff0c;如果使用不同的域名就可以避免这种情况。例如 Yahoo! 就使用 yimg.com 存放他们的资源。

13. 优化 Javascript

与优化 CSS&＃xff08;#9&＃xff09;的同理&＃xff0c;JS代码同样需要优化。使用“Dean Edward’s packer”精简JS代码中冗余的部分。

14. 合并JS文件

通常来说&＃xff0c;下载一堆小脚本比下载一个大脚本要慢得多。就是说&＃xff0c;合并JS代码可以提升网页的加载速度。最简单的方法就是打开文件复制粘贴代码&＃xff08;很简单吧&＃xff09;。不过&＃xff0c;有时还可以更简单一点&＃xff1a;

• PHP
• Smarty (PHP 模板语言)
• Rails
• ASP

15. 使用内容分发网络

如果你的网站有较多的国际访客的话&＃xff0c;建议使用内容分发网络&＃xff08;CDN&＃xff09;。内容分发网络可以自动判断访客的位置并选择服务器位置。比如&＃xff0c;一头澳大利亚奶牛要通过网络联系中国的远房亲戚&＃xff0c;那么网速会卡得她奶都挤不出来。但如果使用内容分发网络&＃xff0c;她会被自动登陆到架设在澳大利亚的服务器&＃xff08;或较近的&＃xff09;&＃xff0c;这样她就会很快发现她的亲戚已经改产三聚氰胺了。

结论

有时新增功能会像花钱一样容易&＃xff0c;但根据历史经验&＃xff0c;更少就是更多。更少的图片、脚本和 widget 意味着迅速的载入&＃xff0c;而迅速的载入则意味这更高的用户体验。