轉：YSlow工具介紹

YSlow是Yahoo開發的一個用於測試分析網站最佳化的Firefox工具插 件，使用時您必須先安裝有Firefox。YSlow針對網站速度體驗上的最佳化，將其總結為13條，分別用F到A的指標來對你的網站速度做出評價並給出數 據，F代表最差，A代表最好。我們可以通過分析得到的資料對自己的網站和伺服器做相應的最佳化。
這隻是一樣評測分析，改進還是要靠自己，這裡要談的就是實實在在的如何針對每一條進行最佳化：

1. Make fewer HTTP requests ( 減少Http請求數)
一個網頁不可避免的要引入大量的外部檔案：Javascript、css、背景圖片……由於Http協議的無狀態性，使用者的每一次訪問，都會重新向伺服器請求所有檔案，而大量Http請求的累加，正是影響網站速度的最主要原因。
所以這裡的解決方案只有一個：合并。最理想的情況莫過於一個網頁只包含一個css，一個js，一張背景圖。
合 並Js和Css檔案很好理解，背景圖片要怎麼合并？這裡採用的主要方法是CSS Sprites，簡單說就是把所有的圖片拼接成一張大圖，在不同的Css裡指定背景圖座標來顯示不同圖片。具體可以參考Dave Shea的Image Slicing’s Kiss of Death一文，還有網站提供了線上的CSS Sprites服務，只需要上傳小圖片，就可以獲得拼接後的大圖以及相應座標。
不過在當前越來越多動輒包含10餘個檔案的開發架構面前，減少 Http請求數也變得越來越難。一直都認為所謂架構，給出的應該是一整套完善的開發思想，從伺服器配置到資料庫設 計甚至是到UI體驗乃至SEO，但現在很多Framework總是各自為戰，後台與前端脫節，只在自己的一片領域裡提供一定程度上的方便，沒有考慮到最終 產品的統合，甚至連基本的代碼侵入性問題沒有處理好（這裡點名批評dojo，恨不得在所有的html標籤上印上dojo的章子），不能不說是一種遺憾。
所以如果網站中採用架構的話，在架構的選擇面前，建議多採用輕量級，侵入性低的架構，也是為了日後產品的最佳化維護著想。

2. Use a CDN (使用CDN，可以略過，不是能力範圍)
CDN(Content delivery network)內容分髮網絡，能夠智能根據網路節點情況選擇服務節點，大型網站部署時尤為重要。不過這屬於硬體層級的解決方案，我們沒有條件配置CDN的時候，可以自行設定忽略這一項評測。
在Firefox地址欄鍵入about:config，然後建立一個字串，名稱為extensions.firebug.yslow.cdnHostnames，值為所要評測網站的網域名稱，多個設定用逗號分隔。例如我的設定就是artwc.com,localhost

3. Add an Expires header (為檔案頭指定Expires，檔案快取)
Expires是瀏覽器Cache機制的一部分，瀏覽器的緩衝取決於Header中的四個值： Cache-Control， Expires， Last-Modified， ETag。這個項目的考評主要針對Cache-Control和Expires。
具體的Cache原理不是本文所涉及的，有興趣的同學可以看看Caching Tutorial一文。為了最佳化這個選項，我們所要做的是對站內所有的檔案有針對性的設定Cache-Control和Expires，這裡基於Apache主機舉例：

首先開啟mod_header模組，在httpd.conf中取消

•  LoadModule headers_module modules/mod_headers.so   

一行的注釋。然後對於圖片，檔案等不會經常更新的檔案設定一個比較長的到期時間

•  <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">      

•  Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"     

•  <!-- < SPAN-->FilesMatch>   

對於Cache-Control可以設定的更加細緻一些，這裡對圖片，檔案設定了7天，對XML，對html、php設定了2小時。

•  <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">      

•  Header set Cache-Control "max-age=604800, public"    

•  <!-- < SPAN-->FilesMatch>    

•  <FilesMatch "\.(html|htm|php)$">      

•  Header set Cache-Control "max-age=7200, must-revalidate"     

•  <!-- < SPAN-->FilesMatch>     

Expires也可以通過開啟mod_expires來實現

 

4. Gzip components / 啟用Gzip壓縮
HTTP/1.1支援接收伺服器端經過Gzip壓縮的資料，在Apache2中，可以開啟mod_deflate實現。
同樣去掉注釋

•  LoadModule deflate_module modules/mod_deflate.so         

然後對所有文本類檔案添加Gzip處理

 

•  DeflateCompressionLevel 3      
•  <FilesMatch "\.(php|htm|html|js|css)$">      
•  SetOutputFilter DEFLATE      
•  <!-- < SPAN-->FilesMatch>   

5. Put CSS at the top (將Css檔案放在頭部)
很好理解的一條，主要是為了避免最後載入Css引起的瀏覽器白屏，改善使用者體驗。

6. Put JS at the bottom (將Js檔案放在底部)
同樣很容易理解，為了讓DOM先行載入。

7. Avoid CSS expressions (避免CSS expressions)
CSS expressions可以輕易的引起瀏覽器假死，也不在W3C規範內，不只是避免，最好完全不要用。

8. Make JS and CSS external (將Js和Css檔案獨立)
將Js和Css檔案單獨做成外部檔案載入，一則可以功能複用，二則可以產生緩衝，當然這一條和第一條要互相參照找出最好的解決方案才是。

9. Reduce DNS lookups (減少DNS查詢)
外部檔案分散於多個伺服器，串連每台伺服器都會做一次DNS查詢，這一條是針對多伺服器的部署。

10. Minify JS (壓縮Js檔案)
壓縮Js檔案，Yahoo!官方推薦的工具是JSMin和YUI Compressor。本站也可以進行js壓縮http://artwc.com/tools.html

11. Avoid redirects （避免重新導向）
每一次的重新導向都會重新發送Header請求。所以在Apache下，無比強大的mod_rewrite是必須要學的。

12. Remove duplicate scripts （移除重複的指令碼）
開發中沒有規劃好，會出現頁面中重複引用一個檔案的情況，IE中即便是重複引用也會重新向伺服器發送一次請求。

13. Configure ETags （配置ETags）
在第三條中已經對瀏覽器緩衝機制中的Cache-Control和Expires進行了配置，這一條評測的是另外兩個：Last-Modified和ETag
簡單的說，即使設定了檔案的期限，瀏覽器在訪問資源時往往會因為Last-Modified和ETag而重新下載整個資源，所以簡單的做法是關閉Last-Modified和ETag，在Apache中做如下配置

•  FileETag None        
•  <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css)$">      
•  <p>Header unset Last-Modified</<!-- < SPAN-->p>  
•  </<!-- < SPAN-->FilesMatch>