影响网页加载速度的因素

一个网站的加载速度是用户体验是否良好的最直观因素，所以通过合理的方法对网页的加载速度进行优化是十分必要的，下图是Yahoo!的YSlow所指出的23个因素。

1、减少HTTP请求次数
一个页面的加载从开始到结束，其实大部分时间都消耗在下载页面元素（诸如HTML、CSS、Javascript、Flash、图片等）上。据统计，HTTP请求在无缓存情况下占去了40%到60%的响应时间，而每增加一个元素，网页的平均载入时间就会增加40ms（宽带）或250ms（窄带）。
减少HTTP请求次数的方法大致有以下3种：
a. 避免不必要的HTTP请求：
例如用CSS代替圆角图片。
b. 合并CSS、Javascript、图片文件：
将CSS、Javascript分别存储在一个大文件中加载，使用CSS Sprites（图片拼合技术）
c. 优化缓存：
以百度为例，首页的加载总共8.3KB，其中5.3KB来自缓存，可见合理使用缓存可以极大降低HTTP的请求次数。同时配合Expires和Etags，可以设置缓存的过期期限和检查客户端缓存和服务器端的数据是否匹配。
d. 尽量避免使用内联图像：
在(X)HTML页面中尽量少的通过img的src属性引入图片，尽可能将图片放置在CSS中。

2、使用CDN（内容分布网络）
CDN，即Content Delivery Network，其目的是通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络”边缘”，使用户可以就近取得所需的内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。但是CDN对于个人用户和小公司而言，成本较高，只能望尘莫及。

3、避免空的src和href链接

4、在http头部添加Expires
服务端设置Expires是为了告知客户端内容需要缓存多长时间，例如：

1	Expires: Thu, 15 Apr 2010 20:00:00 GMT //告知客户端准确的过期时间

如果你使用的是Apache服务器，可以使用ExpiresDefault来设定相对当前日期的过期时间，有点保质期的意味：

1 2 3

<FilesMatch "\.(gif|jpg|js|css)$"> ExpiresDefault "access plus 10 years"//告知客户端缓存10年后过期 </FilesMatch>

要切记，如果使用了Expires文件头，当缓存的内容需要改变时就必须改变文件名，Yahoo!给我们了一个非常好的建议：在文件名中加上版本号，如yahoo_2.0.6.js。

5、使用Gzip压缩文件内容
Gzip是目前最流行也是最有效的压缩方式，它需要服务端的支持，使用Gzip大概可以减少70%的响应规模，目前大约有90%通过浏览器传输的互联网交换支持gzip格式。

6、将样式表置于页面顶部

7、将Javascript置于页面底部

8、避免使用CSS Expression

9、外部引用CSS Style和Javascript
这么做的目的是为了使得CSS和Javascript能够在浏览器中缓存，如果不同的页面都用到的CSS在缓存之后就不会重复加载，同时也减少了HTTP的请求次数。

10、减少DNS的查找次数
当我们在浏览器中输入一个域名之后，会有20~120ms的时间将域名转换为对应的IP地址，减少域名的数目，就会减少DNS的查找次数，从而降低DNS解析所耗费的响应时间，但是每个域名有并行下载数的限制，所以依照Yahoo!的建议，我们可以使用2~4个域名来获取DNS解析时间和并行下载数的平衡。

11、压缩CSS和Javascript
众所周知，元素的体积越小，加载速度就越快，使用JSMin和YUI Compressor可以对Javascript进行很大程度的压缩，同时YUI Compressor还可以压缩CSS，YSlow还提供了一个Smush.it工具，它可以实现对页面中所有图片的无损压缩。

12、避免使用重定向（跳转）
用真实世界投射法分析，假如你需要到A城B店购买一样物品，但是当你到了之后发现，门上写着：“本店铺已搬迁至C城D店”，你会有什么感受？被骗了？崩溃了？放弃了？在网页的用户体验中也是一样的道理，使用重定向毫无疑问会在拖慢加载速度的同时也降低了用户的体验。

13、移除冗余的CSS和Javascript

14、配置Etags

15、让Ajax能够缓存

16、使用GET完成Ajax请求
Yahoo!Mail团队发现，当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。因此使用GET最为恰当，因为它只需发送一个TCP包（除非你有很多 cookie）。IE中URL的最大长度为2K，因此如果你要发送一个超过2K的数据时就不能使用GET了。

17、减少DOM元素的数量
下边的代码可以很方便的获取页面中DOM元素的总数：

1	alert(document.getElementsByTagName('*').length);

那么多少个DOM元素算是多呢？Yahoo!主页是一个内容非常多的页面，但是它只使用了700个元素（HTML标签）。DOM元素的数量除了对页面的加载速度有影响之外，也影响对搜索引擎的友好程度，事实上，有些搜索引擎在读取一定量的字符之后就会停止解析剩余的HTML，从而漏掉重要的内容，因此减少DOM元素的数量，精简优化网页的结构对SEO也有着举足轻重的作用。

18、避免404错误

19、减小Cookie的体积

20、使用域名无关性的Cookie
如果我们之前为了增加并行下载数，单独设置了2~4个域名加载不同的页面元素，比如benben.cc为主域名，img.benben.cc加载图片元素（其实img.benben.cc依然是指向benben.cc/img），但是如果我们给benben.cc设置了cookie，那么所有对img.benben.cc的请求都会包含cookie，所以我们可以购买一个新的域名来单独存放静态内容，前提是不对该域名设置cookie，例如：Yahoo!使用的是 ymig.com，YouTube使用的是ytimg.com，Amazon使用的是images-anazon.com等等，如果不想这么做，也可以只对www主机头设置cookie来解决该问题。

21、避免使用Alpha滤镜

22、不要在HTML页面中缩放图片
我就有过这种表面看起来省时省力，其实却拖慢了加载速度的行为，我为了不在服务端对每个大图单独生成相应的缩略图，就在客户端对原始图片设置width和height从而实现缩略图的缩放，后来我发现这种行为会很大程度上影响一个页面从开始解析到完成加载的总时间。

23、使Favicon尽量小巧且可缓存
a. 文件尽量小巧，最好小于1Kb。
b. 合理设置缓存时间，如果你不想更改Favicon的默认名称，就把Expires设置为未来的几个月，当然，这个时间你可以根据你更换Favicon的频率动态掌握。