YSlow评分达到A级

我们知道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源代码仔细讲述它的评分依据。

 扩展阅读:

1、大众点评YSlow网页评分达到A级

2、利用ISAPI修改Http Header

 

昨天是一个大众点评网比较重要的版本更新,虽然之前很有信心,但是上线后还是使用YSlow评测了下,好消息,重构的页面都是95分+,绝大部分都是99分,A级,庆祝下!!!

posted @ 2008-11-07 11:59 工业酒精 阅读(27443) 评论(21) 编辑 收藏

 回复 引用 查看   
#1楼2008-11-07 11:37 | Sean Qu      

 回复 引用 查看   
#2楼2008-11-07 11:44 | 星光熠熠      
为了加快下载速度 丢了那一分,值!
关于多域名增加并发下载可以出个详细的测评文章了, 究竟多少个算是最优的解决方案?

 回复 引用   
#3楼2008-11-07 12:42 | sssvvvvvvvvv[未注册用户]
有什么意思呢.用户又不管你用了什么库,得了多少分
 回复 引用 查看   
#4楼2008-11-07 12:52 | Kevin-moon      
也希望楼主详细说明下"多域名增加并发下载"
 回复 引用 查看   
#5楼2008-11-07 12:54 | Jeffrey Zhao      
不错不错,厉害厉害
 回复 引用 查看   
#6楼2008-11-07 12:57 | Jeffrey Zhao      
“现在静态文件使用的是Squid服务器,接下来等存储设备部署完毕,准备使用Nginx,直接提供服务,听说性能会提高不少。”
你的意思是,Nginx直接作为Web服务器用于加载图片,而不是作为反向代理?你们图片用到负载均衡了吗?你们用的是什么负载均衡方案呀?

 回复 引用 查看   
#7楼[楼主]2008-11-07 13:58 | 工业酒精      
--引用--------------------------------------------------
sssvvvvvvvvv: 有什么意思呢.用户又不管你用了什么库,得了多少分
--------------------------------------------------------

这话我不同意。
用户是不用管我用了什么库,得多少分。但是如果性能很差,网站速度慢,就管用户的事情了。

产品设计的好坏牵涉到UE,网页性能同样牵涉到UE。


 回复 引用 查看   
#8楼[楼主]2008-11-07 13:58 | 工业酒精      
--引用--------------------------------------------------
Kevin-moon: 也希望楼主详细说明下"多域名增加并发下载"
--------------------------------------------------------

可以看看http://it.dianping.com/front_end_yslow_level_a.htm这个文章里面最后几段,算比较详细的解释


 回复 引用 查看   
#9楼[楼主]2008-11-07 14:01 | 工业酒精      
--引用--------------------------------------------------
Jeffrey Zhao: “现在静态文件使用的是Squid服务器,接下来等存储设备部署完毕,准备使用Nginx,直接提供服务,听说性能会提高不少。”
你的意思是,Nginx直接作为Web服务器用于加载图片,而不是作为反向代理?你们图片用到负载均衡了吗?你们用的是什么负载均衡方案呀?
--------------------------------------------------------


对我的意思是这样,当然这目前还是理论,还没有测试过,等存储好了,会先试验。

目前我们因为用了CDN,所以本站的压力不大,暂时没有用到负载均衡。

倒是Web用了负载均衡,是用设备做的,F5。

当然也有软件来实现。Nginx等等很多。


另外除了Squid以外还有一个高性能的缓存服务器,Varnish,看了其他站的测试报告,应该性能不错,但是CPU有些高。

 回复 引用   
#10楼2008-11-07 14:08 | vicqqq[未注册用户]
很不错~
 回复 引用   
#11楼2008-11-07 15:44 | wosoo[未注册用户]
楼主什么时候介绍一下点评网的架构??!!
 回复 引用 查看   
#12楼[楼主]2008-11-07 15:46 | 工业酒精      
--引用--------------------------------------------------
wosoo: 楼主什么时候介绍一下点评网的架构??!!
--------------------------------------------------------

构架还是比较复杂的,每部分要说清楚不容易。。。。。

而且毕竟构架就要牵涉出一些细节。。。。可能要PR部门审核下的。。

找机会,我来整理写一篇

 回复 引用 查看   
#13楼2008-11-07 17:03 | Flyingis      
好像感觉速度快了不少,页面打开比较干脆。
 回复 引用 查看   
