雅虎网页优化14条准则

雅虎网页优化14条准则

网站最基本的东西是什么？
——内容？SEO（搜索引擎优化）？UE（用户体验）？都不对！是速度！
内容再丰富的网站，如果慢到无法访问也是毫无意义的； SEO做的再好的网站，如果搜索蜘蛛抓不到也是白搭； UE设计的再人性化的网站，如果用户连看都看不到也是空谈。


所以网页的效率绝对是最值得关注的方面。如何才能提高一个网页的效率呢？Steve Souders(Steve Souders的资料http://www.oreillynet.com/pub/au/2951)提出的提高网页效率的14条准则，而这些准则也将是我们下篇中介绍到的YSlow工具的理论基础：

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
第一条：Make Fewer HTTP Requests 尽可能的减少HTTP的Request请求数。

80%的用户响应时间都是浪费在前端。而这些时间主要又是因为下载图片、样式表、JavaScript脚本、flash等文件造成的。减少这些资源文件的Request请求数将是提高网页显示效率的重点。
这里好像有个矛盾，就是如果我减少了很多的图片，样式，脚本或者flash，那么网页岂不是光秃秃的，那多难看呢？其实这是一个误解。我们只是说尽量的减少，并没有说完全不能使用。减少这些文件的Request请求数。在开发中为了方便组织和规划样式表，将用于不同用途的样式表文件分离开来，形成不同的css文件。然后在页面中根据需要引用多个css文件。根据“尽可能的减少HTTP的Request请求数”准则我们知道，那样的确是不合理的，因为那样会产生更多的HTTP的Request请求数。从而降低网页的效率。所以，从提高网页效率的角度上而言，我们还是应该将所有的css写在同一个css文件中。但是问题又来了。那么怎么来很好的组织和规划样式表呢？这的确是个矛盾。我现在的做法是采用两套版本。编辑版和发布版。编辑版仍然使用多个css文件以便于规划和组织。而等到发布的时候，再将多个css文件合并到一个文件中去，从而达到减少HTTPRequest请求数的目的。

用一个大图片代替多个小图片。
合并你的css文件。
合并你的javascript文件。

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

这个看上去好像很深奥的样子，但是只要结合中国的网络特色，这个便不难理解了。“北方服务器”、“南方服务器”、“电信服务器”、“网通服务器”……这些词听起来是那么熟悉和压抑。如果，一个北京的电信用户试图从广东的网通服务器上打开一个类似《壁纸合集》帖子的网页时，你就能很深刻的理解。

鉴于这个不是我们开发人员力所能及的准则，所以这里也就不多言了。

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

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

第四条：Gzip Components 启用Gzip压缩

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

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

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

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

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

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

CSS中的Expressions其实也是一种if判断 首先有必要先说明一下CSS Expressions是什么一个东西。其实它就像其它语言中的if……else……语句。这样在CSS中就可以进行简单的逻辑判断了。举个简单的例子——

<style>

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

</style>

<INPUT TYPE=”text” NAME=”">

<INPUT TYPE=”text” NAME=”" readonly=”true”>

这样css就可以根结一些情况分别使用不同的样式了。如果你对这个感兴趣可以阅读相关的文章—— 《CSS中的expression系列文章》。但是CSS中Expressions 的代价却是极高的。当你的页面需要根据判断来渲染效果的元素很多的时候，那么你的浏览器将长期处于假死状态，从而给用户带来极差的用户体验。

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

这一条好像和第一条有点矛盾。的确，如果从HTTP的request请求数来讲的话，这样做的确是降低了效率。但是之所以这么做，是因为另外一个重要的考虑因素——缓存。因为外部的引用文件会被浏览器缓存，所以如果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代码体积的在线工具网站——http://www.cssdrive.com/index.php/main/csscompressor

它提供了多种压缩方式，可以适应多种要求。

第十一条：Avoid Redirects 避免跳转

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

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

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

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

对重复说“不！”

这个准则的道理很浅显，但是真正在工作中，很多人却因为“项目时间紧”、“太累了”、“初期没有规划好”……这样的理由搪塞过去了。你，的确可以找很多的理由不去处理这些多余重复的脚本代码，如果你的网站不需要更高的效率和后期维护的话。

也正是这点，我提醒大家一些，一些javascript框架、javascript包一定要慎用。至少要问一下：用了这个js kit 到底给我们多少方便，提高了多少工作效率。然后，再与它因为多余的、重复的代码带来的负面效果比较一下。

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

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

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

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



心得
1、合并图片，当然这个图片指的是一些背景图，这么可以减少http请求数，从而减轻服务器负担。
2、给内嵌于网页中的图片添加宽度和高度，因为没有写图片大小的话，浏览器在下载完图片后还要对图片进行在一次的渲染。
3、选取好图片格式，并给图片添加alt和title属性。
4、优化网页结构，网页代码尽量语义化，并且严格控制好嵌套层次，并且合理运用好table。
5、对于页面整体的压缩，当然这个压缩包括了css压缩（尽量使用缩写，css代码的复用，同时删空格和注释，而在命名上个人喜欢使用长类名，虽然相对文件的容量大了，但是浏览器对于网页的解析速度会加快）；js压缩（js代码的复用，同时象最小化一样，它通过删除注释和空格来减少源码大小，同时它还可以对代码进行混淆处理。）；html的压缩体现在之前说的网页结构的优化，尽量无冗余代码。压缩HTTP响应内容，目前最流行的应该是Gzip；当然程序的压缩优化也是一部分。
6、把JavaScript和css文件放到外部，并不内嵌于网页，同时可以考虑把样式表放到头上把脚本文件放到底部。需要注意的是尽量不要使用css的表达式，他很容易让浏览器出现假死。
7、合理使用Ajax和iframe，避免页面大量刷新 。