1、Yslow簡單介紹

Yslow是雅虎開發的基於網頁效能分析瀏覽器外掛，可列出以及網頁速度慢的原因，根據高效能網站的規則對網站的效能優化給出合理的建議。

2、Yslow的安裝方法

此次介紹的是基於火狐瀏覽器（Firefox 36以下的版本）yslow3.1.8版，開啟Yslow官網（http://yslow.org/）就能看到有四個版本可供選擇：火狐（firefox）瀏覽器、谷歌（chrome）瀏覽器、歐朋（opera）瀏覽器和移動版。

但是目前通過Yslow官網點選下載都會提示無法開啟網頁，可通過此連結進行下載安裝使用：http://www.downyi.com/downinfo/36068.html

安裝Yslow要先安裝 Firebug，兩種方法啟動Yslow：

（1）開啟Firebug視窗，選擇Yslow選項。

（2）直接點選火狐右下角的Yslow啟動按鈕。

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

圖中紅框顯示的是規則集，YSlow（V2）包含了所有22個測試的規則，YSlow（V1）包含原始13規則，小網站或部落格-這個規則集包含14個規則，適用於小型網站或部落格，建議對號入座。

3、雅虎評估網站效能的23條軍規

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

而現在23條網站效能優化建議在YSlow的官網首頁就能看到，也可以在使用Yslow後，在控制面板裡就會給你評分提示，和改進建議。

4、具體分析

（1）Grade(等級檢視)—Yslow的第二個選項卡

Yslow給出的網站效能評分，從F~A，A是最好的，通過測試這個H5來看，網站有2處得分最低，上圖中的最低分提示：分發網路等級最低。Yslow會根據評分等級給出的都是最優建議

Yslow的建議是由於使用者與web伺服器的接近程度影響響應時間。跨多個地理位置分散的伺服器部署內容有助於使用者感知頁面載入速度加快。

檢視等級為B的HTTP請求的分析

通過分析可知：這個頁面有7個外部Javascript指令碼。試著把它們組合成一個。

Yslow的建議是：減少頁面上的元件數量可以減少呈現頁面所需的HTTP請求數量，從而加快頁面載入速度。減少元件數量的一些方法包括:組合檔案，將多個指令碼組合成一個指令碼，將多個CSS檔案組合成一個樣式表，並使用CSS Sprites和影象對映。

我們還可以開啟百度的網址進行分析。

從圖中可看出：其中應用了10個外部JS、6個CSS檔案、7個CSS背景圖片。最後給出的建議也是合併這些以達到優化的效果。

通過上面我們可看出此工具給出的優化建議都是合併JS、CSS指令碼等等，所以我們可以得出網站頁面上的元件過多會影響網頁的載入，根據此詳細的分析就可以針對性的對其進行優化。

（2）Components（元件檢視）—Yslow的第三個選項卡

通過Components考驗檢視網頁各個元素佔用的空間大小，例如這個H5頁面，有3個images（圖片），佔用了212.6K，有6個js佔用了3436.2K，此項佔用比較大。優化項就很明瞭了，就可以對js進行壓縮處理，從而提高網頁載入速度。

（3）Statistics（統計資訊檢視）—Yslow的第四個選項卡

左側圖表顯示是頁面元素在空快取的載入情況，右側為頁面元素使用快取後的頁面載入情況。從圖中可以直觀的看出（尤其是我標的紅框），這個H5有11個HTTP請求，網頁的大小達到1364.2K，意味著開啟沒開啟一個頁面幾乎需要下載1.4M的東西，而通過使用快取後我們可以看到效果圖片基本靠快取，而網頁的總大小壓縮到4.6K。

Statistics這個統計資訊檢視工具和Components（第三選項卡）一樣，只是效果更直觀，如果要獲得性能優化建議還是要看Grade（第二選項卡）的詳細建議。

（4）Tools（輔助工具）—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：這個是列印用的，部門開會、前端設計師討論、彙報時使用。

5、總結：一般是會有7個方面會影響到前端的效能

（1）Javascript和CSS檔案

如果這些檔案很大瀏覽器會下載很長時間。

（2）HTTP請求

每個網站都會有許多HTTP請求，但瀏覽器只有20%的時間用來載入內容，80%的時間獲取外部元件，包括指令碼、樣式表、影象等。由於只有2個HTTP請求可以在同一時間傳送，所以請求一旦過多就會造成延遲。

（3）快取圖片、CSS和Javascript

使用者訪問網站時，圖片、CSS和Javascript會在其瀏覽器快取

（4）CSS引用圖片

網站的圖片都是切成小塊的，這樣下來就會有大量CSS引用圖片

（5）網頁載入全部JS檔案

由於網站的元件複雜，而這些載入都會耗費時間，沒有按照元件的重要性進行先後排序載入，最後給使用者感受就是，頁面載入比較慢。

（6）影象未進行合理的壓縮

為了讓顯示效果更好，圖片過大，圖片大小與質量之間未做好平衡

（7）未開啟gzip模組

gzip壓縮是一種資料壓縮格式，一般網站啟用gzip後，壓縮率都會有70%-80%的提升，但開啟gzip會加重伺服器負擔，而且要修改伺服器配置。