如何輕鬆修復 WordPress 中的槓桿瀏覽器緩存

已發表: 2023-02-02

您想了解如何修復 WordPress 中的瀏覽器緩存嗎？

頁面速度是用戶體驗的重要組成部分。 請求的頁面在用戶瀏覽器中加載所需的時間對他們是否留在您的網站上有重大影響。

此外，頁面加載時間取決於許多因素——瀏覽器緩存是其中之一。 在本教程中，我們將討論如何修復 WordPress 中的瀏覽器緩存。 它也是許多頁面速度分析工具推薦的性能優化技巧之一。

首先，我們將探討什麼是瀏覽器緩存，然後我們將研究在使用和不使用插件的情況下修復 WordPress 中瀏覽器緩存的不同方法。

什麼是利用瀏覽器緩存警告？

利用瀏覽器緩存是 Google PageSpeed Insights 返回的眾多診斷之一，作為提高分數的建議，例如：

Google PageSpeed Insights 利用瀏覽器緩存警告

Google 建議使用瀏覽器緩存來提高頁面加載速度和性能。 簡單地說，緩存就是用戶的瀏覽器保存您網站頁面的靜態副本。 然後，在以後的訪問中，此內容可能會更快地重新加載，因為瀏覽器不需要訪問您站點的服務器來獲取必要的資源。

但是，每個緩存的資源都必須有一個過期日期。 當您網站上的內容變舊時，這會警告瀏覽器，允許他們用更新的內容替換緩存的副本。

如果您在性能測試結果中收到利用瀏覽器緩存的警告，這肯定意味著以下兩種情況之一：

  • 您的站點或第三方服務器缺少 Cache-Control 或 Expires 標頭。
  • 所需的標頭存在，但到期時間很短。 因此它對性能沒有影響。

此警告的解決方案包括解決其中一個或兩個問題。

修復 WordPress 中的利用瀏覽器緩存（2 種方法）

您可以使用兩種方法來修復 WordPress 中的槓桿瀏覽器緩存，具體取決於導致它的原因。 讓我們從使用 WordPress 插件開始。

方法 1：使用插件修復 WordPress 中的槓桿瀏覽器緩存

如果您使用的是 WordPress 緩存插件，它可能已經提供了瀏覽器緩存。

現在讓我們看看如何使用一些常見的緩存插件修復利用瀏覽器緩存。

可濕性火箭

WP Rocket - WordPress 緩存插件

WP Rocket 是可用的最有效的 WordPress 緩存插件。 即使您不了解複雜的緩存和速度術語，它仍然可以幫助您優化網站的性能。

所有推薦的緩存設置都將開箱即用地加速您的 WordPress 網站。

要使用 WP Rocket 修復槓桿瀏覽器緩存，您需要做的就是安裝並激活插件。 有關更多詳細信息，請參閱我們關於如何在 WordPress 中安裝插件的指南。

就是這樣。

WP Rocket 將自動激活瀏覽器緩存並使用適當的規則更改您的 .htaccess 文件。

要了解更多信息，請查看我們完整的 WP Rocket 評論。

LiteSpeed緩存

LiteSpeed Cache 是另一個緩存插件，允許您通過啟用該功能來修復利用瀏覽器緩存。 激活插件後，從 WordPress 儀表板轉到LiteSpeed Cache » Cache 。 然後，導航到“瀏覽器”選項卡並啟用“瀏覽器緩存”選項。

啟用 LiteSpeed 瀏覽器緩存

另外，您還可以設置到期時間。 但是，請記住，此選項將應用於您網站上的所有緩存文件。

WP 最快的緩存

如果您正在尋找具有很多功能的免費緩存插件，WP Fastest Cache 可能是一個不錯的選擇。 它支持免費的瀏覽器緩存、GZIP 壓縮和縮小。

激活後，轉到“設置”選項卡並選中“瀏覽器緩存”複選框。

在 WP Fastest Cache 中啟用瀏覽器緩存

W3 總緩存

W3 Total Cache 是另一個最好的 WordPress 緩存插件。 它允許您自定義一系列緩存選項。

激活後，轉到性能»常規設置，然後向下滾動到瀏覽器緩存並選中旁邊的框以啟用（如果未選中）。

在 W3 Total Cache 中啟用瀏覽器緩存

接下來，轉到性能 » 瀏覽器緩存。 在General下，選中前五個框。 這些啟用啟用瀏覽器緩存的標頭（從您的服務器發送到瀏覽器的 HTTP 指令）。

W3 Total Cache 瀏覽器緩存設置

最後，您需要為特定文件類型設置到期時間。 過期標頭告訴瀏覽器將站點文件的副本存儲多長時間。

您可以為 CSS 和 JavaScript 文件、HTML 和 XML 文件以及媒體文件設置單獨的過期標頭。

利用瀏覽器緩存

利用瀏覽器緩存 – WordPress 插件

它不是緩存插件； 相反，它是一個瀏覽器緩存插件。 您可以從 WordPress.org 插件目錄下載它。

