如何在 2021 年修復 WordPress 中的槓桿瀏覽器緩存

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

介紹

您的網站加載緩慢嗎？ 您是否正在尋找有效的解決方案來解決 WordPress 中的槓桿瀏覽器緩存警告？ 頁面速度是用戶體驗的一個重要方面。 在這篇文章中，我將分享有關如何在 WordPress 中修復槓桿瀏覽器緩存的基本要點。 因此，如果您也面臨這個問題，那麼必須閱讀完整的帖子以便更好地理解。

在用戶的瀏覽器中加載請求的頁面所花費的時間極大地影響了用戶本人留在您的網站上的事實，例如完成銷售。 頁面加載時間取決於幾個因素：瀏覽器緩存就是其中之一。

我們將首先探討槓桿瀏覽器緩存是什麼以及它如何幫助您加快網站速度。 因此，我們將了解如何評估 WordPress 站點是否需要瀏覽器緩存。 最後，我們將研究幾種解決 WordPress 中利用瀏覽器緩存警告的方法，無論是否使用插件。

什麼是槓桿瀏覽器緩存？

緩存是臨時存儲空間。 當訪問者請求您網站上的頁面時，服務器會從數據庫中收集必要的信息，將其組織成 HTML 文檔，並將其提供給瀏覽器。 瀏覽器分析此文檔並下載所有相關資源以查看該頁面。

緩存是將頁面的一部分有效負載存儲在緩存中的過程，以加快未來頁面的加載速度。 緩存可以存在於訪問者的服務器或設備上。

在服務器緩存中，您可以存儲所請求頁面的數據庫查詢和靜態 HTML 響應。

利用瀏覽器緩存是訪問者設備上的臨時存儲利用過程，用於在指定時間段內存儲樣式表、腳本和圖像等資源。

對頁面的後續訪問會導致瀏覽器在每次用戶請求該頁面時重複下載相同的資源。 由於這些靜態資源構成了 WordPress 站點的大量有效負載，因此瀏覽器緩存可以減少頁面加載時間。

是否需要瀏覽器緩存？

網站檢查您的有效負載資源大小的分佈通常會顯示您的資源有多大以及瀏覽器必鬚髮送多少請求才能在顯示您的頁面之前下載它們。 如果您注意到網頁的很大一部分是由靜態文件組成的，您應該考慮緩存您的瀏覽器以提高頁面的速度。

確定是否需要瀏覽器緩存的更自然的方法是使用頁面速度測試工具，例如 GTmetrix。 只需輸入您網站的 URL 即可開始詳細測試。 測試結果將向您展示如何加速您的網站。 如您所見，結果部分中的一個常見警告是利用瀏覽器緩存。

或者，您可以使用 Think with Google，這是一種頁面速度測試工具，可在移動設備上評估您的網站。 該工具的一個重要建議是利用瀏覽器緩存為您的網站。

PageSpeed Insights，另一個用於測試您網站頁面速度的 Google 工具，可能會建議您創建有效的緩存策略以提高頁面速度。 瀏覽器緩存是有效緩存策略的重要組成部分。

在沒有插件的情況下解決 WordPress 中的槓桿瀏覽器緩存警告

如果您不想使用插件，可以更改 Web 服務器設置以修復利用瀏覽器緩存。 在這種情況下，網絡服務器將指示訪問者的瀏覽器將特定資源保存在瀏覽器緩存中。 瀏覽器會將這些文件存儲在本地一段時間，並在後續訪問頁面時使用。

設置網絡服務器以指示訪問者的瀏覽器開始緩存因服務器而異。 在這篇文章中，我們將向您展示如何在兩個最流行的 Web 服務器上啟用瀏覽器緩存：Apache 和 Nginx。

您可以按照以下步驟更正利用瀏覽器緩存：

1. 添加過期標頭：這些標頭告訴瀏覽器何時從服務器請求新版本的資源。
2. 更改緩存檢查標頭：您可以使用這些標頭設置緩存條件。
3. 實體標籤標頭（ETags）的設置：可以識別服務器上的資源與本地文件相比是否發生了變化。

更正 Apache 中的槓桿瀏覽器緩存

1.創建或編輯.htaccess文件

在 Apache 服務器上，您可以在 .htaccess 文件中設置所有必要的參數。 此文件允許您手動配置 Apache 設置。 它是一個簡單的文本文件，用於存儲 Apache 參數並為其所在目錄設置權限和配置。

閱讀更多：頁面搜索引擎優化清單：10 個可操作的優化技巧以提高排名

如果您將.htaccess文件放在網站的前導目錄中，則其規則將應用於您網站的所有頁面。 您還可以將另一個.htaccess文件放在您的一個子目錄中，以僅為該位置設置特定權限。 請注意，較低級別的.htaccess文件會覆蓋根目錄中 .htaccess 文件的設置。

如果您對服務器具有終端訪問權限，則可以遠程登錄以在適當的位置創建一個.htaccess文件（對於站點級瀏覽器緩存規則，這應該是根文件夾）。

或者，如果您使用的是 cPanel 文件管理器，請移至所需位置，然後創建一個.htaccess文件。

如果您已經有一個.htaccess文件，您可以簡單地添加新的瀏覽器緩存規則。

2.添加過期標頭

.htaccess文件中的第一個設置是啟用 expires headers 功能。 將以下行添加到文件中：

過期活動在

之後，您可以使用如下所示的語法為不同的文本文件設置句點：

ExpiresByType 文本/CSS “訪問 1 個月”

ExpiresByType 文本/HTML “訪問 1 個月”

要為圖像設置過期時間，請使用圖像而不是文本斜線和圖像擴展名。