#14楼2008-11-07 17:18 | airwolf2026      
问一个很白的问题:
YSlow第三条:因为静态资源文件(CSS\JS\IMG统称静态资源文件)往往是变化不大的,那么可以在HTTP头中增加相应的过期时间,让浏览器缓存在本地,这样当第二次使用的时候,就不会下载全部内容,只是进行状态检查;

----
这个好像如果直接在页面添加引用,是不能加过期时间的吧?比如<img src="xxx./demo.jpg">你的意思应该是程序输出的时候进行处理?

 回复 引用 查看   
#15楼[楼主]2008-11-07 18:04 | 工业酒精      
--引用--------------------------------------------------
airwolf2026: 问一个很白的问题:
YSlow第三条:因为静态资源文件(CSS"JS"IMG统称静态资源文件)往往是变化不大的,那么可以在HTTP头中增加相应的过期时间,让浏览器缓存在本地,这样当第二次使用的时候,就不会下载全部内容,只是进行状态检查;

----
这个好像如果直接在页面添加引用,是不能加过期时间的吧?比如&lt;img src=&quot;xxx./demo.jpg&quot;&gt;你的意思应该是程序输出的时候进行处理?
--------------------------------------------------------


加也是有办法加的,但是推荐的做法。

一种是:

不是要使用xxx/demo.jpg这样相对路径的引用方式。
启用一个新的域名,比如主域名是www.a.com,那就启用img.a.com。主机上开一个新站点,专门处理这些文件,在http头选项卡里面设置内容过期。

好处有2,一、以后分离方便;二、加快用户下载,具体看看http://it.dianping.com/front_end_yslow_level_a.htm这篇文章后面几段

二种是:
使用ISAPI,这样的就能根据后缀名添加过期头,并且还能满足YSlow第十三条,具体查看那这篇文章吧,http://www.alcoholwang.com/create_isapi_project_by_visual_studio_2008.htm

 回复 引用 查看   
#16楼2008-11-07 19:18 | airwolf2026      
非常感谢楼主解答.哈哈一直以来的疑惑解开了.以前只是经常听人家那么说而已哈.
另外一个就是我用直接引用的,通过firebug等查看.浏览器也没有去重新下载这些静态文件啊(响应代码302?先前已经访问过测试站点)

小建议:楼主要是能多分享类似这些的实际处理可能帮助更大.因为俺觉得很多像俺这样在小公司里面的,想接触这些的实际处理太难了,因为环境或者说项目还没有对性能要求那么高.平时也只能接触类似yslow等的理论.都不知道具体实现是如何.比如CDN网络,购买这样的服务贵不...

学习,Yslow评分提升
 回复 引用 查看   
#18楼[楼主]2008-11-07 21:12 | 工业酒精      
--引用--------------------------------------------------
airwolf2026: 非常感谢楼主解答.哈哈一直以来的疑惑解开了.以前只是经常听人家那么说而已哈.
    另外一个就是我用直接引用的,通过firebug等查看.浏览器也没有去重新下载这些静态文件啊(响应代码302?先前已经访问过测试站点)

    小建议:楼主要是能多分享类似这些的实际处理可能帮助更大.因为俺觉得很多像俺这样在小公司里面的,想接触这些的实际处理太难了,因为环境或者说项目还没有对性能要求那么高.平时也只能接触类似yslow等的理论.都不知道具体实现是如何.比如CDN网络,购买这样的服务贵不...
--------------------------------------------------------

302?这个代码是表示文件没有找到啊。

能不能具体说说你的实例???


因为工作比较忙,写文章也是只能抽时间写,昨天那天也是在上线好以后抽时间写的。

以后多关注我们的blog吧,http://it.dianping.com

 回复 引用   
#19楼2008-11-08 16:36 | 伶卡菲尔猪[未注册用户]
博文很符合mikuer的调调,我能把它转到www.mikuer.com去吗?挣点积分,换购物劵。谢谢博主的大作!



 回复 引用 查看   
#20楼2008-11-10 17:21 | shawnliu      
压缩得看吧 很好cpu的说
etags的确对load balance机器不大方便
不过前端优化嘛 得看吧

 回复 引用   
#21楼2009-07-28 14:14 | haoerhui.com[未注册用户]
学习