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


您想學習如何輕鬆修復 WordPress 中的槓桿瀏覽器緩存警告嗎?

通過修復槓桿瀏覽器緩存警告,您將快速加速您的 WordPress 網站並為您的網站訪問者提供更好的體驗。

在本文中,我們將向您展示如何輕鬆修復 WordPress 中的槓桿瀏覽器緩存警告。

如何修復 WordPress 中的槓桿瀏覽器緩存警告

什麼是 WordPress 中的瀏覽器緩存?

瀏覽器緩存是一種提高網站加載速度的方法。 當一個網頁加載時,所有的文件將被單獨加載。

這會在瀏覽器和 WordPress 託管服務器之間創建多個請求,從而增加網頁加載時間。

啟用瀏覽器緩存後,您的 Web 瀏覽器會在本地存儲您的網頁副本。 這允許瀏覽器在用戶訪問您網站上的第二頁時更快地加載常見文件,如樣式表、徽標、圖像等。

網站速度測試結果

這減少了整體服務器負載,因為對實際服務器的請求會減少,因此您的網站性能將得到改善。

您將在哪裡看到 WordPress 的槓桿瀏覽器緩存警告?

利用瀏覽器緩存警告意味著您沒有啟用瀏覽器緩存,或者您的緩存設置可能錯誤。

當您運行網站速度測試時,您會收到一份報告,其中顯示您可以修復哪些方法來加速 WordPress。

如果您的網站當前未使用瀏覽器緩存,那麼您將收到啟用瀏覽器緩存的警告。

這就是從頁面速度洞察工具查看結果時的樣子。

利用瀏覽器緩存警告

有時您會收到一條警告,指出您的高效緩存策略不起作用。

這兩個警告都是指您的瀏覽器緩存設置錯誤。

高效緩存策略警告

利用瀏覽器緩存意味著激活和自定義緩存規則以加速您的網站。

話雖如此,讓我們來看看如何使用兩種不同的方法輕鬆修復 WordPress 中的槓桿瀏覽器緩存警告。

只需使用下面的快速鏈接來選擇您希望如何修復 WordPress 中的槓桿瀏覽器緩存警告。

方法 1. 使用 WP Rocket WordPress 插件修復槓桿瀏覽器緩存警告

WP Rocket 是市場上最好的 WordPress 緩存插件。 它非常適合初學者,即使不了解複雜的緩存和速度術語,也可以幫助您優化站點以提高速度。

WP火箭

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

要使用 WP Rocket 修復槓桿瀏覽器緩存警告,您所要做的就是安裝並激活插件。

就是這樣。

有關更多詳細信息,請參閱有關如何在 WordPress 中正確安裝和設置 WP Rocket 的指南。

WP Rocket 將自動啟用瀏覽器緩存並修改您的 .htaccess 具有正確規則的文件。

筆記: 如果您使用的是 SiteGround 虛擬主機,那麼您可以改用免費的 SiteGround Optimizer 插件。

它具有與 WP Rocket 幾乎相同的功能,並且會自動為您啟用瀏覽器緩存。

方法 2. 通過向 WordPress 添加代碼來修復利用瀏覽器緩存警告

第二種方法涉及向 WordPress 文件添加代碼。 如果您以前沒有這樣做過,請參閱我們的初學者指南,將網頁中的片段粘貼到 WordPress 中。

這種方法對初學者不太友好,所以請僅在您確切知道自己在做什麼時才遵循此方法。 對於大多數企業主,我們建議使用方法 1。

話雖如此,讓我們來看看如何通過向 WordPress 添加代碼來修復槓桿瀏覽器緩存警告。

筆記: 在您自定義您的 WordPress 代碼之前,我們建議您備份您的 WordPress 網站。 有關更多詳細信息,請參閱有關如何備份和恢復 WordPress 站點的指南。

確定您的網站運行的是 Apache 還是 Nginx?

首先,您需要確定您的網站是使用 Apache 還是 Nginx 服務器。

為此,請在新選項卡或窗口中打開您的網站。 然後,右鍵單擊並選擇“檢查”選項。

右鍵單擊並檢查

接下來,單擊頁面頂部的“網絡”選項卡。

您可能需要刷新頁面才能加載結果。

點擊網絡

之後,在“名稱”列中單擊您的域名。

它應該在頁面的頂部。

點擊網站網址

然後,在“響應標頭”部分,您將看到一個名為“服務器”的項目,其中顯示了服務器的類型。 在這種情況下,該站點在 Apache 服務器上運行。

查找服務器類型

在 Apache 中添加緩存控制和過期標頭

要使用 Apache 服務器修復槓桿瀏覽器緩存警告,您將向您的 .htaccess 文件。

要編輯此文件,您需要使用 FTP 客戶端或主機的文件管理器工具連接到您的 WordPress 主機帳戶。

連接後,您可以看到您的 .htaccess 文件在您網站的根文件夾中。

訪問FTP

如果找不到,請不要擔心。 有時可以隱藏此文件。 有關更多詳細信息,請參閱我們的指南,了解為什麼在 WordPress 網站上找不到 .htaccess 文件。

接下來,您需要添加緩存控制和/或過期標頭以打開瀏覽器緩存。 這會告訴 Web 瀏覽器在刪除網站資源之前應將其存儲多長時間。

cache-control 標頭向 Web 瀏覽器提供了有關如何進行緩存的特定詳細信息。

expires 標頭啟用緩存並告訴 Web 瀏覽器它應該在刪除特定文件之前存儲多長時間。

您可以將以下代碼添加到您的 .htaccess 添加過期標頭的文件:

## EXPIRES HEADER CACHING ##

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"

## EXPIRES HEADER CACHING ##

此代碼根據文件類型設置不同的緩存到期日期。

之後,您可以添加以下代碼以啟用緩存控制:


    Header set Cache-Control "max-age=96000, public"

此代碼設置緩存到期的時間。 在上面的示例中,緩存將在 90,000 秒後過期。

之後,Web 瀏覽器將請求文件的新版本。

在 Nginx 中添加緩存控制和過期標頭

如果您使用 Nginx Web 服務器來託管您的 WordPress 博客,那麼您可以編輯服務器配置文件以修復瀏覽器緩存錯誤。

您如何編輯和訪問此文件取決於您的主機,因此如果您在訪問該文件時需要幫助,可以聯繫您的主機提供商。

然後,您需要添加以下代碼來添加過期標頭:

  location ~* .(jpg|jpeg|gif|png|svg)$ {
    expires 365d;
  }

  location ~* .(pdf|css|html|js|swf)$ {
    expires 3d;
  }

此代碼將為不同的文件類型設置過期時間。 請注意,圖像的緩存時間比 HTML、CSS、JS 和其他文件類型長,因為圖像通常保持不變。

之後,您可以添加以下代碼來添加緩存控制標頭:

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

此代碼設置緩存到期的時間。 它告訴您的服務器上述文件類型在 14 天內不會更改。

如果您希望進一步加速 WordPress,請務必查看我們關於如何提高 WordPress 速度和性能的指南。

我們希望本文能幫助您了解如何輕鬆修復 WordPress 中的槓桿瀏覽器緩存警告。 您可能還想查看我們最常見的 WordPress 錯誤及其修復方法的最終列表,以及我們專家挑選的最佳 SEO 工具和插件以獲得更多流量。

如果您喜歡這篇文章,請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。 你也可以找到我們 推特 和臉書。