如何在 WordPress 中利用瀏覽器緩存（帶視頻）

最後更新 - 2021 年 7 月 8 日

如果您擁有或運營一個 WordPress 網站，您將希望不斷改進它的外觀和工作方式。 但是，您使用的插件、頁面構建器和內容元素越多，您的網站就會越慢。

無論您的網站看起來多麼好或它的工作多麼重要，一個加載緩慢的網站對訪問者來說都是一個很大的障礙。

這就是為什麼管理 WordPress 網站需要您使用可以找到的任何網站性能指標。 值得採取的一項重要措施是利用瀏覽器緩存。

在本文中，您將了解它的含義以及如何在 WordPress 中利用瀏覽器緩存。

什麼是瀏覽器緩存？

每當用戶訪問您的網站時，都需要將圖像、JavaScript、CSS 等資源從服務器上傳到他們的計算機。 這意味著用戶需要在後續頁面和站點訪問之間重複加載相同的資源。

輸入：緩存。

緩存表示瀏覽器在本地存儲網站上可用的可緩存資源的時間段。 當用戶請求網頁時，信息會立即從他們的計算機中獲取。

這樣，您可以利用 WordPress 中的瀏覽器緩存來提供更快的網站性能。

您可以使用Google PageSpeed Insights和GTmetrix等工具來測試您的網站是否已經利用瀏覽器緩存。

只需將您網站的 URL 粘貼到提供的字段中，然後單擊“分析”。 該工具將為您的網站提供一個分數，在 PageSpeed 的情況下為 0 到 100，在 GTmetrix 的情況下為字母等級。

該工具還將為您提供改進網站性能的建議。 一個常見的建議是選擇在 WordPress 中利用瀏覽器緩存。 如果您收到此建議，這裡有兩種方法。

手動利用 WordPress 中的瀏覽器緩存

您可以通過在 .htaccess 文件中添加一些代碼來手動利用 WordPress 中的瀏覽器緩存。 實際上，您需要為三種不同的目的添加三段代碼：

1. 添加過期標頭
2. 添加緩存控制標頭
3. 關閉 ETag

要添加此代碼，您需要訪問您的網站文件，您可以通過登錄到您的主機帳戶或 cPanel 來完成。 您需要導航到網站設置中的文件管理器和“打開隱藏文件”選項。

然後，您將在 public_html 文件夾中找到 .htaccess 文件。 右鍵單擊該文件並對其進行編輯以添加下面提供的代碼。

1.添加瀏覽器緩存代碼

複製下面的代碼並將其粘貼到 .htaccess 文件內容的末尾。 不要對文件進行任何其他更改。

 #Customize expires cache start - 根據需要調整週期
<IfModule mod_expires.c>
FileETag MTime 大小
AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
過期活動在
ExpiresByType text/html "訪問 600 秒"
ExpiresByType application/xhtml+xml "訪問 600 秒"
ExpiresByType text/css "訪問 1 個月"
ExpiresByType 文本/javascript“訪問 1 個月”
ExpiresByType text/x-javascript "訪問 1 個月"
ExpiresByType 應用程序/javascript“訪問 1 個月”
ExpiresByType application/x-javascript "訪問 1 個月"
ExpiresByType application/x-shockwave-flash "訪問 1 個月"
ExpiresByType 申請/pdf “訪問 1 個月”
ExpiresByType image/x-icon "訪問 1 年"
ExpiresByType image/jpg "訪問 1 年"
ExpiresByType image/jpeg "訪問 1 年"
ExpiresByType image/png "訪問 1 年"
ExpiresByType image/gif "訪問 1 年"
ExpiresDefault "訪問 1 個月"

</IfModule>
#Expires 緩存結束

上面的代碼告訴瀏覽器提供頁面的緩存版本，而不是下載新版本。

這些設置還包括以下刷新/過期時間：

• HTML 600 秒
• 一個月 CSS 和 JavaScript
• 一年的圖像

這些有效期確保訪問者不必經常下載某些資源。 但是，您可以根據需要輕鬆編輯到期時間。

2.添加緩存控制標頭（Apache）

我們需要添加緩存控制標頭來指定瀏覽器緩存策略，這些策略與資源的緩存方式、緩存位置以及過期前的最長期限有關。 但是，我們已經在上面指定了過期時間，所以我們不需要在這裡重複它們。

複製並粘貼以下代碼：

 # BEGIN 緩存控制頭

<IfModule mod_expires.c>
<IfModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
標頭附加緩存控制“公共”
</filesMatch>
<filesMatch "\.(css)$">
標頭附加緩存控制“公共”
</filesMatch>
<filesMatch "\.(js)$">
標頭附加緩存控制“私有”
</filesMatch>
<filesMatch "\.(x?html?|php)$">
標頭附加緩存控制“私有，必須重新驗證”
</filesMatch>
</IfModule>
</IfModule>

3.關閉Etags

我們將關閉電子標籤以強制瀏覽器依賴緩存控制和過期標頭而不是驗證文件。 這是代碼：

 <IfModule mod_headers.c>
標頭未設置 ETag
</IfModule>
FileETag 無

NGINX 服務器的瀏覽器緩存

如果您的網站使用 NGINX，您將無法找到 .htaccess 文件。 在這種情況下，前往 /etc/nginx/sites-enabled/default 並粘貼以下代碼：

 服務器 {
聽 80；
server_name 本地主機；
地點 / {
根 /usr/share/nginx/html;
索引 index.html 索引.htm；
}
位置 ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
365d 到期；
}
位置 ~* \.(pdf)$ {
30天到期；
}
}
添加緩存控制標頭 (NGINX)
位置 ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
90d 到期；
add_header Cache-Control "public, no-transform";
}

編輯 NGINX 後，保存文件以利用 NGINX 服務器上的瀏覽器緩存。

使用插件在 WordPress 中利用瀏覽器緩存

編輯 .htaccess 文件確實有很大的風險，因為一個錯誤可能會破壞您的整個網站。 因此，如果您不想承擔不必要的風險，您可以使用W3 Total Cache和WP Fastest Cache等插件。

以下是使用 W3 Total Cache 插件來利用瀏覽器緩存的方法，這是最適合這項工作的插件之一。

安裝插件後，前往其設置頁面。 在這裡，確保啟用了瀏覽器緩存。 接下來，從側邊欄中轉到瀏覽器緩存設置。 並確保啟用過期標頭、緩存控制標頭和設置電子標籤選項。

如果您進行了任何更改，請保存設置。

這樣，您就成功地利用了 WordPress 網站上的瀏覽器緩存。 您可以再次使用 Insights 或 GTmetrix 工具確保它已啟用。

如果您更喜歡視頻版本，請查看以下視頻：

進一步閱讀：

• 2021 年最佳免費 WordPress 數據庫優化插件
• 如何在 WordPress 網站上啟用 GZIP 壓縮？