网站性能工具Yslow解析--yahoo

Yslow 有什么用？

• YSlow可以对网站的页面进行分析，并告诉你为了提高网站性能，如何基于某些规则而进行优化。
• YSlow可以分析任何网站，并为每一个规则产生一个整体报告，如果页面可以进行优化，则YSlow会列出具体的修改意见。

Yslow 支持chrome插件和firfox插件

chrome下载地址
firfox下载地址

• 注：用相应浏览器打开对应链接，即可直接安装
• Yslow目前(2016-07-18)只支持firfox 36版本以下的

Yslow真正的核心

• Yslow -23条规则

Yslow的工作原理

• 以23条规则为依据，对前端页面进行分析，从而得出优化方案以及评级

以chrome浏览器为例介绍Yslow各功能项

• 打开想要测试的网址，进入Yslow，然后会有Yslow的一些简介：

点击图标.png

• 点击 Run Test ，开始对当前网站进行分析，在Yslow主页面分为4个选项卡(firfox有5个多一个tools)，分析完毕后默认进入Grade（评级）中：

评级分析.png

• 如图，可以看出该网站评分为：C级；全部的检查点为23个其中分别：CONTENT | COOKIE | CSS |IMAGE | JAVASCRIPT | SERVER 各多少个。点击后能查看相应分类下的具体内容 每一个检查点都有对应评级，点开后，右侧为Yslow给出的优化建议
• Components（组件视图）选项卡，统计了六类分析项的大小、应用Gzip后的大小、接收与发送cookie的大小，点击放大镜可以查看请求头信息，url是地址，expires是缓存是否存在，以及过期时间。response time是该文件响应的时间，单位是毫秒ms。后面是否启用etag，Action，yslow给出的建议部分，可以进行怎样的优化操作。

components.png

• Statistics（统计视图）选项卡，左侧图表显示是页面元素在空缓存的加载情况，右侧为页面元素使用缓存后的页面加载情况。从图中可以直观的看出，这个网页47个HTTP请求，网页的大小达到744.6K，意味着打开一个无缓存页面需要下载750k的东西，而通过使用缓存后我们可以看到效果图片基本靠缓存，而网页的总大小压缩到73.4K。

Statistics.png

• Statistics这个统计信息视图工具和Components（第三选项卡）一样，只是效果更直观，如果要获得性能优化建议还是要看Grade（第二选项卡）的详细建议

• Yslow 规则集

规则集.png

• YSlow （ 2版） -这一规则集包含了所有23个测试的规则。

Yslow(2版).png

• classic（ V1） -这个规则集包含原始13规则中使用了YSlow 1.0 。

classic（ V1）.png

• 小网站或博客-这个规则集包含15个规则，适用于小型网站或博客。参照下方的图片，看看哪一种规则，在这个规则集。

small site or Blog.png

• 注：最后选定的规则集成为默认的规则集。默认规则集可以是一个预定义的三个之一或您自己创建的一个。要创建您自己的规则集，单击Rulesets下拉菜单旁边的 Edit 按钮。新的规则集屏幕将显示：
  1、点击左侧 New Set 按钮，出现全部23条规则，勾选你所需的
  2、点击 Save ruleset as... 保存，会弹出个命名窗口，命名就可以了。
  3、你还可以对自定义的规则再次编辑或者删除。

2016-07-18
@ 雨天 --在公司