如何达到 Yahoo! ySlow GradeA 速度指标（一）

Yahoo! YSlow 是一个由 Yahoo! 雅虎开发的 Firebug 插件，其实通过这个名字就知道这款插件是干嘛的即 Y(why)Slow 名字起的太好了 ySlow 可以通过分析网页内各项资源的加载情况对三类网页进行评级，并提供一些非常有用的建议，目前主要被用来测试网站加载速度及获得网页提速建议。记得这个小站刚开播的时候是 GradeC 后来简单调了一下到了 GradeB 今天终于下决心冲一下 GradeA 重写了几乎三分之一的代码和图片，终于功夫不负有心人不仅整体达到 GradeA 级别，并且所有的 14 项指标也均为 GradeA 评级 Overall performance score 99 分，那么如何能顺利达到这个指标呢，这里将分别从 14 项内容简单描述一下……

先截图留个纪念吧……

但这个 GradeA 仍然是 Small Site or Blog 标准下的 GradeA 另外其它另外的两个标准 Classic 和 YSlow2 目前仍然是 GradeC 级别，单就里面 CDN 这一项个人网站就没有办法克服，但本站本来就是 Blog 嘛理应还是用 Blog 的标准衡量的，下面就分别以这 14 个指标简单解释一下，其中的一些内容我们不需要了解其原理，因为浏览器都是图形界面的，我们通常不了解在这华丽的背后发生的事情，这是网络协议的范畴……

1、Make fewer HTTP requests

减少 HTTP 请求：浏览器打开页面并与服务器的 IP 地址建立 TCP 链接之后就会开始发送 HTTP 请求来下载页面上相关文件及元素，通常每个文件（外部样式 外部脚本 图片 等等）都需要浏览器发送一次 HTTP 请求。而建立 HTTP 请求是需要时间和带宽开销的，在 56Kbps 时代网络带宽很小，我们通常需要将大图切割成小图来多次下载以减少每个图片从下载到显示的时间；而目前的宽带时代则需要通过减少 HTTP 链接次数来减少网页加载时间。

具体措施：合并文件以达到减少 HTTP 请求次数的目的如：合并多个 CSS 文件到一个文件；合并多个 js 脚本到一个脚本文件；合并全部背景图片使用 CSS Sprites 技术等。

2、Compress components with gzip

使用 gZip 压缩：这种压缩技术存在于 服务器 和 浏览器 之间，首先浏览器在请求 URL 地址时会包含是否支持 gZip 的信息头，如果支持服务器将对网页文件流进行压缩（这种压缩通常能到源文件的 1/10 ~ 3/10 从而节约 70% 的下载时间）；如果浏览器不支持则发送未压缩的文件流给浏览器。这种压缩下载应该是目前提高网页下载速度最为有效的方式之一。

具体措施：需要咨询你的服务器托管维护人员或虚拟主机供应商，服务器端配置开启 gZip 压缩，必要时安装第三方功能及模块，但某些情况下 IE6 对这项技术的支持并不尽人意。

3、Put CSS at top

页头 CSS 文件：将引入 CSS 样式表的代码移至页头 head 标签内将有助于页面渲染逐步加快，也可避免代码先于样式表完成下载造成的无样式页面。

具体措施：使用 link 标签引入 CSS 样式表并限定设备类型，这样可避免其他设备下载并可在客户端缓冲 CSS 文件从而加快二次浏览速度。

4、Put JavaScript at bottom

页脚 JS 文件：将引入 JavaScript 脚本文件的代码移至页脚，可避免由于下载 js 文件而耽误页面主体内容的下载进度，通常 js 脚本都用来处理用户行为，所以也应该在页面加载完成之后再后台下载。

具体措施：使用 script 标签引入 JavaScript 脚本的代码放到 body 标签或 html 标签之前即可，另外尽量不要在页面中出现 js 内容，而是把所有脚本放在一个 js 文件中引入，也可以缓存从而加快二次浏览速度。

5、Avoid CSS expressions

避免 CSS 脚本：在 IE 浏览器中可以使用 filter 这个 IE 私有的 CSS 属性来在样式表文件中实现 js 脚本的一些功能，但这样做的代价是巨大的，在丧失浏览器兼容性的同时也会浪费大量系统资源，因为 IE 浏览器在渲染 filter 属性的时候不仅是页面缩放甚至滚动页面、鼠标移动的同时都需要重新计算 filter 值，所以在 CSS 中使用表达式（Expressions）是可怕的。

具体措施：删除 CSS 样式表中所有的 filter 属性使用标准的 W3C 样式表属性代替，实在需要设置变量值的可以在 js 文件中编写脚本实现。

6、Reduce DNS lookups

减少 DNS 查询：所谓 DNS 查询就是浏览器从 DNS 服务器查询域名获取 IP 地址的过程。通常这种情况出现于网页内有出现其他域的文件，比如在域 nan.im 下的网页如果添加了 谷歌分析 统计代码就会增加一次到 www.google-analytics.com 的 DNS 查询。

具体措施：尽量在网站本域下放置所有的网页文件及代码，这样整个页面只需要一次 DNS 查询就足够了。但并不是说绝对如此，如果在大型网站使用 Content Delivery Network（CDN）内容分发网络 的话即使会有 DNS 查询，但仍然会提高页面总体下载速度。

7、Minify JavaScript and CSS

压缩 JS CSS 文件：网页文件的大小非常直接的反映在页面下载时间上，这里的压缩是指文件本身的压缩，不同于前面服务器端的 gZip 压缩。

具体措施：从文件中删除不必要的字符如多余的空格符 换行符 跳格符 注释 等内容以达到减少页面体积缩短下载时间的目的。

今天就先到这，欲知后事如何，请看下集《如何达到 Yahoo! ySlow GradeA 速度指标（二）》……