YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Tools » YSlow – 前端性能分析和优化的利器

YSlow – 前端性能分析和优化的利器

YSlow(为什么慢?) 是 YAHOO 开发的一款分析网页前端性能的浏览器插件,我非常喜欢一个开发插件,相信也是很多从事前端开发的朋友必备的一款插件了。不过对于刚接触前端开发的朋友来说,可能还不太熟悉,本文就详细的介绍一下 YSlow。(本文以 Firefox 浏览器为例讲解)

YSlow 的安装和启动

安装 YSlow 要先安装 Firebug,然后到 YSlow 官网 下载 Firefox 版本的 YSlow(目前 YSlow 有四个版本可供选择:火狐(Firefox)浏览器、谷歌(Chrome)浏览器、欧朋(Opera)浏览器和移动版)。

下载安装完成后会需要你重新启动 Firefox 浏览器,之后就会在状态栏上显示 YSlow 的图标了,如下图:

YSlow 安装成功

(图1:YSlow 安装成功)

单击图标启动 YSlow,第一次你会看到如下界面:

YSlow 第一次的启动界面

(图2:YSlow 第一次的启动界面)

YSlow 中选择合适的性能分析规则集

图2中的红框是规则集,测试前端性能时根据自己的需求选择:

  • YSlow(V2) 包含了所有 23 条规则,针对大型站点,进行全面的性能分析;
  • Classic(V1) 包含起初经典的 13 条规则(参考:Steve Souders 的 《High Performance Web Sites 14 Rules for Faster Page》),针对大型网站的,只是当时 Steve Souders 的研究还没有现在V2这么完善;
  • Small site or Blog 这个规则集包含 15 个规则,适用于小型网站或博客;

YSlow 的测试规则是很灵活的,除了默认的3条规则集选项外,你还可以根据自己的需要点击“Edit”按钮,编辑自己的自定义规则集,如下图:

YSlow 中编辑自定义的规则集

(图3:YSlow 中编辑自定义的规则集)

根据自己的需要勾选需要分析的规则,然后点击“Save ruleset as…”按钮,保存自定义的规则:

YSlow 中保存自定义的规则集

(图4:YSlow 中保存自定义的规则集)

选择好规则后,就可以点击“ Run Test ”按钮,进入 Grade 标签界面,查看前端性能的分析结果了。要说明的是,YSlow 默认是不自动分析所打开的页面的,需要勾选“ Autorun YSlow each time a web page is loaded ” 选项,这样当你下次点击 YSlow 图标的时候,就直接会根据你选择的规则集分析所打开的页面的前端性能了。

YSlow 的 Grade 等级视图

进入 Grade 分析结果页面,你会看到如下的界面(本站首页 V2 规则集的分析结果):

YSlow 的 Grade 等级视图

(图5:YSlow 的 Grade 等级视图)

雅虎的前端工程师们曾经针对网站速度提出了非常著名34条准则:《Best Practices for Speeding Up Your Web Site》。而现在将34条精简为更加直观的23条,并针对每一条给出从F~A的评分以及最终的总分。我这里还是再次给出完整的23调规则:

  1. Minimize HTTP Requests
  2. Use a Content Delivery Network
  3. Avoid empty src or href
  4. Add an Expires or a Cache-Control Header
  5. Gzip Components
  6. Put StyleSheets at the Top
  7. Put Scripts at the Bottom
  8. Avoid CSS Expressions
  9. Make JavaScript and CSS External
  10. Reduce DNS Lookups
  11. Minify JavaScript and CSS
  12. Avoid Redirects
  13. Remove Duplicate Scripts
  14. Configure ETags
  15. Make AJAX Cacheable
  16. Use GET for AJAX Requests
  17. Reduce the Number of DOM Elements
  18. No 404s
  19. Reduce Cookie Size
  20. Use Cookie-Free Domains for Components
  21. Avoid Filters
  22. Do Not Scale Images in HTML
  23. Make favicon.ico Small and Cacheable

