Yslow 有什么用?
- YSlow可以对网站的页面进行分析,并告诉你为了提高网站性能,如何基于某些规则而进行优化。
- YSlow可以分析任何网站,并为每一个规则产生一个整体报告,如果页面可以进行优化,则YSlow会列出具体的修改意见。
Yslow 支持chrome插件和firfox插件
- 注:用相应浏览器打开对应链接,即可直接安装
- Yslow目前(2016-07-18)只支持firfox 36版本以下的
Yslow真正的核心
Yslow的工作原理
- 以23条规则为依据,对前端页面进行分析,从而得出优化方案以及评级
以chrome浏览器为例介绍Yslow各功能项
- 打开想要测试的网址,进入Yslow,然后会有Yslow的一些简介:
- 点击 Run Test ,开始对当前网站进行分析,在Yslow主页面分为4个选项卡(firfox有5个多一个tools),分析完毕后默认进入Grade(评级)中:
- 如图,可以看出该网站评分为:C级;全部的检查点为23个其中分别:CONTENT | COOKIE | CSS |IMAGE | JAVASCRIPT | SERVER 各多少个。点击后能查看相应分类下的具体内容 每一个检查点都有对应评级,点开后,右侧为Yslow给出的优化建议
- Components(组件视图)选项卡,统计了六类分析项的大小、应用Gzip后的大小、接收与发送cookie的大小,点击放大镜可以查看请求头信息,url是地址,expires是缓存是否存在,以及过期时间。response time是该文件响应的时间,单位是毫秒ms。后面是否启用etag,Action,yslow给出的建议部分,可以进行怎样的优化操作。
- Statistics(统计视图)选项卡,左侧图表显示是页面元素在空缓存的加载情况,右侧为页面元素使用缓存后的页面加载情况。从图中可以直观的看出,这个网页47个HTTP请求,网页的大小达到744.6K,意味着打开一个无缓存页面需要下载750k的东西,而通过使用缓存后我们可以看到效果图片基本靠缓存,而网页的总大小压缩到73.4K。
- Statistics这个统计信息视图工具和Components(第三选项卡)一样,只是效果更直观,如果要获得性能优化建议还是要看Grade(第二选项卡)的详细建议
-
Yslow 规则集
- YSlow ( 2版) -这一规则集包含了所有23个测试的规则。
- classic( V1) -这个规则集包含原始13规则中使用了YSlow 1.0 。
- 小网站或博客-这个规则集包含15个规则,适用于小型网站或博客。参照下方的图片,看看哪一种规则,在这个规则集。
- 注:最后选定的规则集成为默认的规则集。默认规则集可以是一个预定义的三个之一或您自己创建的一个。要创建您自己的规则集,单击Rulesets下拉菜单旁边的 Edit 按钮。新的规则集屏幕将显示:
1、点击左侧 New Set 按钮,出现全部23条规则,勾选你所需的
2、点击 Save ruleset as... 保存,会弹出个命名窗口,命名就可以了。
3、你还可以对自定义的规则再次编辑或者删除。
2016-07-18
@ 雨天 --在公司