Yslow评分:从F到A
YSlow 是安装在firefox上的一个页面评分插件,前端制作人员从中可以看到页面上有哪些不足,并且了解如何改进和优化。从而提高用户访问页面的速度。
那如何提升自己的Yslow评分呢?
下面是几个评分比较高的网站,我们来了解一下他们的架构:
- 雅虎 Yslow评分:A-96分
作为插件的开发者yahoo,并不诧异他们为何取得如此高的评分。
首先,他们使用了CDN(Content Delivery Network)技术,让用户可以就近取得所需的内容,解决网络拥挤的状况,提高用户访问网站的响应速度;其次,yahoo在ETags配置上也有独特之处,声明过期,就是说,用户从服务器取数据的时候,如果文件变化了,给他反馈新的文件,如果文件没有变化,只需告诉客户端没有变化即可,不必再把文件取回来,这样就节省了大量的网络带宽和资源。
另外,我曾经认为所有的JS脚本都要放到页面底部最后加载,参考雅虎的代码结构后才发现,并不完全是这样,只要将那些在加载过程中要执行的脚本放到底部,就可以实现最大的下载并行。 - 小说网 Yslow评分:A-93分
如果没有能力支付CDN的高昂费用,可以参考一下这个网站的代码结构。
(a) 从样式表着手,避免CSS表达式。CSS表达式需要很多资源,有时甚至会造成页面假死。
(b) 缓存一下不常修改的文件,并开启GZIP压缩,减少网络传输时间
(c) 减少DNS查找。YSlow认为一个页面上2个以内的域名比较合理。有些网站挂了不少统计代码,或者广告代码。统计拖累用户速度、广告影响用户视觉。
(d) 避免重定向(跳转),我们在给链接地址的时候,一般会把链接地址写成 http://xxx.cn/xxx 或者 http://xxx.cn/xxx/ ,有区别吗?有!服务器如果接收到的URL是http://xxx.cn/xxx,它会自动重定向到http://xxx.cn/xxx/,虽然进入的都是同一个页面,但是前者比后者多走了一步,重定向,显然多多少少浪费了一点时间。 - google Yslow评分:A-96分
多数人可能认为GOOGLE没什么值得借鉴的,毕竟整站就那么几行代码。
但是这几行代码,每天要承受过亿的用户访问量,在如此大的压力下,运行流畅,有很大一个因素取决于Minify JS。通过查看它的源代码可以发现,google不仅将JS进行了压缩,连页面代码中也没有不必要的空格和符号,使用了最短最简洁的变量名。联系到开发方面,建议大家采用yuicompressor,在调试时使用便于开发的模式,调试完成后直接压缩并发布。让用户得到最快捷的用户体验。

06/05/2009 at 21:17
Yahoo!的评分高,我想并不是因为这个插件是他们开发的,而是Yahoo!网页设计方面本身就相当出色!
另外,Yahoo!后面那个感叹号是不能够省略的,那是品牌名称的一部分!
回复
06/06/2009 at 15:12
我的站,用YSLOW(V2)也有88(拿不到CDN得分)
small site or blog才能达到96
呵呵八大仙人果然细心。。Y!
回复
06/07/2009 at 18:21
这个其实现在是很多网站的建站指标了,不过我的blog的那个主题的的得分还是太低了。
回复
06/11/2009 at 7:36
这个其实现在是很多网站的建站指标了,不过我的blog的那个主题的的得分还是太低了
回复
07/07/2009 at 13:40
firefox3.5不支持这个东东了。。。
回复
01/27/2010 at 23:00
前端性能对一个网站来说是一个重要指标,YSlow根据Yahoo!的14条原则为网站进行评分和提供优化建议,的确是不错的工具,我认为,要提高YSlow的分数,概括起来有3点:
1.避免请求:如合并CSS和JS,Sprites,Expires头,避免重定向等;
2.减小请求:如最小化CSS和JS,压缩图片等;
3.加速请求:如减少DNS查询和并行下载,CDN等。
在建站和优化的过程中,注重前端性能的优化,我想这样YSlow评分自然就会高的!
还有,LZ举的例子都很值得学习!不错的文章~~
回复