正文我想介绍下自家利用Yslow的情势和一部分人家没涉及的小技巧,本文我想介绍下自己使用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:这一个是打印用的,部门开会、前端设计师啄磨、向主任反映时猜测用的上。

相关文章