YSlow 13条网站速度优化准则

Yahoo!曾经针对网站速度体验提出了34条准则《Best Practices for Speeding Up Your Web Site 》(中文译文 )。
YSlow 在这些准则的基础上精简为更加直观的13条，针对每一条从A-F评分，得出一个总分，来评估一个网站的优化程度，你可以很方便地从YSlow的测试结果中看到你得不足的地方，并加以改进。
YSlow是FireBug 的一个插件，在FireFox 里使用。

本站测试结果截图如下：

由于加入了Google统计和Yahoo统计的JS代码，所以Http请求较多，并且，它们的JS代码是没有加上Expires的，所以，在1/3/9/10几个项目中拖下了不少分数~

1.Make fewer HTTP requests / 减少Http请求数

每个CSS，JS，以及各种图片内容，都是会向服务器请求数据的，越来越多的HTTP请求，只会让网页越来越慢~
所以，需要对这些内容进行整合优化，虽然把CSS和JS分门别类地分文件存放是较好维护的，但也要考虑性能问题，所以，尽可能地把相关的CSS文件，JS文件合并成一个文件，当然，并不是所有的CSS、JS全都合并在一起，在维护性和性能中要找一个平衡点~
对于CSS中使用到的背景图片，可以使用CSS Sprite技术，所谓的CSS Sprite就是把小图标合并成一个大的背景文件，通过background-position进行定位，一个网站使用的图标和背景图片可能是十几个或者 几十个，通过合并后，可以减少大量的Http请求。
附：Yahoo!的一张背景图

更多CSS Sprite相关：CSS Sprites: Image Slicing’s Kiss of Death
在线CSS Sprite服务：CSS Sprite Generator

2.Use a CDN / 使用CDN

CDN的全称是Content Delivery Network，即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络”边缘”，使用户可 以就近取得所需的内容，解决Internet网络拥挤的状况，提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均 等原因所造成的用户访问网站响应速度慢的问题。
这个不属于前端考虑的问题~更多相关CDN的知识请访问百度百科的词条：CDN

3.Add an Expires header / 为文件头指定Expires

Expires即过期时间，对于长期不需要改动的文件来说，比如CSS，JS，图片，设置一个较长的Expires是再好不过了，这样，访问者不用重复地下载网站上的内容，达到速度优化的目的。
当然，就算你需要修改文件也是可以的，只不过网站上的文件路径可以相应地改改，比如：base.css?t=090827

4.Gzip components / 启用Gzip压缩组件

启用服务器的Gzip组件，使网页内容在压缩之后再传递到客户端，节省流量，当然，这取决于你是否能操作服务器。
关于设置Gzip，可以Google一下：IIS启用Gzip Apache启用Gzip

5.Put CSS at the top / 将Css文件放在最上面

将CSS文件链接放置在head区域，保证CSS在第一时间加载，优化用户体验。

6.Put JS at the bottom / 将Js文件放在最底部

大多数JS都是需要在页面加载完成后才能工作的，所以，将JS放置在页面的最后面，以保证页面能在第一时间加载完；同上，优化用户体验。

7.Avoid CSS expressions / 避免CSS expressions(表达式)

CSS表达式会引起较大的性能问题，避免使用它，就算某些情况在IE6里需要用到它，也应该为IE6单独设置，避免影响到IE7以上版本。

8.Make JS and CSS external / 使用外部引用的Js和Css文件

将JS和CSS做成外部文件链接，这样是可以缓存的，避免每次加载页面的同时都需要加载这些重复的JS和CSS。
当然，某些情况下JS、CSS内嵌也许会更快，还是权衡问题~

9.Reduce DNS lookups / 减少DNS查询

多域名会导致多次DNS解析，比如图片是存放在images.domain.com，当然，分开服务器存放又能减少服务器的压力，如何权衡，总之，这不是前端的范畴了~
见上面本站的测试图，因为有Google统计和Yahoo统计，导致多了5个域名，汗~只得了C。

10.Minify JS / 压缩Js文件

利用功能压缩JS文件，JS压缩工具有：YUI Compressor JSMin
其实CSS也可以被压缩，去掉空白，换行，以及注释，也可以让CSS小不少，YUI Compressor也可以压缩CSS。

11.Avoid redirects / 避免重定向

重定向影响用户体验，当然，也影响了速度~
一个最简单的例子就是，http://foxling.cn应该写成http://foxling.cn/

一种最浪费性能的重定向频繁发生而网络开发者们却往往没有意识到，那就是当地址中应当有一个左斜线（/）却没有的时候。比 如，访问http://astrology.yahoo.com/astrology会导致一个301效应并重定向到http: //astrology.yahoo.com/astrology/（注意这里加了一个左斜线）。

12.Remove duplicate scripts / 移除重复的脚本

同一页面中重复加载JS，增加了下载时间，脚本被执行了两次。
别做这种粗心的事~

13.Configure ETags / 配置ETags

这也是服务器配置的事
实体标签（ETags）是服务器和浏览器用于确定浏览器中缓存的组件和服务器中的是否对应的一种机制。

This entry was written by FoxLing , posted on 2009年03月19日 at 23:23 , filed under HTML/CSS/XML , JS/AJAX/DOM and tagged YSlow , 网站速度优化 . Bookmark the permalink . Follow any comments here with the RSS feed for this post . Post a comment or leave a trackback: Trackback URL .