YSLOW（一款實用的網站性能檢測工具）

 概述

YSlow是Yahoo發佈的一款基於FireFox的插件，這個插件能夠分析網站的頁面，並告訴你爲了提升網站性能，如何基於某些規則而進行優化。

 

 安裝 

官網：http://yslow.org/  

官方下載，點擊安裝，Google在擴展程序中直接拖進也能夠，安裝成功後會在右上角顯示圖標

 

 YSLOW有什麼做用？

YSlow能夠對網站的頁面進行分析，並告訴你爲了提升網站性能，如何基於某些規則而進行優化。

YSlow能夠分析任何網站，併爲每個規則產生一個總體報告，若是頁面能夠進行優化，則YSlow會列出具體的修改意見。

 

YSlow是如何工做的？

YSlow分三個階段來產生結果：

1. YSlow抓取DOM來查找頁面中的全部組件（圖像，腳本，樣式表等）。在抓取DOM以後，YSlow經過Firebug的Net Panel組件循環並將其添加到已經在DOM中找到的組件列表
2. YSlow獲取有關每一個組件的信息：大小，是否爲gzipped，Expires頭等。若是可用，YSlow從Firebug的Net Panel獲取此信息。若是組件信息在Net Panel中不可用（例如，該組件是從緩存中讀取的，或者它有一個304響應），則YSlow會生成一個XMLHttpRequest來獲取該組件並跟蹤其標頭和其餘必要的信息。
3. YSlow獲取關於該頁面的全部數據，併爲每一個規則生成一個等級，從而生成整體等級。

YSLOW使用

點擊YSlow按鈕，啓動插件，點擊Run Test 測試當前頁面。在新彈出的界面中按照重要性顯示了影響此頁面效率的元素，其中A類評分爲最高，F爲最低。

Rulesets 能夠選擇不一樣的評分標準：建議對號入座

　　YSlow(V2) Ruleset：包含了全部22個測試的規則

　　Classic(V1) Ruleset：YSlow （V1）包含原始13規則

     Small Site or Blog Ruleset：小網站或博客規則集，包含14個規則，適用於小型網站或博客

如下爲等級的例子：

若是頁面與某一規則無關，則線束N/A，表示不適用。

點擊每一規則，都顯示改進建議。

 

 YSLOW組件介紹

Grade(等級視圖)—Yslow的第二個選項卡：Yslow給出的網站性能評分

Yslow給出的網站性能評分，從F~A，A是最好的

 

Components（組件視圖）—Yslow的第三個選項卡：經過Components考驗查看網頁各個元素佔用的空間大小

 

組件檢視表：

TYPE：該組件的類型。該網頁是由組成部分的下列類型： doc, js, css, flash, cssimage, image, redirect, favicon, xhr, and iframe.

SIZE(KB)：該組件的大小以千字節。

GZIP(KB)：該組件的gzip壓縮的大小以千字節。

COOKIE RECEIVED(bytes)：字節數在HTTP設置的Cookie響應頭。

COOKIE SENT(bytes)：節數的Cookie在HTTP請求報頭

HEADERS：HTTP信息頭，點擊放大鏡查看全面信息。

URL：連接地址

EXPIRES(Y/M/D)：日期的Expires頭，屬於緩存設置一種。

RESPONSE TIME (ms)：響應時間

ETAG：ETag響應頭，也是緩存設置的一種

ACTION：額外的性能分析

 

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

左側圖表顯示是頁面元素在空緩存的加載狀況，右側爲頁面元素使用緩存後的頁面加載狀況。

 從圖中能夠直觀的看出（標的紅框），這個網頁14個HTTP請求，網頁的大小達到443.4K

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

 

Web性能最佳實踐和規則

雅虎卓越績效團隊已經肯定了34個影響網頁性能的規則。YSlow的網頁分析是基於這34個可測試的規則中的23個。點擊下面的每一個表現規則查看詳細信息。

1. 最小化HTTP請求
2. 使用內容交付網絡
3. 避免空的src或href
4. 添加一個Expires或一個Cache-Control Header
5. Gzip組件
6. 把StyleSheets放在最前面
7. 把腳本放在底部
8. 避免使用CSS表達式
9. 使JavaScript和CSS外部
10. 減小DNS查找
11. 縮小JavaScript和CSS
12. 避免重定向
13. 刪除重複的腳本
14. 配置ETags
15. 使AJAX緩存
16. 使用GET進行AJAX請求
17. 減小DOM元素的數量
18. 沒有404s
19. 減少Cookie大小
20. 爲組件使用不使用Cookie的域
21. 避免過濾器
22. 不要在HTML中縮放圖像
23. 使favicon.ico小和緩存

對於檢測結果通常90分優秀，80分如下建議考慮優化！