Yslow使用方法

大家好，我是讯享网，很高兴认识大家。

概述

YSlow是Yahoo发布的一款基于FireFox的插件，这个插件可以分析网站的页面，并告诉你为了提高网站性能，如何基于某些规则而进行优化。

YSLOW有什么作用？

YSlow是如何工作的？

YSlow分三个阶段来产生结果：

YSlow抓取DOM来查找页面中的所有组件（图像，脚本，样式表等）。在抓取DOM之后，YSlow通过Firebug的Net Panel组件循环并将其添加到已经在DOM中找到的组件列表
YSlow获取有关每个组件的信息：大小，是否为gzipped，Expires头等。如果可用，YSlow从Firebug的Net Panel获取此信息。如果组件信息在Net Panel中不可用（例如，该组件是从缓存中读取的，或者它有一个304响应），则YSlow会生成一个XMLHttpRequest来获取该组件并跟踪其标头和其他必要的信息。
YSlow获取关于该页面的所有数据，并为每个规则生成一个等级，从而生成总体等级。

安装

YSLOW使用

点击YSlow按钮，启动插件，点击Run Test 测试当前页面。在新弹出的界面中按照重要性显示了影响此页面效率的元素，其中A类评分为最高，F为最低。

Grade(等级视图)—Yslow的第二个选项卡

举例：
在这里插入图片描述
讯享网

Yslow给出的网站性能评分，从F~A，A是最好的，经过测试卢松松博客来看，网站有4处得分最低，例如图2中的最低分提示：我博客的HTTP请求太多。其中应用了14个外部JS、3个CSS文件（以前我已从6个合并为3个）、14个CSS背景图片。

Yslow的建议是让我合并这些，至于合并CSS引用图片我在“提升网站打开速度的7大秘籍”中介绍过。

Components（组件视图）—Yslow的第三个选项卡

在这里插入图片描述

经过Components考验查看网页各个元素占用的空间大小，例如我博客某个页面，有236个images（图片），占用了489.2K，经过详细查看，发现来自gravatar（评论头像）的引用图片很是大，在加上我博客本省评论量就打，每一个头像就占用几K，几百个就占用了整个网页50%的大小，并且图片仍是引用的，加载就更慢。

因此，我得出的结论是：gravatar虽然加强了互动性和个性，但也结结实实影响了网站速度。

Statistics（统计信息视图）—Yslow的第四个选项卡

在这里插入图片描述
左侧图表显示是页面元素在空缓存的加载状况，右侧为页面元素使用缓存后的页面加载状况。从图中能够直观的看出（尤为是我标的红框），这个网页263个HTTP请求，网页的大小达到773.9K，意味着打开没打开一个页面几乎须要下载1M的东西，而经过使用缓存后咱们能够看到效果图片基本靠缓存，而网页的总大小压缩到43.2K。

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

Tools（辅助工具）—Yslow的第五个选项卡