这款插件还拉扯我分析了无数别样网站的代码,这款插件还帮带自己分析了累累任何网站的代码

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

Yslow是雅虎开发的依照网页性能分析浏览器插件,从年初本人动用了YSlow后,改变了博客模板大量冗余代码,不仅提升了网页的开辟速度,这款插件还帮助我分析了许多其他网站的代码,以前自己还特别写了增长网站速度的孤本,就是经过这款插件分析得出的。网络上早已有很多Yslow使用表达了,本文我想介绍下自家利用Yslow的章程和有些人家没提到的小技巧。

 

Yslow的装置形式

Yslow是雅虎开发的基于网页性能分析浏览器插件,从年头自己使用了YSlow后,改变了博客模板大量冗余代码,不仅荣升了网页的开拓速度,这款插件还帮带自己分析了重重任何网站的代码,往日我还特地写了增进网站速度的秘籍,就是通过这款插件分析得出的。网络上业已有许多Yslow使用验证了,本文我想介绍下自家利用Yslow的点子和一些人家没提到的小技巧。

今昔Yslow已经有那几个版本了,本文介绍的是3.0.4新式版,打开Yslow官网就能观望有六个版本可供选拔:火狐(firefox)浏览器、Google(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:这一个是打印用的,部门开会、前端设计师商讨、向总裁娘反映时估量用的上。