如何使用外掛/無外掛優化WordPress網站瀏覽器快取

WordPress網站設定快取機制與不設定快取機制，網站的載入速度有天壤之別。Google PageSpeed Insights或GTmatrix或Pingdom等工具可能會建議您通過htaccess或者Nginx設定瀏覽器快取。 或者使用現有的WordPress快取外掛實現WordPress網站的瀏覽器快取。我們在另外一篇文章《網站測速效能測試深入淺出教程[附15款常用網站測速工具]》詳細地說明了網站測速方法，有興趣的站長也可以參考閱讀一下。

好吧，在本文中，我們將一起探討如何解決網站測速工具提到的瀏覽器快取設定提醒。此外，還將會一些在WordPress中實現瀏覽器快取的簡單但非常有效的技術。

下面根據我們的經驗，利用瀏覽器快取幫助您將網站載入速度提高多達50％。

文章閱讀導航

什麼是優化瀏覽器快取？

優化瀏覽器快取即，設定瀏覽器本地儲存網站的可快取資源的時間值（即影象，JavaScript和CSS），減少客戶端訪問相同頁面時的HTTP請求所需要的資源下載，提高了站點載入速度。

在使用Google Pagespeed進行網站速度測試時，您通常會注意到建議你為將WordPress的一些資源設定瀏覽器緩。 在大多數情況下，可快取資源是可以由瀏覽器臨時儲存的網站檔案（例如影象，JavaScript和CSS）。

瀏覽器快取如何加速您的網站

在進入本文優化WordPress網站瀏覽器快取細節之前，讓我們首先了解WordPress中的瀏覽器快取是如何工作的？以及它是如何更快地載入您的網頁。

Web瀏覽器需要從伺服器檢索許多資源（即HTML檔案，CSS檔案，JS檔案，文字，影象等）以便載入網站。

Web快取是Web瀏覽器和軟體應用程式中用於“臨時儲存”或“記住”本地磁碟上訪問過的網頁資源的技術。此臨時儲存的資料稱為“Web快取”或“HTTP快取”。

當你再次訪問同一個網站時。Web瀏覽器僅從伺服器端下載來自網站的更新內容，“臨時儲存”資料則直接從你的本地電腦讀取。

因此，Web快取有助於減少頻寬使用，伺服器負載等。因此，利用瀏覽器快取對於加快網頁載入非常重要。

換句話說，它命令您的Web瀏覽器（i）在本地快取網站檔案一段時間（ii）並從本地儲存載入檔案以供下次訪問，直到快取時間失效。 （iii）因此，從本地儲存載入網站檔案有助於Web瀏覽器更快地呈現和顯示網站。

如何修復瀏覽器快取警告

為了修復瀏覽器快取設定警告，您的Web伺服器應該允許Web瀏覽器臨時在本地磁碟上儲存訪問過的Web頁面資源。此外，當使用者再次訪問您的站點時，由於本地已經快取了部分可用靜態資源，它將載入更快。因此，您會發現網站載入速度有了顯著提高。

那麼問題是如何啟用WordPress站點的瀏覽器快取功能？

要在WordPress中啟用瀏覽器快取，您需要通過在HTTP標頭中新增快取控制標頭和ETag標頭來設定內容過期日期。

• Cache-Control狀態通過Web瀏覽器指出特定檔案的快取週期。
• 而ETag用於驗證快取資源和請求資源之間的更改。

我們可以設定一個特定的時間段（數月或數年）來保持本地快取資源（即HTML，CSS或JS檔案，影象等）。

溫馨提示：請根據資源更改的頻率設定到期日期，或者換句話說，更新網站靜態資源的頻率。而不是照本宣科參照下面提到的方法，應該因地制宜適當調整快取策略。

在WordPress中啟用瀏覽器快取

你可以通過以下方式設定你的WordPress網站的瀏覽器快取：

1. Adding Expires Headers-HTTP新增Expires頭
2. Adding Cache-Control Headers-新增快取控制標頭
3. Turning ETags Off-關閉ETag。

下面我們詳細討論如何新增Expires Headers和Cache-Control Headers以及關閉ETag。

在Apache伺服器上通過htaccess設定瀏覽器快取（不使用WordPress外掛）

如果您的網站託管在Apache Server上，則可以編輯WordPress htaccess檔案（一般存放在你的WordPress網站根目錄）。

然後，將以下程式碼複製並貼上到htaccess檔案中並儲存。

# TN - START EXPIRES CACHING #
ExpiresActive On
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/xhtml-xml "access 1 month"
ExpiresByType application/javascript "access 1 month" 
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresDefault "access 1 month"
# TN - END EXPIRES CACHING #

Tips：根據你的網站的靜態資源更新頻率來設定快取時間，比如影象類的資源一般設定一年。

此外，您應該在htaccess檔案中的Expires Headers程式碼下新增Cache-Control Headers，如下示例。

# TN - BEGIN Cache-Control Headers
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpeg|jpg|png|gif|swf|pdf|svg)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
</ifModule>
# TN - END Cache-Control Header

