昨天對部落格進行了各種最佳化，合併並壓縮了幾個 JS 檔案，改變了擺放位置，又大肆最佳化了 css，希望無聊的同學幫忙看看速度是不是有一點點提升。
其實昨天本來是希望改變一下 JS 檔案內容，新增點內容，做完之後順便進行了壓縮，又碰巧看到可以把幾個檔案放一起，比如 xx-packed.js 這樣的。分別載入確實不太好。
然後看到了 BoKeam 同學的這篇：【 WordPress 速度提升之 CSS 和 JS 的合併壓縮】 。遂去 【這裡】 進行了檢查，這站提供了 YSlow 和 Page Speed 的測試和評分，並附加了詳細的說明 （當然是 E 文的） 。我起初的 YSlow 只有 C，覺得有點低。然後找到了本篇的主要內容：新增 Expires Headers 。
啥是 Expires Headers
我同時測試了幾個朋友的站點，發現很多在這個 Expires Headers 上的評分都是 0 。導致 YSlow 的得分很低。以下是介紹：
| Expires header，就是過期時間的 header 報文。這個檔案過期時間，其實就是透過 header 報文來指定特定型別的檔案在瀏覽器中的快取時間。有些檔案 （例如樣式表中呼叫的背景圖片和文章中呼叫的圖片） 其實在很長一段時間內我們都不會對它們有什麼改變，這類檔案可以設定非常長的快取時間，這樣瀏覽器以後就不需要再從伺服器下載這些檔案而直接從快取中讀取，從而大大加速網站的載入速度。 |
首次登入的話並不能看出來有什麼提升，但是當瀏覽子頁面或者再次瀏覽的時候，就會發現速度較之前有很大改觀，伺服器不會重新抓圖片、 css 、 javascript 這樣不常常跟新的檔案 （就是減少了 HTTP 請求次數） 。
如何新增 Expires Headers
【以下內容來自：Tips And Tricks HQ 】
如果你的伺服器是 Apache，你可以用 ExpiresDefault 這樣的語句。直接新增在.htaccess 檔案即可。比如
| ExpiresDefault "access plus 2 months" |
這個語句使用了相對時間，即從現在起到兩個月後過期。當然 years 、 months 、 weeks 、 days 、 hours 、 minutes 、 seconds 都可以使用。
你可以寫入.htaccess 檔案中這樣的語句：
| #Expire Header ExpiresDefault "access plus 2 hours" |
或者
# Expire images header ExpiresActive On ExpiresDefault A0 ExpiresByType image/gif A2592000 ExpiresByType image/png A2592000 ExpiresByType image/jpg A2592000 ExpiresByType image/jpeg A2592000 ExpiresByType image/ico A2592000 ExpiresByType text/css A2592000 ExpiresByType text/javascript A2592000 |
注：A2592000 為 1 個月 （60*60*24*30=2592000）
移除 ETags
這個看了半天，似乎建議直接一鍋端，移除它可以減少 HTTP headers 的大小，據說這樣能讓站點表現更好。依然在.htaccess 檔案中加入下面語句即可。
據說這些小技巧可以提升網站 20% 的載入速度，我的站好像從 3.4xs 秒加快到 3.0s 或者 2.xs 甚至 1.84s 。改變確實是有的。
速度提升，當然還有還有 CDN 的使用、 cookie-free domains 的加入，但是資金是問題；合併 css 、 javascript 、背景圖片等這些，有時間就做做吧，只要站點正常顯示就可以。
PS：也有外掛 Autoptimize 可以自動新增 expires header 、壓縮 css，js，html，省去了手動操作。而且可以選擇 CDN 。不過外掛的壞處就是不知道它到底改了哪兒，一旦出現問題就得停用一個甚至幾個外掛，停下來仔細檢查，這也是我不常加外掛的原因。