使用Yslow的方法和一些別人沒(méi)提到的小技巧

Yslow是雅虎開(kāi)發(fā)的基于網(wǎng)頁(yè)性能分析瀏覽器插件，從年初我使用了YSlow后，改變了博客模板大量冗余代碼，不僅提升了網(wǎng)頁(yè)的打開(kāi)速度，這款插 件還幫助我分析了不少其他網(wǎng)站的代碼，之前我還特意寫(xiě)了提高網(wǎng)站速度的秘籍，就是通過(guò)這款插件分析得出的。網(wǎng)絡(luò)上已經(jīng)有不少Yslow使用說(shuō)明了，本文我 想介紹下我使用Yslow的方法和一些別人沒(méi)提到的小技巧。

Yslow的安裝方法

現(xiàn)在Yslow已經(jīng)有很多版本了，本文介紹的是3.0.4最新版，打開(kāi)Yslow官網(wǎng)就能看到有四個(gè)版本可供選擇：火狐（firefox）瀏覽器、谷歌（chrome）瀏覽器、歐朋（opera）瀏覽器和移動(dòng)版。

安裝Yslow要先安裝 Firebug（本地址以火狐為例），兩種方法啟動(dòng)Yslow：1、打開(kāi)Firebug窗口，選擇Yslow選項(xiàng)。2、直接點(diǎn)擊火狐右下角的Yslow啟動(dòng)按鈕。

（圖1：Yslow的啟動(dòng)界面）

點(diǎn)擊 Run Test 運(yùn)行Yslow，也可以點(diǎn)擊 Grade， Components， 或Statistics選項(xiàng)開(kāi)始對(duì)頁(yè)面的分析，如果在 Autorun YSlow each time a web page is loaded 上打上對(duì)勾，它將自動(dòng)對(duì)以后打開(kāi)頁(yè)面進(jìn)行分。

注意圖中的紅框，這里是規(guī)則集，YSlow （V2）包含了所有22個(gè)測(cè)試的規(guī)則，YSlow （V1）包含原始13規(guī)則，小網(wǎng)站或博客-這個(gè)規(guī)則集包含14個(gè)規(guī)則，適用于小型網(wǎng)站或博客，建議對(duì)號(hào)入座。

雅虎評(píng)估網(wǎng)站性能的23條軍規(guī)

雅虎曾經(jīng)針對(duì)網(wǎng)站速度提出了非常著名34條準(zhǔn)則：《Best Practices for Speeding Up Your Web Site》。而現(xiàn)在將34條精簡(jiǎn)為更加直觀的23條，并針對(duì)每一條給出從F~A的評(píng)分以及最終的總分。

而現(xiàn)在23條網(wǎng)站性能優(yōu)化建議在YSlow的官網(wǎng)首頁(yè)就能看到，當(dāng)然也可以不看，在使用Yslow后，在控制面板里就會(huì)給你評(píng)分提示，和改進(jìn)建議。

Grade（等級(jí)視圖）—Yslow的第二個(gè)選項(xiàng)卡

（圖2：Yslow給出的網(wǎng)站性能評(píng)分）

Yslow給出的網(wǎng)站性能評(píng)分，從F~A，A是最好的，通過(guò)測(cè)試盧松松博客來(lái)看，網(wǎng)站有4處得分最低，例如圖2中的最低分提示：我博客的HTTP請(qǐng)求太多。其中應(yīng)用了14個(gè)外部JS、3個(gè)CSS文件（之前我已從6個(gè)合并為3個(gè)）、14個(gè)CSS背景圖片。

Yslow的建議是讓我合并這些，至于合并CSS引用圖片我在“提高網(wǎng)站打開(kāi)速度的7大秘籍”中介紹過(guò)。

Components（組件視圖）—Yslow的第三個(gè)選項(xiàng)卡

（圖3：通過(guò)Components考驗(yàn)查看網(wǎng)頁(yè)各個(gè)元素占用的空間大小）

