影响网页加载速度的要素

影响网页加载速度的因素

一个网站的加载速度是用户体验是否良好的最直观因素，所以通过合理的方法对网页的加载速度进行优化是十分必要的，下图是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

123
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的频率动态掌握。