我们知道YSlow是方便大家优化网页从而产生的工具,研究清楚其评分标准,掌握其原理就能将网页性能最大化。
YSlow规则中一共有13条,其中比较重要的有11条,先简单说说各自的大概解释:
1、Make fewer HTTP requests–更少的http请求,也就是说页面中尽量少的引用外部静态资源,js、css以及图片
2、Use a CDN–使用CDN网络,将页面中的静态资源分布到离用户最近的网络节点上
3、Add an Expires header–为静态资源文件增加过期时间,让用户通过本地缓存来更快的访问网站
4、Gzip components–压缩静态资源内容,减少网络传输时间
5、Put CSS at the top–将CSS放在页面头部,能够更快渲染页面
6、Put JS at the bottom–将JS放在页面底部,一般情况下JS的下载是阻塞模式的,放在页面顶部会阻塞其他资源的下载
7、Avoid CSS expressions–不要使用CSS表达式,因为CSS表达式需要很多资源,有时甚至会造成页面假死
8、Make JS and CSS external–将CSS和JS使用外部的独立文件,这点有点和1冲突,但是仔细分析下,并不矛盾
9、Reduce DNS lookups–减少DNS查找(这点我后面详细解释下)
10、Minify JS–最小化压缩JS,和第4点不同,使用YUI Compressor或者JSMin将JS文件进行分析,将一些变量名变短,去除不必要的空格和符号
11、Avoid redirects–避免无意义的跳转
12、Remove duplicate scripts–去除重复的脚本,不光是文件,甚至是同功能的函数
13、Configure ETags–配置实体标签
今天先讲讲比较容易做到的几点(实现难易程度不一样,注意先后次序):
YSlow第八条:这点我相信大家比较容易理解,而且很多都已经实施,就是将CSS和JS独立成相应的文件,使用link和script标签应用;
YSlow第三条:因为静态资源文件(CSS\JS\IMG统称静态资源文件)往往是变化不大的,那么可以在HTTP头中增加相应的过期时间,让浏览器缓存在本地,这样当第二次使用的时候,就不会下载全部内容,只是进行状态检查;
YSlow第四条:也很好理解,将静态内容压缩后,减少网络传输时间;因为IIS的压缩设置相对较烦,可以使用第三方工具,如IISxpress,支持32位和64位,而且还有一个技术交流版的授权;
做到以上三点,网页速度已经有比较明显的加速了,还有几点虽然略微麻烦,但是也是很好的加分手段:
YSlow第十条:最小化JS文件,我们写的JS往往包含空格、TAB等对JS执行没用影响的字符,但是这却实 实在在的增加了JS的体积,使用工具能够去除这些无用的字符,减少文件体积。但是同样带来的问题就是,JS不能有错误,另外压缩后的JS代码很难阅读,所 以如何在开发时和发布时协调好就是很大的问题,为了这点我们使用不同的文件引用,在开发时(DEBUG)使用未压缩版,在发布时(RELEASE)使用压 缩版,使用#if #else #endif引用不同的文件;
YSlow第九条:这点我在扩展阅读一里面详细阐述了,不重复码字了;(个人认为最重要一点)
YSlow第十三条:对于一般性网站来讲是鸡肋,所以纯粹为了加分,可看看扩展阅读二
先说这么多,我在准备一篇关于《YSlow评分标准分析》文章,会根据YSlow源代码仔细讲述它的评分依据。
扩展阅读:
昨天是一个大众点评网比较重要的版本更新,虽然之前很有信心,但是上线后还是使用YSlow评测了下,好消息,重构的页面都是95分+,绝大部分都是99分,A级,庆祝下!!!