网站性能工具Yslow的运用办法,网站性能工具Yslow的运用模式

http://lusongsong.com/reed/362.html

爱博体育,Yslow是雅虎开发的按照网页性能分析浏览器插件,从年头自家利用了YSlow后,改变了博客模板大量冗余代码,不仅进步了网页的打开速度,这款插件还帮助我分析了众多别样网站的代码,在此以前自己还特别写了增进网站速度的孤本,就是经过这款插件分析得出的。网络上业已有不少Yslow使用验证了,本文我想介绍下我动用Yslow的法门和一些别人没涉及的小技巧。

 

Yslow的设置情势

Yslow是雅虎开发的基于网页性能分析浏览器插件,从年底自己利用了YSlow后,改变了博客模板大量冗余代码,不仅提高了网页的打开速度,这款插件还帮带我分析了很多其他网站的代码,以前自己还专程写了加强网站速度的秘籍,就是经过这款插件分析得出的。网络上已经有广大Yslow使用验证了,本文我想介绍下我动用Yslow的方法和局部别人没涉及的小技巧。

当今Yslow已经有成千上万本子了,本文介绍的是3.0.4潮流版,打开Yslow官网就能观看有多少个版本可供采用:火狐(firefox)浏览器、谷歌(chrome)浏览器、欧朋(opera)浏览器和移动版。

Yslow的安装情势

安装Yslow要先安装
Firebug
(本地址以火狐为例),二种方法启动Yslow:1、打开Firebug窗口,采用Yslow选项。2、直接点击火狐右下角的Yslow启动按钮。

前日Yslow已经有成千上万版本了,本文介绍的是3.0.4新星版,打开Yslow官网就能收看有五个本子可供采用:火狐(firefox)浏览器、Google(chrome)浏览器、欧朋(opera)浏览器和移动版。

爱博体育 1

安装Yslow要先安装
Firebug
(本地址以火狐为例),两种方法启动Yslow:1、打开Firebug窗口,选取Yslow选项。2、直接点击火狐右下角的Yslow启动按钮。

(图1:Yslow的启航界面)

爱博体育 2

点击 Run Test 运行Yslow,也可以点击 Grade, Components,
或Statistics选项起首对页面的解析,假如在 Autorun YSlow each time a web
page is loaded 上打上对勾,它将自行对今后打开页面举办分。

(图1:Yslow的启动界面)

瞩目图中的红框,这里是规则集,YSlow
(V2)包含了具有22个测试的规则,YSlow
(V1)包含原始13平整,小网站或博客-这几个规则集带有14个规则,适用于小型网站或博客,指出对号落座。

点 击 Run Test 运行Yslow,也可以点击 Grade, Components,
或Statistics选项开端对页面的剖析,假使在 Autorun YSlow each time a web
page is loaded 上打上对勾,它将自行对今后打开页面举办分。

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

留神图中的红框,这里是规则集,YSlow
(V2)包含了拥有22个测试的规则,YSlow
(V1)包含原始13平整,小网站或博客-这些规则集带有14个规则,适用于小型网站或博客,指出对号落座。

雅虎曾经针对网站速度指出了充足有名34条轨道:《Best Practices for
Speeding Up Your Web
Site》。而明日将34条精简为进一步直观的23条,并针对每一条给出从F~A的评分以及最后的总分。

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

而最近23条网站性能优化指出在YSlow的官网首页就能看出,当然也得以不看,在接纳Yslow后,在控制面板里就会给你评分提醒,和改进提出。

雅虎曾经针对网站速度指出了丰硕著名34条规则:《Best Practices for
Speeding Up Your Web
Site》。而现行将34条精简为越来越直观的23条,并针对每一条给出从F~A的评分以及最后的总分。

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

而近年来23条网站性能优化提出在YSlow的官网首页就能见到,当然也足以不看,在动用Yslow后,在控制面板里就会给您评分提醒,和立异提议。

爱博体育 3

(图2:Yslow给出的网站性能评分)

Yslow给出的网站性能评分,从F~A,A是最好的,通过测试卢松松博客来看,网站有4处得分低于,例如图2中的最低分指示:我博客的HTTP请求太多。其中使用了14个外表JS、3个CSS文件(在此以前我已从6个联合为3个)、14个CSS背景图片。

Yslow的提议是让我联合这么些,至于合并CSS引用图片我在“提高网站打开速度的7大秘籍”中牵线过。

Components(组件视图)—Yslow的第四个选项卡

爱博体育 4

(图3:通过Components考验查看网页各类要素占用的上空尺寸)

透过Components考验查看网页各样要素占用的上空尺寸,例如我博客某个页面,有236个images(图片),占用了489.2K,通过详细查看,发现来自gravatar(评论头像)的引用图片至极大,在添加我博客本省评论量就打,每个头像就占有几K,几百个就占据了全套网页50%的尺寸,而且图片依然引用的,加载就更慢。

故而,我得出的下结论是:gravatar即便提高了互动性和个性,但也结结实实影响了网站速度。

Statistics(总计音信视图)—Yslow的第两个选项卡

爱博体育 5

(图4:Yslow的总括信息视图)

左边图表显示是页面元素在空缓存的加载境况,左边为页面元素拔取缓存后的页面加载意况。从图中得以直观的收看(尤其是我标的红框),这么些网页263个HTTP请求,网页的轻重达到773.9K,意味着打开没打开一个页面几乎需要下载1M的事物,而通过行使缓存后大家得以看出功能图片主题靠缓存,而网页的总大小压缩到43.2K。

Statistics这些总计信息视图工具和Components(第三选项卡)一样,只是效果更直观,如若要赢得属性优化提议仍旧要看Grade(第二选项卡)的详尽提议。

Tools(襄助工具)—Yslow的第多少个选项卡

爱博体育 6

(图5: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:这些是打印用的,部门开会、前端设计师商讨、向业主反映时揣摸用的上。

相关文章