通過(guò)Components考驗(yàn)查看網(wǎng)頁(yè)各個(gè)元素占用的空間大小，例如我博客某個(gè)頁(yè)面，有236個(gè)images（圖片），占用了489.2K，通過(guò)詳 細(xì)查看，發(fā)現(xiàn)來(lái)自gravatar（評(píng)論頭像）的引用圖片非常大，在加上我博客本省評(píng)論量就打，每個(gè)頭像就占用幾K，幾百個(gè)就占用了整個(gè)網(wǎng)頁(yè)50%的大 小，而且圖片還是引用的，加載就更慢。

所以，我得出的結(jié)論是：gravatar雖然增強(qiáng)了互動(dòng)性和個(gè)性，但也結(jié)結(jié)實(shí)實(shí)影響了網(wǎng)站速度。

Statistics（統(tǒng)計(jì)信息視圖）—Yslow的第四個(gè)選項(xiàng)卡

（圖4：Yslow的統(tǒng)計(jì)信息視圖）

左側(cè)圖表顯示是頁(yè)面元素在空緩存的加載情況，右側(cè)為頁(yè)面元素使用緩存后的頁(yè)面加載情況。從圖中可以直觀的看出（尤其是我標(biāo)的紅框），這個(gè)網(wǎng)頁(yè)263 個(gè)HTTP請(qǐng)求，網(wǎng)頁(yè)的大小達(dá)到773.9K，意味著打開(kāi)沒(méi)打開(kāi)一個(gè)頁(yè)面幾乎需要下載1M的東西，而通過(guò)使用緩存后我們可以看到效果圖片基本靠緩存，而網(wǎng) 頁(yè)的總大小壓縮到43.2K。

Statistics這個(gè)統(tǒng)計(jì)信息視圖工具和Components（第三選項(xiàng)卡）一樣，只是效果更直觀，如果要獲得性能優(yōu)化建議還是要看Grade（第二選項(xiàng)卡）的詳細(xì)建議。

Tools（輔助工具）—Yslow的第五個(gè)選項(xiàng)卡

（圖5：Yslow提供的小工具）

JSLint是一個(gè)強(qiáng)大的工具，它可以檢驗(yàn)HTML代碼以及內(nèi)聯(lián)的Javascript代碼，通過(guò)JSLint發(fā)現(xiàn)了google analytics上的一個(gè)js錯(cuò)誤。

ALL JS：查看你這個(gè)網(wǎng)頁(yè)上一共引用了多少JS。

All JS Beautified：把所有JS放在打開(kāi)的頁(yè)面中，利用站長(zhǎng)統(tǒng)一檢查（我感覺(jué)作用不大）。

All JS Minified：同上，但它顯示的是壓縮過(guò)的js代碼，如果你要JS優(yōu)化，它已經(jīng)給你優(yōu)化好了，來(lái)過(guò)來(lái)直接用。

All CSS：顯示你網(wǎng)頁(yè)所有CSS文件。

YUI CSS Compressor：顯示網(wǎng)頁(yè)壓縮后的CSS文件，也是拿過(guò)來(lái)可以直接用的。

All Smush.it™：圖片在線優(yōu)化網(wǎng)站，點(diǎn)擊它后會(huì)自動(dòng)跳到smushit網(wǎng)站上給你自動(dòng)優(yōu)化CSS圖片，該網(wǎng)站提供了優(yōu)化前與優(yōu)化后的對(duì)比，點(diǎn)擊直接下載優(yōu)化后的圖片，在覆蓋到自己網(wǎng)站上就可以了，強(qiáng)烈推薦。

Printable View：這個(gè)是打印用的，部門開(kāi)會(huì)、前端設(shè)計(jì)師討論、向老板匯報(bào)時(shí)估計(jì)用的上。

服務(wù)器租用/服務(wù)器托管中國(guó)五強(qiáng)！虛擬主機(jī)域名注冊(cè)頂級(jí)提供商！15年品質(zhì)保障！--億恩科技[ENKJ.COM]