提高网站打开速度的13个秘籍,让网站飞起来

对于网站设计师来讲，网站的访问速度甚至比内容还重要。就算网站内容很优秀，但如果访问速度很慢，相信也不会有多少人耐心等待。如果说服务器、带宽、CDN这类硬指标我们没有经济实力去做，不妨通过网页代码优化的方式来提高速度，奇芳阁总结了一些可行性的方案。

提高网站打开速度的13个秘籍：1、减少HTTP请求

浏览器会花费80%的时间获取外部元件，包括脚本、样式表、图像等，只有20%的时间用来加载内容，每个网站都会有许多HTTP请求，由于只有2个HTTP请求可以在同一时间传送，所以请求一旦过多就会造成延迟。

常用的方法，合并css，js（将一个页面中的css和js文件分别合并）以及 Image maps和css sprites等。当然或许将css，js文件拆分多个是因为css结构，共用等方面的考虑。阿里巴巴中文站当时的做法是开发时依然分开开发，然后在后台 对js，css进行合并，这样对于浏览器来说依然是一个请求，但是开发时仍然能还原成多个，方便管理和重复引用。yahoo甚至建议将首页的css和js 直接写在页面文件里面，而不是外部引用。因为首页的访问量太大了，这么做也可以减少两个请求数。而事实上国内的很多门户都是这么做的。

而css sprites是指只用将页面上的背景图合并成一张，然后通过css的background-position属性定义不过的值来取他的背景。淘宝和阿里巴巴中文站目前都是这样做的。有兴趣的可以看下淘宝和阿里巴巴的背景图。

http://www.csssprites.com/ 这是个工具网站，它可以自动将你上传的图片合并并给出对应的background-position坐标。并将结果以png和gif的格式输出。

2、缩小Javascript和CSS文件

如果你的网站大约有50-60%的用户是第一次访客，那么这些人会下载Javascript和CSS，如果这些文件很大浏览器会下载很长时间。

使用压缩工具可以减少Javascript和CSS尽一半的文件大小，如果你有信心使用命令行，我强烈推荐使用雅虎的YUI压缩，至少能提高40%到60%的压缩率，如果你实在不懂，可以用站长之家的CSS/JS压缩工具。

3、使用CDN（内容分发网络）

关于更多CDN介绍以及使用方法可参考《几款不错的国内外CDN网站加速服务》一文介绍；

4、启用Gzip压缩

Gzip编码是用来改进网页性能的方法，不仅可以减小存储空间，还可以减少传输所需要的时间。将网站中的文件使用 Gzip压缩后，可以显著地增加网页加载速度，同时也可以降低网站的带宽流量消耗。

部分虚拟主机默认有gzip功能，但大部分没有，独立主机、VPS一般可以设置，开启gzip会加重服务器负担，而且要修改服务器配置，强烈建议大家开启gzip，如果不清楚可以问问所在空间商，让他们帮忙开启。

5、将css放在页面最上面

将css放在页面最上面，这是为什么？因为 ie，firefox等浏览器在css全部传输完全之前不会去渲染任何的东西。所以我们应该尽快让css加载完毕；

6、将script放在页面最下面

将脚本放在页面最下面的目的有那么两点： 1、 因为防止script脚本的执行阻塞页面的下载。在页面loading的过程中，当浏览器读到js执行语句的时候一定会把它全部解释完毕后在会接下来读下 面的内容。2、脚本引起的第二个问题是它阻塞并行下载数量。HTTP/1.1规范建议浏览器每个主机的并行下载数不超过2个（IE只能为2个，其他浏览器如ff等都是默认设置为2个，不过新出的ie8可以达6个）。因此如果您把图像文件分布到多台机器的话，您可以达到超过2个的并行下载。但是当脚本文件下载时，浏览器不会启动其他的并行下载。

7、把javascript和css都放到外部文件中

把页面中需要用到的JavaScript 和CSS样式表文件放在另外的文件夹中，这样一来在打开网站其他页面时就会缓存这些调用的文件，从而加快网站页面的加载速度。

8、减少DNS查询

DNS解析包括往返解析的次数及每次解析所花费的时间，它们两者的积就是DNS解析所消耗的时间，因此，很多人忽视了DNS的问题，其实，DNS对网站解析速度也是非常重要的，如之前介绍的《十大免费DNS服务稳定，可靠，好用的免费DNS服务》、《阿里云解析又一个强大的免费智能DNS解析服务》免费给域名做DNS加速的，大家可以一试。

9、缓存图片、CSS和Javascript

每当一个新用户访问你的网站，图片、CSS和Javascript应该在其浏览器缓存，这样他们下一次访问就特别快。

绝大多数windows主机已经默认启用了，只需要在控制面板中设定过期时间和文件类型那个就可以了，我建议图片、CSS和Javascript时间可设置为一个月。而对于Apache Web服务器，使用mod_cache模块开启缓存。

10、合并CSS引用图片

很多网站的图片都是切成小块的，这样下来就会有大量CSS引用图片，如三次元软件世界的CSS就引用了十几个图片，cssimages也是影响网站速度的一种重要因素。

如果我们把CSS图片合并成一个，多个HTTP请求变成1个，想想会是什么效果？它的原理就是通过CSS坐标的方式取得图片径路，每个CSS标签引用不同坐标就会得到不同图片。我们看到很多网站的CSS图片只有一张，用的就是这个原理。

不懂也没有关系，CSS图片合并生成器这个网站能帮助你合并CSS图片，并且能得到相应代码。

11、只加载head部分的基本脚本

这个最简单，不花时间，点击自己网站右键查看源文件找到head与/head之间的区域，看看那些不重要好的JS文件，把它仍到页面底部，也就是让它最后加载。或者直接删除。

例如三次元世界引用的bdshare（百度分享按钮）和util.js（回顶部标签），让它最后加载，这样能提升内容打开速度，而且它们也不太重要。

12、对图像进行压缩

除非你加载视频，那么影响网站速度罪魁祸首应该就是图片了，如果是jpeg、png图片，保证不失品质的前提下，让他们尽量压缩，Fireworks软件导出向导功能，它提供了一个很好的方式来预览保存的图像，让图片大小与质量之间平衡，也可使用《 JPGmini、PNGmini、WEBmini小巧精致的批量图片压缩优化工具+JS/CSS网页文件压缩》和《12款实用免费批量图片体积优化压缩工具！seo图片压缩优化(在线网页版+桌面工具》中介绍的图像编辑压缩工具！

例如我的每篇博文配图都用了导出向导功能，我尽量把图片都压缩在30K以内，在一定程度上加快了浏览速度，但也有部分图片失真，看不清楚。

13、把统计代码放到网站的最下面：

不要和页面内容同在一个Table或者div标签里。可以在页面代码的最下方直接放置统计代码，或者在最下方单独做一个Table或者div来放置计数器。这样，在计数器不能访问的时候，你的网站速度也不会受到丝毫影响。

写在最后：

最后介绍一下我的博客测试速度的网站http://loadimpact.com

在 文本框中输入要测试网站的网址www.wugongqi.cn，然后点击Start test按钮就开始对网站速度进行测试。稍等一段时间，可以统计出加载网站的一些详细载入数据。包括整体加载和站内图片以及JavaScript 、CSS等代码载入。可以在右侧列表选择不同文件来同时对比，最多三个对象的加载数据。而且在Loadimpact网站中还可以生成图表显示，方便我们进 行分析。通过生成的数据，就会知道自己网站速度的瓶颈在哪里，从而进一步来解决问题。