最後，您需要關閉ETag，在htaccess檔案新增如下程式碼。 您可以在此處閱讀有關ETag的更多資訊。

# TN - BEGIN Turn ETags Off
FileETag None
# TN - END Turn ETags Off

之後，如果您使用了快取外掛，請儲存您的WordPress的htaccess檔案並清除所有快取。

至此，您已經通過htaccess成功啟用了WordPress站點的瀏覽器快取。

溫馨提示：您知道Gzip壓縮還可以提高您的網站載入速度嗎？ 你啟用它了嗎？ 如果沒有，請閱讀參考文章《WordPress網站利用Gzip壓縮提升網站載入速度教程.》

在Web伺服器NGINX上啟用瀏覽器快取（不使用WordPress外掛）

如果您使用的是Nginx伺服器，則可以通過在.conf檔案（一般存放在/usr/local/nginx/conf）中編輯和新增以下程式碼來啟用Web瀏覽器快取。

Add Expires Headers (NGINX)

location ~* \.(jpg|jpeg|png|gif|ico|css|js|pdf|svg)$ {
expires 365d;
}
location ~* \.(pdf|html|swf)$ {
expires 90d;
}

Add Cache-Control Headers (NGINX)

location ~* \.(jpg|jpeg|png|gif|ico|css|js|pdf|svg)$ {
expires 90d;
add_header Cache-Control "public, no-transform";
}

如果NGINX伺服器上有多個網站。 我建議你建立一個xyz.conf檔案並新增上面提到的程式碼。 將此檔案儲存在此資料夾/etc/nginx/vhost/xyz.conf中

編輯後重新載入Nginx伺服器，即可成功啟用NGINX伺服器上的瀏覽器快取規則。

使用WordPress快取外掛實現瀏覽器快取

現在，讓我們來看看支援啟用瀏覽器快取的主流的WordPress快取外掛。 如果能夠通過配置Web伺服器配置檔案實現，儘可能不使用外掛實現。

當然使用外掛更佳簡單快捷且無需去折騰伺服器（萬一改壞了還得恢復），我們推薦以下三個WordPress快取外掛。

#1 WP Fastest Cache

WP Fastest Cache是最流行和許多知名WordPress部落格推薦的WordPress快取外掛之一。 這個五顆星點評的WP外掛可以在WordPress外掛市場上免費獲得。 截至目前，WP Fastest Cache外掛已有近百萬的個啟用安裝。

1. 下載並安裝啟用WordPress外掛WP Fastest Cache。
2. 進入WP Fastest Cache設定介面，點選選項卡Setting。
3. 按照下面截圖所示勾選必要的快取設定項，然後單擊提交按鈕。
4. 當提示了設定已經儲存，即啟用了瀏覽器快取設定。

WP Fastest Cache 外掛設定

除了實現瀏覽器快取之外，這個外掛還提供其他的選項來提高頁面速度，比如

• 開啟Gzip壓縮
• 精簡HTML和CSS
• 合併CSS和JS以實現減少HTTP請求
• 此外，它還可以生成動態WordPress站點的靜態HTML檔案等。

#2 Cache Enabler – WordPress Cache

另一個外掛是Cache Enabler – WordPress Cache，由KeyCDN開發。 這是一個獲得了4.5+星評分外掛。 除了瀏覽器快取之外，這個外掛還有一些獨特的功能來加速您的網站。 此外，它實現了它所說的功能並且還與其他WordPress效能外掛相容。

1. 首先下載安裝並啟用該外掛
2. 進入該外掛的設定介面
3. 勾選啟用leverage browser caching
4. 儲存設定即可。

這個外掛還有許多其他功能，例如……

• 支援自動和/或手動清除快取
• 手動清除頁面特定的快取
• 在儀表板上顯示總快取大小
• 支援HTML和內聯JavaScript瘦身
• 此外，支援自定義文章型別等等

#3 W3 Total Cache – WordPress plugin

相信大部分WordPress站長都聽說過W3 Total Cache – WordPress外掛，非常強大的WordPress快取外掛。

1. 首先，下載安裝並啟用外掛，然後進入W3 Total Cache Plugin的常規設定
2. 向下滾動並啟用瀏覽器快取並儲存所有設定
3. 此外，導航到頁面頂部的“瀏覽器快取設定”選項卡。
4. 在此頁面上的“常規設定”中指定可用的快取標頭。
5. 設定Expires Headers，Set Cache-Control Headers和Set entity tag（eTag） – 選中所有框。
6. 最後儲存所有設定。

W3 Total Cache 瀏覽器快取設定

溫馨提示：安裝啟用快取外掛後，如果您對主題進行了任何更改，尤其是在CSS樣式表。由於瀏覽器快取，您可能無法立即看到更改。因此，若你對樣式檔案/JS檔案等進行修改，建議在隱身視窗中開啟您的網站以檢視更改。如果CSS更改未在WordPress中顯示，則使用外掛Busted來重新整理或者通過清除快取等方式來讓更改生效。

希望您通過此文找到有效的辦法來提升你的WordPress站點的載入速度。你最終採用哪些方法來提升你的網站載入速度，不妨留言與我們一起探討。