概述
YSlow是Yahoo发布的一款基于FireFox的插件,这个插件可以分析网站的页面,并告诉你为了提高网站性能,如何基于某些规则而进行优化。
YSLOW有什么作用?
YSlow可以对网站的页面进行分析,并告诉你为了提高网站性能,如何基于某些规则而进行优化。
YSlow可以分析任何网站,并为每一个规则产生一个整体报告,如果页面可以进行优化,则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必须打开firefox,安装Firebug,然后下载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的第五个选项卡
-
JSLint是一个强大的工具,它能够检验HTML代码以及内联的Javascript代码,经过JSLint发现了google analytics上的一个js错误。
-
ALL JS:查看你这个网页上一共引用了多少JS。
-
All JS Beautified:把全部JS放在打开的页面中,利用站长统一检查(我感受做用不大)。
-
All JS Minified:同上,但它显示的是压缩过的js代码,若是你要JS优化,它已经给你优化好了,来过来直接用。
-
All CSS:显示你网页全部CSS文件。
-
YUI CSS Compressor:显示网页压缩后的CSS文件,也是拿过来能够直接用的。
-
All Smush.it™:图片在线优化网站,点击它后会自动跳到smushit网站上给你自动优化CSS图片,该网站提供了优化前与优化后的对比,点击直接下载优化后的图片,在覆盖到本身网站上就能够了,强烈推荐。
-
Printable View:这个是打印用的,部门开会、前端设计师讨论、向老板汇报时估计用的上。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)