Yslow的安裝方法

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

安裝Yslow要先安裝 Firebug（本地址以火狐為例）,，兩種方法啟動Yslow：1,、打開Firebug窗口，選擇Yslow選項,。2,、直接點擊火狐右下角的Yslow啟動按鈕。

（圖1：Yslow的啟動界面）

點擊 Run Test 運行Yslow,，也可以點擊 Grade, Components, 或Statistics選項開始對頁面的分析,，如果在 Autorun YSlow each time a web page is loaded 上打上對勾，它將自動對以后打開頁面進行分,。

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

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

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

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

Grade(等級視圖)—Yslow的第二個選項卡

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

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

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

Components（組件視圖）—Yslow的第三個選項卡

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

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

所以，我得出的結論是：gravatar雖然增強了互動性和個性,，但也結結實實影響了網(wǎng)站速度,。

Statistics（統(tǒng)計信息視圖）—Yslow的第四個選項卡

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

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

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

Tools（輔助工具）—Yslow的第五個選項卡

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

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

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

All JS Beautified：把所有JS放在打開的頁面中，利用站長統(tǒng)一檢查（我感覺作用不大）,。

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

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

YUI CSS Compressor：顯示網(wǎng)頁壓縮后的CSS文件,，也是拿過來可以直接用的,。

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

Printable View：這個是打印用的,，部門開會,、前端設計師討論、向老板匯報時估計用的上,。