YSlow 给出的网站性能评分,从 F~A,A 是最好的,通过测试我的博客来看,82分,已经不错了。只有关于后端的处理打分比较低:

  • Use a Content Delivery Network (CDN) – F:我这种小站的服务器是不可能有CND支持的,目前我也支付不起这份费用;
  • Add Expires headers – F:服务器的缓存,目前我的空间不支持用户自定义设置缓存
  • Compress components with gzip – D:服务器端gzip压缩文件,我的文件都是用的Autoptimize 插件的 Minify 算法压缩的,服务器不提供gzip压缩。
  • Configure entity tags (ETags) – F:服务器端清除ETags,也是无能为力;

点击到评分不高的标签,YSlow 还会给出处理的建议:

YSlow (针对 CND )的优化建议

(图6:YSlow (针对 CND )的优化建议)

如果你的网站分析的结果有没有达到 B,都应该点击相应的评分标签看看 YSlow 给出的优化建议,当然基本上我的博客里的4点评分比较低的地方,一般的虚拟空间服务的朋友都会碰到,我们也没有什么更高的解决方案,很无耐!

Yslow 的 Components 组件视图

Yslow 的 Components 组件视图

(图7:Yslow 的 Components 组件视图)

通过 Components 视图会以表格的显示显示网页总的 HTTP 请求数量,页面体积以及各个元素占用的流量的大小。图表的数据是死的,关键需要我们自己分析图标数据反映出来的问题,然后针对 YSlow 的规则建议去优化相关的性能,解决存在的问题。

例如上图,我的博客中JavaScript 文件和 CSS 的背景图片占的整个网站的流量比较大,我就要想办法用 YUI 的 Compressor 去压缩JS文件体积,使用 CSS Sprites 技巧合并图片还有利用 Smush.it 等工具压缩背景的体积。稍后介绍 Tools 界面的时候,我会继续介绍一些前端代码的压缩工具和图片压缩工具的。

YSlow 的 Statistics 饼状统计信息视图

YSlow 的 Statistics 饼状统计信息视图

(图8:YSlow 的 Statistics 饼状统计信息视图)

YSlow 除了提供 Components 的表格分析统计图外,另外还提供了 Statistics 饼状视图供我们分析性能数据。这种视图更加直观,反映出各种元素在页面中所占的流量比例。并且提供了页面在无缓存和有缓存情况下的流量请求对比。比如上图,我的首页在有缓存的时候用户只需要请求 73.2K 的html页面就可以了。这也是下载的规则中为什要求:Add Expires headers 添加缓存的原因。

另外 Statistics 视图也是我们做前端性能分析报表的一个好工具,我都是直接用这个里饼图做我的性能分析报表的饼图的。

YSlow 的 Tools 辅助工具

YSlow 的 Tools 辅助工具

(图9:YSlow 的 Tools 辅助工具)

YSlow 不光只为我们分析前端性能,而且还提供了几款使用的辅助工具:

  • JSLint Douglas Crockford 用 JavaScript 开发的 JavaScript 代码质量分析工具。很好,很强大,也很打击人!
  • All JS:显示页面中所有的 JavaScript 代码的路径和具体的代码。
  • All JS Beautified:格式化所有的 JavaScript 代码,让你分析阅读其他网站的 JavaScript 代码更加方便。
  • All JS Minified:用 Minify 算法压缩所有的JavaScript 代码。
  • All CSS显示页面中所有的 CSS 文件的路径和具体的代码。
  • YUI CSS Compressor: YAHOO 代码的 CSS 压缩工具,压缩的比例还是跟高的。如果再 gzip 一下,那就十分的到位了。
  • All Smush.it™ 可以通过这个在线工具无损坏的压缩网站页面上的所有有图片,并且提供打包下载。只是原来的非 JPG 格式的图片都会压缩成 PNG 格式的图片。
  • Printable View:可以通过它打印出Grade、Components 和 Statistics 的分析报表。

关于 YSlow 这款前端性能分析工具到这里就介绍完毕,还是之前说的,工具和报表都只能起到辅助的作用,最终解决问题还是需要大家真正的掌握相关的性能分析的方法,发现问题,解决问题。

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:YSlow – 前端性能分析和优化的利器

« »

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)