Yslow使用方法

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

Yslow的安裝方法 前端

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

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

2263f344-70e7-43af-bf29-8cdaa6aaf7c0

(圖1:Yslow的啓動界面) chrome

點擊 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的第二個選項卡

a322b96e-2a12-4572-a8ee-21224616fac1

(圖2:Yslow給出的網站性能評分)

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

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

Components(組件視圖)—Yslow的第三個選項卡

17fb79f0-a785-469e-ba9d-f7aa02d65767

(圖3:經過Components考驗查看網頁各個元素佔用的空間大小)

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

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

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

18ac6c91-c252-453d-bb93-f3261ddf31ca

(圖4:Yslow的統計信息視圖)

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

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

Tools(輔助工具)—Yslow的第五個選項卡

aa2e60b3-adb9-4690-8ea6-cbf53f01d9f2

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

來源: <http://lusongsong.com/reed/362.html>

23條軍規

1. 減小HTTP請求次數

合併圖片、CSS、JS,改進首次訪問用戶等待時間。

2. 使用CDN

就近緩存==>智能路由==>負載均衡==>WSA全站動態加速

3. 避免空的src和href

當link標籤的href屬性爲空、script標籤的src屬性爲空的時候,瀏覽器渲染的時候會把當前頁面的URL做爲它們的屬性值,從而把頁面的內容加載進來做爲它們的值。測試

4. 爲文件頭指定Expires

使內容具備緩存性。避免了接下來的頁面訪問中沒必要要的HTTP請求。

5. 使用gzip壓縮內容

壓縮任何一個文本類型的響應,包括XML和JSON,都是值得的。舊文章

6. 把CSS放到頂部

7. 把JS放到底部

防止js加載對以後資源形成阻塞。

8. 避免使用CSS表達式

9. 將CSS和JS放到外部文件中

目的是緩存,但有時候爲了減小請求,也會直接寫到頁面裏,需根據PV和IP的比例權衡。

10. 權衡DNS查找次數

減小主機名能夠節省響應時間。但同時,須要注意,減小主機會減小頁面中並行下載的數量。

IE瀏覽器在同一時刻只能從同一域名下載兩個文件。當在一個頁面顯示多張圖片時,IE 用戶的圖片下載速度就會受到影響。因此新浪會搞N個二級域名來放圖片。

11. 精簡CSS和JS

12. 避免跳轉

同域:注意避免反斜槓 「/」 的跳轉;

跨域:使用Alias或者mod_rewirte創建CNAME(保存域名與域名之間關係的DNS記錄)

13. 刪除重複的JS和CSS

重複調用腳本,除了增長額外的HTTP請求外,屢次運算也會浪費時間。在IE和Firefox中無論腳本是否可緩存,它們都存在重複運算JavaScript的問題。

14. 配置ETags

它用來判斷瀏覽器緩存裏的元素是否和原來服務器上的一致。比last-modified date更具備彈性,例如某個文件在1秒內修改了10次,Etag能夠綜合Inode(文件的索引節點(inode)數),MTime(修改時間)和Size來精準的進行判斷,避開UNIX記錄MTime只能精確到秒的問題。 服務器集羣使用,可取後兩個參數。使用ETags減小Web應用帶寬和負載

15. 可緩存的AJAX

「異步」並不意味着「即時」:Ajax並不能保證用戶不會在等待異步的JavaScript和XML響應上花費時間。

16. 使用GET來完成AJAX請求

當使用XMLHttpRequest時,瀏覽器中的POST方法是一個「兩步走」的過程:首先發送文件頭,而後才發送數據。所以使用GET獲取數據時更加有意義。

17. 減小DOM元素數量

是否存在一個是更貼切的標籤可使用?人生不只僅是DIV+CSS

18. 避免404

有些站點把404錯誤響應頁面改成「你是否是要找***」,這雖然改進了用戶體驗可是一樣也會浪費服務器資源(如數據庫等)。最糟糕的狀況是指向外部 JavaScript的連接出現問題並返回404代碼。首先,這種加載會破壞並行加載;其次瀏覽器會把試圖在返回的404響應內容中找到可能有用的部分看成JavaScript代碼來執行。

19. 減小Cookie的大小

20. 使用無cookie的域

好比圖片 CSS 等,Yahoo! 的靜態文件都在主域名之外,客戶端請求靜態文件的時候,減小了 Cookie 的反覆傳輸對主域名的影響。

21. 不要使用濾鏡

png24的在IE6半透明那種東西,別亂使,淡定的切成PNG8+jpg

22. 不要在HTML中縮放圖片

23. 縮小favicon.ico並緩存

來源: <http://baike.baidu.com/link?url=e0ASP9bIv5BjvnMfJVJQPHg25n1hnx-HOMwN_KcY9P5t6X4Vh_rGW9r-H6DZre4egAnC2PtpXI36WF-c1AxCL_>

相關文章
相關標籤/搜索