优化网站性能的14条准则

内容再丰富的网站，如果慢到无法访问也是毫无意义的； SEO做的再好的网站，如果搜索蜘蛛抓不到也是白搭； UE设计的再人性化的网站，如果用户连看都看不到也是空谈。

所以网页的效率绝对是最值得关注的方面。如何才能提高一个网页的效率呢？Steve Souders(Steve Souders的资料http://www.oreillynet.com/pub/au/2951)提出的提高网页效率的14条准则：

• Make Fewer HTTP Requests
• Use a Content Delivery Network
• Add an Expires Header
• Gzip Components
• Put CSS at the Top
• Move Scripts to the Bottom
• Avoid CSS Expressions
• Make JavaScript and CSS External
• Reduce DNS Lookups
• Minify JavaScript
• Avoid Redirects
• Remove Duplicate Scripts
• Configure ETags
• Make Ajax Cacheable

下面，就来具体分析一下14条准则具体的内容和作用

第一条：Make Fewer HTTP Requests 尽可能的减少HTTP的Request请求数

80%的用户响应时间都是浪费在前端。而这些时间主要又是因为下载图片、样式表、JavaScript脚本、flash等文件造成的。减少这些资源文件的Request请求数将是提高网页显示效率的重点。

这里好像有个矛盾，就是如果我减少了很多的图片，样式，脚本或者flash，那么网页岂不是光秃秃的，那多难看呢？其实这是一个误解。我们只是说尽量的减少，并没有说完全不能使用。减少这些文件的Request请求数，当然也有一些技巧和建议的：

1：用一个大图片代替多个小图片。

页面上的每张图片都将引发一次http请求，虽然小图片的下载速度会比大图片快，但是当请求数比较多的情况下时，明显是大图片加载的效率远高于众多零碎的小图片。所以如果可能还是使用大图片来替代过多的琐碎的小图片吧。这也是为什么翻转门的效率要高于图片替换实现的滑动门的原因。

但是，请注意：也不能用太大的单张图片，因为那样会影响到用户体验。例如个几兆的背景图片的使用绝对不是一个好主意。

2：合并你的css文件。

这个很容易理解，页面中每使用一个调用外部css的<link>标签时，都会像服务器发送请求，从而降低网页的效率。所以，从提高网页效率的角度上而言，我们还是应该将所有的css写在同一个css文件中。

3：合并你的javascript文件。

原因和处理同上。

第二条：Use a Content Delivery Network 使用CDN

这个看上去好像很深奥的样子，但是只要结合中国的网络特色，这个便不难理解了。“南电信，北网通”的口号相信大家都有所耳闻，试想一个北方的用户在网通线路中访问电信服务器下的一个图片站点的话，我敢打赌他一定会有砸机器的冲动。

第三条：Add an Expires Header 添加周期头

这个也并非开发人员来控制，而是网站服务器管理员的职责。所以，如果作为开发人员的你不了解和明白也没有关系。还是把这个准则告诉公司的网站服务器管理员。

第四条：Gzip Components 启用Gzip压缩

这个大家应该比较熟悉。Gzip的思想就是把文件先在服务器端进行压缩，然后再传输。这对于体积较大的纯文字型的文件有特效。鉴于这也并非开发人员，而是网站服务器管理员的工作范畴，这里就不详细讲解了。如果对此也感兴趣，可以资讯网站服务器管理人员或者baidu。

第五条：Put CSS at the Top 把CSS样式放在页面的上方。

无论是HTML还是XHTML还是CSS都是解释型的语言，而非编译型的。所以CSS到上方的话，那么浏览器解析结构的时候，就已经可以对页面进行渲染。这样就不会出现，页面结构光秃秃的先出来，然后CSS渲染，页面又突然华丽起来，这样太具有“戏剧性”的页面浏览体验了。

第六条：Move Scripts to the Bottom 将脚本放在底部

原因同第五条一样。只是脚本一般是用来于用户交互的。所以如果页面还没有出来，用户连页面都不知道什么样子，那谈交互简直就是扯谈。所以，脚本和CSS正好相反，脚本应该放在页面的底部。

第七条：Avoid CSS Expressions 避免使用CSS中的Expressions

CSS Expressions是什么一个东西。其实说白了，就是在css中进行逻辑运算的一种写法

　　input{background-color:expression((this.readOnly && this.readOnly==true)?”#0000ff”:”#ff0000″)}

类似上面的这个css例子就是CSS Expressions。可以想象，人家css的本身作用只是渲染网页，而你硬是要他完成一系列的逻辑运算，这样的难题怎么会处理得妥当呢？

第八条：Make JavaScript and CSS External 将javascript和css独立成外部文件

这条看似好像和第一条中要求的减少http请求有所矛盾，既然要减少http请求，那势必就要减少外部文件的调用。其实不然，之所以这么做，是因为另外一个重要的考虑因素——缓存。因为外部的引用文件会被浏览器缓存，所以如果javascript和css体积较大的时候，我们将它们独立成外部文件。这样当用户只要浏览一次以后，这些体积较大的js和css文件就能被缓存起来，从而极高地提高用户再次访问时的效率。

第九条：Reduce DNS Lookups 减少DNS查询

DNS域名解析系统。大家都知道我们之所以能记住那么多的网址，是因为我们记住的都是单词，而非http://202.153.125.45这样的东西， 而帮我们把那些单词和202.153.125.45这样的ip地址联系起来的就是DNS。那这一条对我们到底有什么真正意义上的指导意义呢？其实有两条：

1：如果不是必须，请不要把网站放到两台服务器上。

2：网页中的图片、css文件、js文件、flash文件等等，不要太多的分散在不同的网络空间中。这就是为什么那种只发一个网站中的壁纸图片的帖子，要比壁纸图片来源于不同网站的帖子显示要快得多的原因。

第十条：Minify JavaScript and CSS 减少JavaScript和CSS文件的体积

这点无需解释，文件越小当然加载越快。网上也随处可见好用的javascript和css压缩工具。这里就不多说了。

第十一条：Avoid Redirects 避免跳转

从网页开发人员的角度来解读此条。那么我们可以解读到什么东西呢？

1：“此域名已过期，5秒钟以后，页面将跳转到http://www.52ladybug.com/页面”，这句话看起来的确很熟悉。但是，很奇怪了，为什么不直接链接到那个页面呢？

2：一些链接地址请更明确的写出来。例如:将http://www.52ladybug.com/ 写成http://www.52ladybug.com （注意最后面一个“/”符号）。的确，这两个网址都能访问到我的博客，但事实上，它们是有区别的。http://www.52ladybug.com 的结果是个301响应，它会被重新指向http://www.52ladybug.com/ 。但是显然，中间多浪费了一些时间。

第十二条 Remove Duplicate Scripts 移除重复的脚本

这点和之前的第十点一样容易理解，但是值得注意的地方是，一些外部引用进来的javascript框架往往携带大量的冗余，使用前最好是能对其进行一定的清理，css也一样。

第十三条：Configure ETags 配置你的实体标签

首先来讲讲什么是Etag吧。Etag（Entity tags ）实体标签。这个tag和你在网上经常看到的标签云那种tag有点区别。这个Etag不是给用户用的，而是给浏览器缓存用的。Etag是服务器告诉浏览器缓存，缓存中的内容是否已经发生变化的一种机制。通过Etag，浏览器就可以知道现在的缓存中的内容是不是最新的，需不需要重新从服务器上重新下载。这和“Last-Modified”的概念有点类似。很遗憾作为网页开发人员对此无能为力。他依然是网站服务器人员的工作范畴。如果对此有兴趣，可以咨询网站服务器管理员或者baidu。

第十四条：Make Ajax Cacheable 上面的准则也适用Ajax

现在的Ajax好像有点被神话了，好像网页只要Ajax了，那么就不存在效率问题了。其实这是一种误解。拙劣的使用Ajax不会让你的网页效率更高，反而会降低你的网页效率。Ajax的确是个好东西，但是请不要过分的神话它。使用Ajax的时候也要考虑上面的那些准则。个人的建议是在能不用Ajax的地方就尽量不要用他。

当然，在网站优化的过程中，很多时候并不是真正能按照以上14条准则完全执行。事实上，大多数的情况是需要网站优化者在多出进行取舍，完全没有必要生搬硬套这些理论。总之，能有效提高网站性能的做法，都是好方法。