如何减少网页的加载时间

qinmario

随着网站的功能的越来越强大，随之而来的是网站的代码量也会越来越大，互联网进入Web2.0富客户端的时代以后，站长们更加关注的是网站的美观和良好的用户体验。

然后想要产生如此吸引人的视觉效果，图片，CSS和JS的大量使用就必不可少了。这样一来，整个网站的网页文件的体积就变的很大，可能以前100k的大小就可以满足了基本的要求，而现在因为使用了大量图片和css,js，整个网页文件就有可能变成了300k甚至更大，从而影响网站的加载速度。我们可以想一下，10K的页面和100K 的页面哪一个能更快的展现出来，答案当然是10K的页面。当然了这种情况是在原来服务器不变的前提下，如果你的服务器性能提高了，加载10k页面和100k页面，这个时间差就根本体现不出来，而这种情况下网站运营的成本价增加了，这里就不说我们要讨论的情况来。很多实验研究表明，用户最满意的打开网页时间，是在2秒以下，这种感觉就是我们一点击一个链接，网页一瞬间就展现出来了。而用户能够忍受的最长等待时间大约在 6～8秒之间。8秒是一个临界值，如果网页加载时间在8秒以上，很有可能大部分访问者最终都会离开该页面。除非他一定要打开那个页面

关键字的排名与网页的加载速度也有关系，这个主要体现搜索引擎对用户体验度上，用户体验度好，排名相对其它网站就好些，因此我们非常有必要去提高网页的加载速度，这个不需要太多的成本投入，只需要平时多注意一些小技巧就行了！笔者结合自己的经验谈谈如何缩短网页的加载时间的一些有用的方法。

1. 尽量减少页面中重复的HTTP请求数量

比较直接的理解就是要减少调用其他页面、文件的数量。我们在使用css格式控制的时候，经常会采用background载入很多图形文件，而每个background的图像都会产生1次HTTP请求，一般我们为了让页面生动活泼会大量使用background来加载背景图，要改善这个状况，可以采用css的1个有用的background-position属 性来加载背景图，我们将需要频繁加载的多个图片合成为1个单独的图片，需要加载时可以采用：background:url(....) no-repeat x-offset y-offset;的形式加载即可将这部分图片加载的HTTP请求缩减为1个。

2. 服务器开启gzip压缩

即将需要传输的内容压缩后传输到客户端再解压，这样在网络上传输的 数据量就会大幅减小。通常在服务器上的Apache、Nginx可以直接开启这个设置，也可以从代码角度直接设置传输文件头，增加gzip的设置，也可以从 负载均衡设备直接设置。不过需要留意的是，这个设置会略微增加服务器的负担。建议服务器性能不是很好的网站，要慎重考虑。

3. css样式的定义放置在文件头部

4. Javascript脚本放在文件末尾

我们都知道网页文件的载人是从上到下的加载的，而有很多Javascript脚本执行效率比较低下，或者在网页前面都不需要执行的，如果将这些脚本放置到页面比较靠前的位置，很可能会导致网站内容载入速度下降甚至无**常加载，所以一般将这些脚本放置在网页文件末尾，一定要放 置在前面的脚本要改用所谓的“后载入”方式加载，在主体网页加载完成后再加载，防止其影响到主体网页的加载速度。

5. 压缩Javascript、CSS代码

一般js、css文件中存在大量的空格、换行、注释，这些利于阅读，如果能够压缩掉，将会很有利于网络传输。这方面的工具也有很多，可以在百度里搜索一下关键字“css代码压缩”，或者“js代码压缩”将会发现有很多网站都提供这样的功能，当然了你也可以自己写程序来做这个工作，如果你会的话。就拿我们这个网站来说吧。刚开始上传这个网站的时候，我的很多Css代码都没有压缩，后面发现了这个问题，我就上网找了相关的网站的压缩代码的功能，最后就把很多CSS文件都压缩了。这个压缩比率还是比较高的，一般都有50%左右。由此可见，这个代码压缩对于网页的加载还是很有用的。

6. Ajax采用缓存调用

Ajax调用都采用缓存调用方式，一般采用附加特征参数方式实现，注意其中的