如何輕鬆修復 WordPress 中的利用瀏覽器緩存警告

已發表: 2021-08-18

您可能會遇到用於衡量網站性能的不同在線工具。 他們每個人都在分析您網站的特定部分的運行速度。 在眾多常見警告中，經常出現“利用瀏覽器緩存”錯誤。 這與緩存有關，作為一項功能，您可以臨時利用客戶端設備上的空間。 這會導致您的網站及其頁面的整體加載速度更快。 換句話說，您可以輕鬆地在 WordPress 中修復槓桿瀏覽器緩存警告，以確保為您的訪問者提供更好的用戶體驗。

在 WordPress 中修復利用瀏覽器緩存警告的可靠方法

有兩種情況您會收到此警告。 首先，您的瀏覽器緩存未啟用。 其次，瀏覽器緩存配置不正確。 然而，在許多在線性能工具中，這個錯誤現在報告為“使用有效的緩存策略服務靜態資產” 。 但是，無論您收到什麼警告，都意味著您的瀏覽器緩存規則沒有到位。 如果您對自己解決問題沒有信心，經驗豐富的 WP 專家總是可以幫助您解決這些問題。 或者，如果您是，那麼讓我們來看看如何修復 WordPress 中的“利用瀏覽器緩存”警告。

表中的內容：

  • 什麼是瀏覽器緩存？
    • W3 總緩存插件
    • CAOS 插件
    • WP火箭插件
  • 使用插件修復 Leverage Browser Caching 警告
  • 使用代碼手動修復它

什麼是瀏覽器緩存？

在我們繼續解決方案之前，了解這種類型的瀏覽器緩存意味著什麼是很有用的。 這是網站在本地存儲其頁面副本的一種方法。 它允許他們通過減少瀏覽器和服務器之間的請求數量來提高加載速度。 因此，在重新訪問時，瀏覽器將更快地加載網站，而無需再次連接到服務器並請求額外的資源。

“使用有效的緩存策略提供靜態資產”警告。
這是您通常會在在線性能工具上看到的警告。

最常見的緩存文件類型是：

  • 樣式表
  • 圖片
  • 標誌
  • 和其他靜態元素

由於自上次訪問以來它們可能沒有更改，因此您的網站將在訪問者的瀏覽器中加載得更快。 問題是 -緩存的所有內容都需要設置過期期限。 以防萬一同時發生了某些變化，因此訪問者可以加載網站的更新版本。

修復利用插件的瀏覽器緩存警告

插件搜索緩存插件的結果。
您可以在 WordPress 中輕鬆找到數十個緩存插件。

W3 總緩存

W3 Total Cache 是最流行的緩存插件之一。 它具有您可以從此類插件中獲得的所有功能。 總體而言，該插件通過改善您的網站性能直接改善了 SEO 和整個用戶體驗。 正確配置後，它可以使您的總體性能提高約 10 倍。 十多年來，許多 Web 開發人員、Web 主機和發布者都信任此插件。

CAOS 插件

可以在 WordPress 插件存儲庫中輕鬆找到完整的分析優化套件。 雖然它作為通用緩存解決方案並不出名，但這個插件解決了 Google Analytics 的問題。 有時，如果您使用的是 Google Analytics，它會扭曲 PageSpeed Insights 和類似工具的結果。 主要是因為谷歌設置了一個太短的緩存到期時間。 使用 CAOS 插件，您可以在本地託管您的主機 analytics.js/gtag.js 並自動保持最新狀態。

WP火箭插件

此列表中最好的 WordPress 緩存插件之一絕對是 WP Rocket。 雖然其他插件可能很難配置，但 WP Rocket 非常簡單。 它對初學者非常友好，允許您在沒有任何先驗知識的情況下優化所有內容。 基本上，您只需要安裝、激活它，它就會立即使用推薦的 .htaccess 配置。 到目前為止，這是修復利用 WordPress 中的瀏覽器緩存警告並儘可能使您的網站對用戶友好的最簡單和最快的方法。

使用代碼手動修復它

這種方法需要一定的經驗，所以不推薦初學者。 在大多數情況下，插件會完成這項工作。 但是，如果出於任何原因不想使用插件，則可以通過手動添加代碼來解決緩存問題。

在進行任何更改之前，第一步是備份您的網站。

接下來的步驟可能會有所不同，具體取決於您使用的服務器。

如果您使用的是 Apache 服務器

基本上，一切都從編輯 .htaccess 文件開始。 進入後，您必須為緩存控制和過期標頭添加代碼。 緩存控制是一組關於如何處理緩存的指令。 而過期標頭決定瀏覽器中資源保存的期限。

  • 首先，為 cache-control 添加以下代碼：

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=80000, public"
</filesMatch>

基本上，這可以緩存不同類型的文件。 並且，將它們設置為通常在“max-age”（以秒為單位）後過期。 之後，瀏覽器將再次更新整個緩存。

  • 接下來，您將添加定義過期標頭的代碼：

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpeg "access 2 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/png "access 3 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType image/gif "access 2 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/pdf "access 3 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 5 days"
</IfModule>

從本質上講，這些行根據您的需要為不同的文件類型設置不同的到期日期。

如果您使用的是 Nginx 服務器

對於 Nginx，您必須更改服務器配置文件以修復瀏覽器緩存問題。 唯一需要注意的是，您可能無權訪問您的服務器配置文件。 為此，您必須與您的託管服務提供商聯繫。

  • 但是，一旦您獲得了安全訪問權限，您就可以自由添加緩存控制標頭：

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

就像在 Apache 中一樣，這將設置整個緩存的過期時間。

  • 下一行將設置過期標頭：

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

您可以在此處看到，圖像的有效期較長，因為它們通常不會像其他文件那樣經常更改。

文件格式的不同圖標。
您可以為任何給定的文件類型設置到期日期。

雖然它們可能無法為您提供有關網站性能的正確圖片，但在線性能工具可以為您指明正確的方向。 開始進行更改的最簡單方法之一是修復 WordPress 中的“利用瀏覽器緩存”警告。 或者，就像今天一樣，它通常被認為是“使用有效的緩存策略服務靜態資產”。 這將使您的網站加載速度更快，並為新訪客和回訪者提供更好的用戶體驗。 無論您選擇插件還是要手動添加代碼，都無所謂。 一般來說，讓您的網站表現得更好是很重要的。