Yslow是雅虎開發的基於網頁效能分析瀏覽器外掛。

兩種方法啟動Yslow：

①開啟Firebug視窗，選擇Yslow選項。②直接點選火狐右下角的Yslow啟動按鈕。

YSlow有等級檢視/元件檢視/統計資訊試圖/輔助工具模組

Yslow檢視：YSlow顯示測試結果的分析,分為等級、元件、統計資訊。你可以瀏覽這些觀點之間選擇標籤以觀的名字在YSlow標籤的Firebug控制檯。

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

檢視顯示了等級為網頁的評估結果。整個字母等級為頁面顯示在頂部隨著全面數值的表現。這個頁面是基於23可分級的高效能網頁的規則，這些規則是列在按重要性的順序,從最重要不重要。從 A 級到 F 級，A 級為最高。

如果頁面與某一個規則無關，則顯示 N/A ，表示不適用。

點選每一規則，都給出了改進建議。

1)Make fewer HTTP requests-減少HTTP請求

在一個頁面上減少HTTP請求的數量,頁面載入的速度更快。一些方法來減少元件包括:合併檔案,結合多個指令碼到一個指令碼中,多個CSS檔案合併到一個樣式表,並使用CSS和影象對映。

2）Use a Content Delivery Network (CDN)-內容分發網路(CDN)

使用者與web伺服器響應時間的影響。跨多個地理位置分散的伺服器上部署內容幫助使用者覺得頁面載入速度。

3）Avoid empty src or href-避免空src和href

空src和href，這種行為可能毀壞使用者資料,浪費伺服器計算週期生成一個頁面,在最壞的情況下,使您的伺服器通過空src和href，傳送大量意想不到的流量。

4）Add Expires headers-新增Expires頭資訊

Web頁面越來越複雜與更多的指令碼、樣式表、圖片和Flash。第一次訪問一個頁面可能需要多個HTTP請求載入的所有元件。這些元件通過使用Expires頭資訊成為可快取,避免不必要的HTTP請求對後續頁檢視。Expires頭資訊通常與影象有關,但他們可以而且應該被用在所有頁面元件包括指令碼、樣式表和Flash。

5）Compress components with gzip-用gzip壓縮元件

壓縮減少響應時間減少HTTP響應的大小。Gzip是目前最受歡迎和最有效的壓縮方法,總體上降低了響應大小約70%。大約有90%的今天的網際網路流量聲稱支援gzip的瀏覽器。

6）Put CSS at top-把CSS放在頂部

樣式表移動到文件的HEAD元素幫助頁面出現載入更快,因為這允許頁面逐步呈現。

7）Put JavaScript at bottom-把JavaScript放在底部

JavaScript指令碼塊並行下載,也就是說,當一個指令碼下載,瀏覽器不會啟動任何其他下載。幫助頁面載入更快,指令碼移到頁面的底部延遲載入

8）Avoid CSS expressions   避免CSS表示式

CSS表示式(IE版本開始支援5)是一個強大的,和危險的,動態設定CSS屬性的方法。這些表示式經常估算:當頁面呈現和大小,當滾動頁,甚至當使用者將滑鼠頁面。這些頻繁的估算降低使用者體驗。

9）Make JavaScript and CSS external-使用外部JavaScript和CSS

在實際應用中使用外部檔案可以提高頁面速度，因為JavaScript和CSS檔案都能在 瀏覽器中產生快取。內建在HTML文件中的JavaScript 和CSS則會在每次請求中隨HTML文件重新下載。這雖然減少了HTTP請求的次數，卻增加了HTML文件的大小。從另一方面來說，如果外部檔案中的 JavaScript和CSS被瀏覽器快取，在沒有增加HTTP請求次數的同時可以減少HTML文件的大小。

JavaScript檔案外部載入的好處

• 統一定義JavaScript程式碼，方便檢視，方便維護。

• 使程式碼更安全，可以壓縮，加密單個JavaScript檔案。

• 瀏覽器可以快取JavaScript檔案，減少寬頻使用（當多個頁面同時使用一個JavaScript檔案的時候，通常只需下載一次）。 

10）Reduce DNS lookups-減少DNS查詢

域名系統(DNS)主機名對映到IP地址,就像:只要還不是電話簿就好了別人的名字對映到他們的電話號碼。在瀏覽器中輸入URL www.yahoo.com時,瀏覽器接觸一個DNS解析程式返回伺服器的IP地址。DNS是有成本的;通常需要20到120毫秒,查詢主機名的IP地址。瀏覽器不能下載任何東西從主機到查詢完成。

11）Minify JavaScript and CSS-壓縮JavaScript和CSS 

這種方法刪除不必要的字元從一個檔案,以減少其大小,從而提高載入時間。當一個檔案縮小則是,評論和不必要的空白字元(空間、換行符和選項卡)移除。這可以提高響應時間,因為減少了下載檔案的大小。

12）Avoid URL redirects-避免URL重定向

URL重定向是使用HTTP狀態碼301和302。URL重定向就是把一個URL重定向到另一個URL上去。重定向即是把一個目錄或者檔案的訪問請求轉發至另外一個目錄或者檔案，當用戶發出相應的訪問請求時將自動跳轉到指定的位置，常見的重定向有301（永久重定向）及302（暫時重定向）兩種

13）Remove duplicate JavaScript and CSS-刪除重複的JavaScript和CSS

