15招快速减少页面载入时间

15招快速减少页面载入时间

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

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

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

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

2. Pingdom

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

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

3. 把文件放在本地

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

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

这是一个正确设置图片长度和宽度的示例：
<img src="images/mine.gif" border="0" alt="my image" width=”125″ height=”250″ />
图片的长度和宽度设置与否简直是天壤之别。若设置了长宽，浏览器会在图片未完成下载前先载入其它内容，并且会在网页预留出图片的空间。 否则浏览器会等待图片下载完成，再去载入其余的内容。

5. 慎用 widget

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

6. 使用静态缓存

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

• PHP
• Rails
• Perl
• Java
• ASP

7. 加速器

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

8. Firebug

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

9. 优化CSS

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

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

10. 使用多个域名

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

11. 精简 Cookie

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

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

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

13. 优化 Javascript

与优化 CSS（#9）的同理，JS代码同样需要优化。使用“Dean Edward’s packer ”精简JS代码中冗余的部分。

14. 合并JS文件

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

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

15. 使用内容分发网络

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

结论

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

原文地址：http://webjackalope.com/fast-page-load-time/
译文：http://zanbu.blogbus.com/logs/29759664.html