網站性能工具Yslow的使用方法

Yslow是雅虎開發的基於網頁性能分析瀏覽器插件，從年初我使用了YSlow後，改變了博客模板大量冗餘代碼，不只提高了網頁的打開速度，這款插件還幫助我分析了很多其餘網站的代碼，以前我還特地寫了提升網站速度的祕籍，就是經過這款插件分析得出的。網絡上已經有很多Yslow使用說明了，本文我想介紹下我使用Yslow的方法和一些別人沒提到的小技巧。

Yslow的安裝方法

如今Yslow已經有不少版本了，本文介紹的是3.0.4最新版，打開Yslow官網就能看到有四個版本可供選擇：火狐（firefox）瀏覽器、谷歌（chrome）瀏覽器、歐朋（opera）瀏覽器和移動版。

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

（圖1：Yslow的啓動界面）

點擊 Run Test 運行Yslow，也能夠點擊 Grade, Components, 或Statistics選項開始對頁面的分析，若是在 Autorun YSlow each time a web page is loaded 上打上對勾，它將自動對之後打開頁面進行分。

注意圖中的紅框，這裏是規則集，YSlow （V2）包含了全部22個測試的規則，YSlow （V1）包含原始13規則，小網站或博客-這個規則集包含14個規則，適用於小型網站或博客，建議對號入座。

雅虎評估網站性能的23條軍規

雅虎曾經針對網站速度提出了很是著名34條準則：《Best Practices for Speeding Up Your Web Site》。而如今將34條精簡爲更加直觀的23條，並針對每一條給出從F~A的評分以及最終的總分。

而如今23條網站性能優化建議在YSlow的官網首頁就能看到，固然也能夠不看，在使用Yslow後，在控制面板裏就會給你評分提示，和改進建議。

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

（圖2：Yslow給出的網站性能評分）

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

Yslow的建議是讓我合併這些，至於合併CSS引用圖片我在「提升網站打開速度的7大祕籍」中介紹過。

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

（圖3：經過Components考驗查看網頁各個元素佔用的空間大小）

經過Components考驗查看網頁各個元素佔用的空間大小，例如我博客某個頁面，有236個images（圖片），佔用了489.2K，經過詳細查看，發現來自gravatar（評論頭像）的引用圖片很是大，在加上我博客本省評論量就打，每一個頭像就佔用幾K，幾百個就佔用了整個網頁50%的大小，並且圖片仍是引用的，加載就更慢。

因此，我得出的結論是：gravatar雖然加強了互動性和個性，但也結結實實影響了網站速度。

Statistics（統計信息視圖）—Yslow的第四個選項卡

（圖4：Yslow的統計信息視圖）

左側圖表顯示是頁面元素在空緩存的加載狀況，右側爲頁面元素使用緩存後的頁面加載狀況。從圖中能夠直觀的看出（尤爲是我標的紅框），這個網頁263個HTTP請求，網頁的大小達到773.9K，意味着打開沒打開一個頁面幾乎須要下載1M的東西，而經過使用緩存後咱們能夠看到效果圖片基本靠緩存，而網頁的總大小壓縮到43.2K。

Statistics這個統計信息視圖工具和Components（第三選項卡）同樣，只是效果更直觀，若是要得到性能優化建議仍是要看Grade（第二選項卡）的詳細建議。

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

（圖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：這個是打印用的，部門開會、前端設計師討論、向老闆彙報時估計用的上。