Yslow是雅虎开发的按照网页性能分析浏览器插件,这款插件还帮带自己分析了过多此外网站的代码

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:这么些是打印用的,部门开会、前端设计师琢磨、向业主反映时估量用的上。

相关文章