yslow安装及使用方法（附火狐firefox、谷歌chrome）

Yslow 是雅虎开发的一款基于网页性能分析的浏览器插件。年初使用YSlow后，我在博客模板中改了很多冗余代码，不仅提高了网页的打开速度，还帮助我分析了其他网站的Less代码，我还特地之前写过提高网站速度的秘籍，是通过对这个插件的分析得到的。网上已经有很多Yslow的说明。在这篇文章中，我想介绍一下我使用 Yslow 的方法以及一些其他人没有提到的技巧。

如何安装 Yslow

现在有很多版本的 Yslow。本文介绍最新版本的3.0.4。打开Yslow官网，你会看到有四个版本可供选择：()浏览器、 、Opera和。

要安装Yslow，必须先安装（此地址以为例）。启动 Yslow 有两种方法： 1、打开窗口并选择 Yslow 选项。 2、直接点击右下角的Yslow启动按钮。

（图一：Yslow的启动界面）

单击运行测试以运行 Yslow。您还可以单击成绩、 或选项开始分析页面。如果您在每次网页时勾选 YSlow，它将自动对您稍后打开的页面进行评分。

注意图中红框，这里是规则集，YSlow(V2）包含所有22条测试的规则，YSlow(V1）包含原来的13条规则，小网站或blog- 此规则集包含14条规则，适用于小型网站或博客，建议坐下。

雅虎评估网站性能的 23 条军事规则

Yahoo 曾经提出了非常有名的网站速度 34 条准则：“Best for Up Your Web Site”。现在，将34个项目简化为23个更直观的项目，并给出每个项目从F到A的分数和最终总分。

现在在YSlow官网首页可以看到23条网站性能优化建议，当然你也看不懂。使用 Yslow 后，您将在控制面板中获得评分提示和改进建议。

成绩——Yslow 的第二个标签

（图2：Yslow给出的网站性能评分）

Yslow给出的网站性能评分，从F~A，A是最好的。根据卢松松博客的测试，该网站在4个地方得分最低，如图2中的最低分。 Tips：我的博客的HTTP请求太多。应用了14个外部JS，3个CSS文件（我之前是从6个合并到3个），14个CSS背景图片。

Yslow 的建议是让我合并这些，因为我在“加快网站速度的 7 个秘诀”中介绍了合并 CSS 参考图像。

（组件视图）- Yslow 的第三个标签

（图3：通过测试查看网页各元素占用空间）

通过测试检查网页各个元素占用的空间。比如我博客的某个页面有236张（图片），占489.2K。通过详细检查，发现参考来自（评论头像） 图片很大。在我的博客添加评论量时，每个头像占用几个K，几百个占用整个网页大小的50％。而且还是引用了图片，所以加载更慢。

因此，我得出的结论是，虽然它增强了交互性和个性，但它对网站速度也有很大的影响。

( View) - Yslow 的第四个标签

（图 4：Yslow 的统计视图）

左图显示了页面元素在空缓存中的加载，右图显示了使用缓存后页面元素的加载。从图中（尤其是我标注的红框）可以直观的看出，这个网页有263个HTTP请求，网页大小达到了773.9K，也就是说差不多需要下载了1M的东西打开一个页面而不打开它。使用缓存后，我们可以看到效果图基本被缓存了，网页总大小被压缩到43.2K。

这个统计查看工具和（第三个选项卡）一样，但是效果更直观。如果你想获得性能优化建议，还需要看Grade（第二个tab）的详细建议。

工具 - Yslow 的第五个标签

（图 5：Yslow 提供的小工具）

是一个强大的工具，可以检查 HTML 代码以及内联代码，通过查找 js 错误。

所有 JS：查看您的页面上引用了多少 JS。

All JS：把所有的JS放在打开的页面里，用站长统一查看（我觉得效果不大）。

All JS：同上，但显示的是压缩后的js代码。如果你想要JS优化，已经为你优化好了，快来直接使用吧。

所有 CSS：显示您网页的所有 CSS 文件。

YUI CSS：显示网页压缩后的CSS文件，也可以直接使用。

All Smush.it™：图片在线优化网站，点击它会自动跳转到网站为你自动优化CSS图片，网站提供优化前后对比，点击直接下载优化后的图片，它可以在您自己的网站上进行介绍，强烈推荐。

查看：这是用于打印的。估计用于部门会议，前端设计师讨论，汇报给老板。

郑重声明：本文版权归原作者所有，转载文章仅出于传播更多信息之目的。如果作者信息标注有误，请尽快联系我们修改或删除，谢谢。