HTML優化工具Page Speed和YSlow插件的安裝及使用

目前，HTML優化已經越來越引起Web前端開發的重視。頁面優化是SEO優化工作中必不可少的一項任務，這裡我向大家推薦我目前用的谷歌Page Speed插件和YSlow插件。

        Page Speed是谷歌推出的一個網頁優化建議插件，它并不能獨立允許。而是要依托火狐或谷歌浏覽器，且火狐浏覽器必須安裝了一個名為Firebug的插件，才能正常的使用Page Speed對網頁進行分析。是以首先我們必須安裝火狐浏覽器，應該每個站長電腦上都安裝了火狐浏覽器吧，但有些人卻沒有安裝page speed插件，這裡我就簡單介紹下安裝和使用方法吧。

第一步：打開火狐浏覽器，左上角進入菜單選項，選擇附加元件進入元件界面搜尋firebug，搜尋結果中的第一個就是了，點右邊的安裝按鈕進行安裝。

第二步：安裝好後下載下傳pages speed進行安裝。下載下傳位址：https://developers.google.com/speed/pagespeed/download?hl=zh-CN

第三步：下載下傳到電腦上後直接安裝，有提示選是就可以了。安裝好後火狐工具欄上會多出一個蜘蛛小辨別。

第四步：打開你的網站頁面等加載完後點選這個蜘蛛辨別點選分析按鈕即可對網站進行分析。Page Speed會根據web performance best practices (網頁性能最佳實踐)進行逐項打分。然後根據重要程式和優先級對每項進行排列。

Speed Page插件一般都是英文版，Firefox也有中文版本，但缺乏詳細解釋。這裡先把主要檢測事項的中英文對比出來，内容如下：

Parallelize downloads across hostnames 通過不同主機并行下載下傳資源

Leverage browser caching 使用浏覽器緩存

Enable gzip compression 啟用gzip壓縮

Specify image dimensions 指定圖檔大小

Minify JavaScript 壓縮 JavaScript

Inline small CSS 内嵌小型CSS

Optimize images 優化圖檔

Combine external JavaScript 壓縮外部的JavaScript

Minify HTML 壓縮 HTML

Remove unused CSS 删除沒用的CSS

Minify CSS 壓縮 CSS

Specify a Vary: Accept-Encoding header 請指定一個“Vary: Accept-Encoding”标頭

Prefer asynchronous resources 首選異步資源

Minimize redirects 盡量減少重定向

Enable Keep Alive 啟用HTTP Keep-Alive

Use efficient CSS selectors 使用高效的CSS選擇符

Avoid bad requests 避免出現錯誤的請求

Combine external CSS 壓縮外部的CSS

Inline small JavaScript 内嵌小型 JavaScript

Put CSS in the document head 将CSS 放在文檔标頭處

Minimize DNS lookups 減少DNS查詢次數

Minimize request size 盡量減少請求的資料量

Optimize the order of styles and scripts 優化樣式表和腳本的排列順序

Remove query strings from static resources 将查詢字元串從靜态資源中删除

Serve resources from a consistent URL 由同一網址提供資源

Serve scaled images 提供壓縮後的圖檔

Specify a cache validator 請指定緩存驗證工具

Specify a character set early 請指定字元集

Avoid CSS @import 避免在CSS中使用import

Combine images using CSS sprites 将圖檔組合為CSS 貼圖定位

Yslow是雅虎開發的基于網頁性能分析浏覽器插件，自從我使用了YSlow後，不僅提升了網頁的打開速度，改變了大量備援代碼，這款插件還幫助我分析了不少其他網站的代碼。安裝YSlow的方法與Page Speed的安裝方法一緻，下載下傳位址是：http://developer.yahoo.com/yslow/ 安裝好YSlow插件後，打開要檢測的網站，打開Firebug，點選 Run Test 運作Yslow，也可以點選 Grade, Components, 或Statistics選項開始對頁面的分析，如果在 Autorun YSlow each time a web page is loaded 上打上對勾，它将自動對以後打開頁面進行評分。

Grade(等級視圖)—Yslow的第二個頁籤

Yslow給出的網站性能評分，從F~A，A是最好的。此頁籤内容是提示http請求次數、css表達式、縮小javascript和css等各種需要優化的提示。

Components（元件視圖）—Yslow的第三個頁籤

通過Components考驗檢視網頁各個元素占用的空間大小。

Statistics（統計資訊視圖）—Yslow的第四個頁籤

Statistics這個統計資訊視圖工具和Components（第三頁籤）一樣，隻是效果更直覺，如果要獲得性能優化建議還是要看Grade（第二頁籤）的詳細建議。

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：這個是列印用的，部門開會、前端設計師讨論、向老闆彙報時估計用的上。