在同一個頁面中重複引用JavaScript檔案會影響頁面的效能。重複指令碼會引起不必要的HTTP請求和 無用的JavaScript運算，這降低了網站效能。

在Internet Explorer中會產生不必要的HTTP請求，而在Firefox卻不會。在Internet Explorer中，如果一個指令碼被引用兩次而且它又不可快取，它就會在頁面載入過程中產生兩次HTTP請求。即時指令碼可以快取，當用戶過載頁面時也會產 生額外的HTTP請求。

除增加額外的HTTP請求外，多次運算指令碼也會浪費時間。在Internet Explorer和Firefox中不管指令碼是否可快取，它們都存在重複運算JavaScript的問題。。

14)Configure entity tags (ETags)-配置實體標記(ETags)

Etag 在HTTP1.1中有介紹，主要的作用就是在(css file, image, javascript file)檔案後面新增一個唯一的引數（相當於查詢引數字串），Etag有伺服器端生成，並且隨著檔案的改變而改變，這樣瀏覽器端就會只重新請求獲取 Etag發生變化的檔案，減少瀏覽器端資料的流量，加快瀏覽器的反應速度，重要的是減輕伺服器端的壓力，所以伺服器端Etag的實現就比較重要了。

15)Make AJAX cacheable-使AJAX快取

AJAX的一個好處是它提供了即時反饋給使用者,因為它從後端web伺服器非同步請求的資訊。然而,使用AJAX並不能保證使用者不會等待非同步JavaScript和XML響應返回。優化AJAX響應的重要的是要提高效能,並使快取的響應是最好的方法來優化。

16）Use GET for AJAX requests-AJAX請求使用get方法

使用XMLHttpRequest物件時,瀏覽器實現在兩個步驟:(1)傳送頭部資訊,(2)傳送資料。最好是用get,而不是post,因為一起傳送頭部資訊和資料(除非有很多快取)。IE的最大URL長度是2 KB,因此如果你傳送更多數量的資料可能無法使用。

17）Reduce the number of DOM elements-減少DOM元素

複雜的頁面下載意味著更多的位元組,這也意味著使用JavaScript訪問DOM元素比較慢。減少頁面的DOM元素的數量來提高效能

18）Avoid HTTP 404 (Not Found) error-避免HTTP 404(Not Found)錯誤

一個HTTP請求和接收404(未找到)錯誤是昂貴和降低了使用者體驗。一些網站有幫助404的訊息(例如,“你的意思是……?”),這可能幫助使用者,但是伺服器資源還是浪費了。

19）Reduce cookie size-減少cookie大小

HTTP cookies是用於身份驗證、個性化和其他用途。Cookie資訊交換在web伺服器和瀏覽器之間的HTTP頭資訊,所以保持cookie最小化對響應時間的影響。

20） Use cookie-free domains-使用不存在的cookie域名

當瀏覽器請求一個靜態影象併發送cookie的請求時,伺服器忽略了cookie。這些cookie是不必要的網路流量。為了解決這個問題,確保靜態元件被請求無cookie的要求通過建立子域名和託管。

為了避免讓瀏覽器傳送這些無用的cookie資訊，在伺服器端做設定都是沒有用的，因為這瀏覽器端主動傳送的。只有通過使用另一個不存在cookie的域名，才能讓瀏覽器不傳送cookie資訊。

21）Avoid AlphaImageLoader filter-避免AlphaImageLoader過濾器

IE-proprietary AlphaImageLoader過濾器試圖解決一個問題與半透明的真彩色PNG檔案在IE版本小於Version 7。AlphaImageLoader 是IE中瀏覽器中特有一個CSS濾鏡，可以處理IE6瀏覽器中圖處理PNG圖片的透明底色的問題

使用了AlphaImageLoader 濾鏡，在圖片下載完成之前，會組織頁面渲染其他的元件，使瀏覽器被卡死。而我們知道，普通的圖片的下載是一個類似非同步的載入過程，並不會導致瀏覽無法載入解析其他的元件。 使用 AlphaImageLoader 濾鏡對於前端效能的影響還是挺大的。

22）Do not scale images in HTML-在HTML程式碼中不要縮放圖片

網頁設計師有時設定形象維度通過使用影象的寬度和高度屬性的HTML元素。原始的圖片大小就應該是多大，圖片不要比期望的尺寸小，也不要比需要的尺寸大，如果原始的圖片大於期望的尺寸，很明顯就會額外花更多時間下載圖片，浪費頻寬，影響效能。只有在圖片原始大小跟設定的大小相等的時候，瀏覽器在下載完圖片後就可以馬上渲染出圖片，無需任何其它額外的計算，前端效能才是最好的

23）Make favicon small and cacheable-讓 Favicon 檔案儘量的小且快取它

favicon.ico 就是一個特別醒目的站點標識，當我們將網站收藏起來的時候，這個圖片就會在蒐藏欄（書籤欄）顯示出來，favicon 應該也是由此得名的。記住這個ICO格式檔案只能叫做favicon.ico。

而IE瀏覽器中對 favicon.ico 檔案的處理更特別，在載入一個頁面的時候，首先會去請求 favicon.ico 檔案，然後才會請求頁面中其它的元件。這個時候的 404 的影響就更加“巨大”了。

Make favicon small 建議是小於1K

Make favicon cacheable 就是給.ico型別的檔案設定 Expire Head，而 favicon.ico 的過期時間我們可以設定的儘可能的長一些，因為 favicon.ico 在網站建立之後，基本就不會改變了。