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分以下建議考慮優化！