為什麼要改用這個插件？ 如果您不想安裝完整的緩存插件，Leverage Browser Caching 插件只關註一個特定的活動。 如果您只需要解決利用瀏覽器緩存錯誤的方法，這可能會奏效。

它也很簡單：當您激活它時，它會立即開始工作，您可以通過停用它來停止它。

它的工作原理是將瀏覽器緩存代碼直接添加到 Apache 服務器的 .htaccess 文件中。

方法 2：在不使用插件的情況下修復 WordPress 中的利用瀏覽器緩存

如果您不想安裝插件，可以通過更改 Web 服務器設置來利用瀏覽器緩存。 如果這樣做，您的 Web 服務器將指示訪問者的瀏覽器將特定資源保存在瀏覽器緩存中。 瀏覽器會在本地保存這些文件一段時間，並在後續的頁面訪問中使用。

配置您的網絡服務器以告訴訪問者的瀏覽器開始緩存因服務器而異。 在本教程中，我們將了解如何在兩個最常見的 Web 服務器Apache和Nginx中啟用瀏覽器緩存。

注意：在您自定義您的 WordPress 代碼之前，我們建議您備份您的 WordPress 站點。 查看一些最好的 WordPress 備份插件。

修復 Apache 中的瀏覽器緩存

要解決 Apache 服務器利用瀏覽器緩存的問題，您需要將代碼添加到 .htaccess 文件中。

要編輯此文件，您必須首先使用 FTP 客戶端或主機的文件管理器工具登錄到您的 WordPress 主機帳戶。

連接後，您應該能夠在您網站的根文件夾中看到您的 .htaccess 文件。

然後，要啟用瀏覽器緩存，請添加緩存控制和過期標頭。

緩存控制標頭指示 Web 瀏覽器應如何執行緩存。

expires 標頭允許緩存並指示 Web 瀏覽器在刪除某些文件之前應存儲多長時間。

要添加過期標頭，請將以下代碼添加到您的.htaccess文件中：

## EXPIRES HEADER CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType image/svg "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType application/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 3 days" </IfModule> ## EXPIRES HEADER CACHING ##此代碼根據類型設置不同的緩存到期日期的文件。

然後，要啟用緩存控制，請添加以下代碼： <filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">; Header set Cache-Control "max-age=96000, public" </filesMatch> <filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">; Header set Cache-Control "max-age=96000, public" </filesMatch>此代碼指定緩存何時過期。 上例中的緩存將在 90,000 秒後過期。

保存 .htaccess 文件並重新啟動 Apache 以使更改生效。

修復 Nginx 中的利用瀏覽器緩存

如果您在 Nginx 網絡服務器上託管您的 WordPress 博客，您可以通過編輯服務器配置文件來修復瀏覽器緩存錯誤。

您的託管人決定您如何編輯和訪問此文件，因此如果您需要幫助，請聯繫他們。

然後，要添加過期標頭，請添加以下代碼：

此代碼將為各種文件類型設置到期時間。 location ~* \.(jpg|jpeg|gif|png|svg)$ { expires 365d; } location ~* \.(pdf|css|html|js|swf)$ { expires 3d; } 然後，添加緩存控制標頭，添加以下代碼： location ~* location ~* \.(jpg|jpeg|gif|png|svg)$ { expires 365d; } location ~* \.(pdf|css|html|js|swf)$ { expires 3d; } location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ { expires 14d; add_header Cache-Control "public, no-transform"; } location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ { expires 14d; add_header Cache-Control "public, no-transform"; } location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ { expires 14d; add_header Cache-Control "public, no-transform"; }此代碼指定緩存何時過期。 它通知您的服務器上面列出的文件類型在 14 天內不會更改。

WordPress 利用 Google Analytics 的瀏覽器緩存

如果您使用 WordPress Google Analytics 插件，您可能仍然會遇到利用瀏覽器緩存的問題，即使所有配置都正確。

這是因為 Google Analytics 將默認過期時間設置為兩小時，以確保您盡快獲得更新。

您可以使用名為 Complete Analytics Optimization Suite (CAOS) 的免費插件優化您網站對 Google Analytics 的使用。 CAOS 插件自動在本地託管 Google Analytics，並完全解決您看到的任何利用瀏覽器緩存的錯誤。

如果您是初學者，請查看我們關於如何將 Google Analytics 添加到 WordPress 網站的綜合指南。

結論

您已經了解瞭如何利用瀏覽器緩存來提高站點速度。 有兩種方法可以做到這一點：將代碼添加到 .htaccess 文件和安裝緩存插件。 激活後，您將看到它如何提高頁面速度。

我們希望本教程能幫助您了解如何修復 WordPress 中的瀏覽器緩存。

要了解有關 WordPress 速度和性能的更多信息，請查看這些有用的資源：

  • 如何加速 WordPress 網站
  • 如何清除 WordPress 中的緩存
  • 最好的 WordPress 緩存插件

最後，在 Twitter 上關注我們，定期更新新文章。