ExpiresByType 圖像/jpeg “訪問 1 個月”

ExpiresByType 圖片/svg “訪問 1 個月”

要設置申請截止日期，請使用應用程序並指定文件擴展名。

ExpiresByType 申請 / pdf “訪問 1 個月”

對於任何特定設置未涵蓋的所有其他文件，請使用定義 ExpiresDefault：

過期默認“訪問 1 個月”。

3.定義緩存策略

接下來，您需要使用緩存檢查設置定義緩存條件。

緩存策略包含三個主要部分：

• 如何緩存資源
• 緩存的位置
• 資源過期前的時間

公共緩存向瀏覽器指示資源可以在任何地方緩存。 相反，私有緩存只允許在客戶端設備上存儲。

例如，登錄用戶的個人資料頁面應該只緩存在客戶端設備上。

相反，博客的主頁也可以緩存在 CDN 上。 您可以通過添加以下規則來設置公共緩存策略：

<IfModule mod_headers.c>

公共緩存控制標頭集

</如果模塊>

您還可以通過將以下過濾器添加到標頭模塊來為不同類型的文件指定不同的標準：

<ifModule mod_headers.c>

<文件匹配“\. (ico | jpeg | jpg | png) $”>

公共緩存控制標頭集

</文件匹配>

<文件匹配“\. (php) $”>

私有緩存控制標頭集

</文件匹配>

</如果模塊>

上面的代碼指定瀏覽器可以在任何地方存儲圖像文件，但 PHP 文件必須存儲在客戶端設備上。

您還可以將過期配置添加到每個文件匹配規則。 到期時間必須以秒為單位定義。 通過將其設置為零，瀏覽器必須在每次加載頁面時請求該文件：

標頭集過期 0

4.禁用Apache中的實體標籤

最後，有必要使用以下代碼禁用實體標籤：

FileETag 無

禁用 ETag 要求瀏覽器依賴緩存條件，並避免每次加載頁面時重新驗證文件。

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

解決 Nginx 中的 Leverage Browser Caching

在 Nginx 中，可以在 /etc/nginx/site-enabled/default 位置找到 nginx.conf 配置文件。

您可以使用以下代碼將 Expires 標頭添加到特定文件類型：

位置〜* \。 (ico | jpeg | jpg | png) $ {

30天到期；

}

您還可以將 Cache-Control 標頭添加到同一代碼塊中：

位置〜* \。 (ico | jpeg | jpg | png) $ {

30天到期；

add_header 緩存控制“公共”；

}

保存配置文件並重啟 Nginx 以使更改生效。

使用插件解決 Leverage Browser Cache

如果您使用 WordPress 的緩存插件，它可能已經支持瀏覽器緩存。

現在讓我們看看如何使用一些最著名的緩存插件來解決利用瀏覽器緩存的問題。

1.WP火箭

WP Rocket 是最快和最受推薦的 WordPress 插件之一，只需單擊幾下即可管理所有速度優化。 WP Rocket 不僅可以讓您解決利用瀏覽器緩存的問題，還可以讓您使用各種技術優化您的網站，例如：

• 靜態文件壓縮 (GZip) – 減少總數據大小（閱讀有關如何在 WordPress 中啟用 GZip 壓縮的完整帖子）
• 啟用文件緩存（包括緩存預加載） - 減輕服務器壓力（並恢復每個頁面的預掃描副本）
• 谷歌字體優化——確保更大量的字體被快速加載，
• 延遲加載——只有當用戶向下滾動到需要圖像的頁面部分時才會對圖像收費
• 縮小和組合——減少文本資源的大小和組合，以更快地將它們交付給最終用戶
• 推遲 JS 的加載——讓頁面快速出現，而不是等待所有資源下載。
• 集成並啟用 CDN 網絡- 以便更快地交付較重的圖像
• DNS 預取– 減少解析第三方內容來源所需的時間

對於不直接參與優化網站的任何人來說，所有這些似乎都難以理解。 但是，實際上，如果您想加速 WordPress，這些都是您需要採取的措施。

我們強烈建議閱讀我們的 WP Rocket 評論，

2.LiteSpeed緩存

LiteSpeed Cache 是一個緩存插件，讓您只需啟用該功能即可解決槓桿瀏覽器緩存問題。 安裝並激活插件並轉到緩存設置。 切換到瀏覽器選項卡並允許瀏覽器的緩存選項。

也可以設置到期時間。 但是請注意，此設置適用於網站上的所有緩存文件。

3. WP最快的緩存

WP Fastest Cache 是另一個具有簡單自定義選項的 WordPress 緩存插件。 免費版本允許您啟用瀏覽器緩存。 轉到設置頁面並選擇瀏覽器緩存複選框。

4. W3總緩存

W3 Total Cache 是另一個廣泛使用的瀏覽器緩存插件。 它允許您自定義各種緩存選項。 安裝後，轉到設置頁面上的緩存瀏覽器部分。

此插件允許您為許多類別的文件設置權限，例如圖像、腳本和样式表。 對於每個組，您可以設置 Expires 標頭、Expires 生命週期和 ETag。

經常問的問題

結論

在這篇文章中，我們探討了頁面速度的重要性以及為什麼要修復 WordPress 中的槓桿瀏覽器緩存。 我們已經看到速度測試工具可以指示您的 WordPress 網站是否需要瀏覽器緩存。 接下來，我們討論瞭如何在不使用插件的情況下配置各種 Web 服務器以啟用瀏覽器緩存。 最後，我們查看了三個流行的插件，它們允許您修復 WordPress 中的槓桿瀏覽器緩存。