Yslow是雅虎開發的基于網頁性能分析浏覽器插件，從年初我使用了YSlow後，改變了部落格模闆大量備援代碼，不僅提升了網頁的打開速度，這款插件還幫助我分析了不少其他網站的代碼網絡上已經有不少Yslow使用說明了，本文我想介紹下我使用Yslow的方法和一些别人沒提到的小技巧。（引用 http://lusongsong.com/reed/362.html ）
Yslow的安裝方法
現在Yslow已經有很多版本了，本文介紹的是3.0.4最新版，打開Yslow官網就能看到有四個版本可供選擇：火狐（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 上打上對勾，它将自動對以後打開頁面進行分。
注意圖中的紅框，這裡是規則集，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：這個是列印用的，部門開會、前端設計師讨論、向老闆彙報時估計用的上。
轉載于:https://www.cnblogs.com/wwqy/archive/2012/08/28/2660603.html