利用 WordPress 中的瀏覽器緩存來優化頁面加載時間

WordPress 網站用戶總是在尋找開箱即用的東西，並且通過實現 90+ 谷歌 PageSpeed Insights 得分基準是很有可能的。 一般來說，有幾種技術可以加速 WordPress 網站，但其中，瀏覽器緩存是網站速度優化分析中最常見的問題。

要監控和測試您網站的性能，您可以使用許多在線工具，例如 Google PageSpeed Insights、GTMetrix 和 Pingdom。 它們提供準確的結果並幫助您了解您的網站需要改進的地方。 在測試網站性能時，您可能收到了“利用瀏覽器緩存”的警告通知。

今天，我們將討論如何解決這個問題。 所以，讓我們不要浪費時間深入研究。

什麼是瀏覽器緩存以及它是如何工作的？

每當有人訪問您的網站時，瀏覽器都會發送請求以從服務器加載資源，例如 HTML、腳本、圖像、CSS 等。 然後服務器響應瀏覽器的請求。 根據請求的資產大小和服務器處理時間，響應可能需要一些時間來響應。 它最終會導致服務器負載增加並減慢用戶端的網站速度。

在這種情況下，瀏覽器緩存效果最好。 它將靜態內容存儲在用戶瀏覽器上，這是訪問者第一次訪問網站時的內容。 如果您的網站沒有正確配置瀏覽器緩存，並且您正在使用上述任何一種性能測試工具測試您的網站速度，該工具肯定會顯示一條警告消息以利用瀏覽器緩存。

根據 Google 的說法，服務器響應應在標頭中包含以下兩個標籤：

Cache-Control定義了瀏覽器和其他中間緩存可以緩存單個響應的方式和時間。

ETag提供了一個由瀏覽器自動發送的重新驗證令牌，以檢查資源自上次請求以來是否發生了變化。

什麼是利用瀏覽器緩存？

簡而言之，利用瀏覽器緩存有助於減少 HTTP 請求以更快地加載頁面並縮短服務器響應時間。

讓我們看一個活生生的例子。 我使用 Think with Google 測試了我的網站，結果如下。

讓我們通過 Google PageSpeed Insights 工具對其進行測試。

好的，您可以看到我的網站的整體性能非常好。 但是，它還有改進的餘地。 它表明可以緩存我的內部 URL。

修復“利用瀏覽器緩存”警告

要修復“利用瀏覽器緩存”警告，您必須執行以下兩個步驟。

1. 更改請求標頭以使用緩存
2. 優化緩存策略

1. 更改請求頭以使用緩存

提高網站速度和響應的一種方法是更改​​請求標頭以使用緩存。 我們將向我們的 WordPress .htaccess 文件添加幾行代碼。

注意： .htaccess 是網站的控制室。 如果配置不正確，它可能會在您訪問時破壞整個站點！ 了解如何使用 .htaccess 文件保護您的 WordPress 。

要在 WordPress 中利用瀏覽器緩存，請訪問 WordPress 安裝的主目錄，搜索 .htaccess 文件並使用任何代碼編輯器打開它。 只需將以下幾行粘貼到 WordPress .htaccess 文件的頂部。

 ##過期緩存##

<IfModule mod_expires.c>

過期激活
ExpiresByType image/jpg "訪問 1 年"
ExpiresByType 圖像/jpeg“訪問 1 年”
ExpiresByType 圖像/gif“訪問 1 年”
ExpiresByType 圖像/png“訪問 1 年”
ExpiresByType text/css "訪問 1 個月"
ExpiresByType text/html “訪問 1 個月”
ExpiresByType 應用程序/pdf“訪問 1 個月”
ExpiresByType text/x-javascript “訪問 1 個月”
ExpiresByType 應用程序/x-shockwave-flash “訪問 1 個月”
ExpiresByType 圖像/x 圖標“訪問 1 年”
ExpiresDefault "訪問 1 個月"

</IfModule>

##過期緩存##

2.優化緩存策略

加快網站響應時間的第二步是優化緩存策略。 上面的代碼描述了文件類型及其過期時間。 您想在用戶的瀏覽器緩存中存儲特定靜態內容的時間完全取決於您。 如果您的靜態內容（如圖像）是長期的。 我建議你設置它們一年。 但是，您懷疑近期可以更改的內容，建議您將到期日期設置為至少一個月。

緩存控制

如果上述方法無法在您的服務器上運行，我們還有另一種替代方法可以幫助您使用緩存控制來設置緩存到期時間。 您所要做的就是將以下幾行複制並粘貼到 .htaccess 文件的頂部。

 # 1 個月大多數靜態資產

<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
標頭集緩存控制“max-age=2592000, public”

</filesMatch>

與上一步相同，上面的代碼描述了不同文件類型的過期和緩存策略。

注意： 這是可以消除警告的最小值。 如果到期時間小於這個，你可能還會看到槓桿瀏覽器警告，建議增加到期時間。

正確設置 .htaccess 文件後，我們現在將對其進行測試。 那麼，讓我們來測試一下！

並且“利用瀏覽器緩存”警告已得到修復。

WordPress 利用 Google Analytics 的瀏覽器緩存

如果您正在使用任何用於 Google Analytics 的 WordPress 插件，您仍然可能會收到利用瀏覽器緩存的警告，無論您是否正確設置了所有內容。

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

有兩種方法可以修復 Google Analytics 的利用瀏覽器緩存警告。

1. 本地：您可以創建analytics.js和/或ga.js的本地副本（您處理的任何文件都可以利用瀏覽器緩存）。 請注意，Google 不推薦這種方法。
2. 插件：使用完整的分析優化套件 (CAOS) WordPress 插件，該插件在本地託管您的 Google Analytics 文件並使用wp_cron()保持更新。

仍然看到槓桿瀏覽器緩存警告？

正確設置所有內容後，您可能仍會看到 Google 建議利用瀏覽器緩存，如下圖所示。

如您所見，上述文件是第三方集成。 這些在我們的服務器上不存在。 除了刪除它們之外，我們對它們無能為力。 所有第三方集成都可能在速度測試工具中導致此警告。

我是 Cloudways 客戶，這對我有什麼好處？

如果您是 Cloudways 優化的 WordPress 託管客戶，那麼您應該拋開對在線速度測試工具中彈出 WordPress 利用瀏覽器緩存警告的擔憂。 因為 Cloudways 自己處理這個問題。 您可以通過簡單地導航到Server → Settings & Packages → Advanced ，向下滾動並查找NGINX – Static Cache Expiry來更改到期時間。 默認值為 43200 分鐘，相當於 30 天。

利用 W3 Total Cache 的瀏覽器緩存

上述方法是手動刪除槓桿瀏覽器緩存警告的方法。 如果您使用的是W3 Total Cache等緩存插件，則需要通過導航到Performance → General Settings來啟用瀏覽器緩存。

然後導航到瀏覽器緩存並標記下面的五個複選框。

向下滾動一點以設置 CSS 和 JSS 文件的到期時間。 默認值為 31536000，相當於 365 天。 您可以將其更改為您所需的時間範圍。

再向下滾動一點以設置 HTML 和 XML 的到期時間。

要更改媒體和其他文件的默認值，請向下滾動一點並設置到期時間。 默認值為 31536000，相當於 365 天。

最後的想法

利用瀏覽器緩存有助於提高 Web 性能測試分數。 請記住，這些設置僅用於在 WordPress 用戶中建立基本準則和理解。 除此之外，還有許多技術可以幫助個人在短時間內建立一個更快的網站，其中最重要的是選擇最快的 WordPress 託管。

如果您有任何疑問，請隨時在下面的評論部分提問。 我很樂意回答。

經常問的問題

什麼是緩存文件？

緩存文件是下載用於臨時使用的文件，就像您在特定時間段訪問網站一樣。 下次您訪問同一個網站時，由於已經下載了緩存文件，它的加載速度會更快。

緩存數據重要嗎？

是的，緩存數據對於速度很重要。 幾乎每個網站都使用它。 但是，如果您處於網站的開發階段，緩存可能會出現問題，因為它將顯示已存儲的版本。

瀏覽器的緩存中有什麼？

瀏覽器緩存是瀏覽器下載的用於顯示網站的文件的臨時存儲。 它包括 HTML、層疊樣式表 (CSS)、JavaScript、圖像和任何其他可以緩存的多媒體內容。

為什麼需要清除瀏覽器緩存？

當您訪問的網站有更新時，您可能會看到一些舊內容，這是因為您沒有清除瀏覽器緩存。

如何清除瀏覽器緩存？

有許多 WordPress 緩存插件可以讓您清除瀏覽器緩存。 如果沒有，您可以按照各自瀏覽器的指南手動清除緩存。

刪除緩存數據可以嗎？

這取決於！ 緩存有時會變得混亂，您必須清除緩存。 每當您看到部分加載的元素和/或格式錯誤的頁面、錯誤位置的圖片等時，每個人首先想到的就是清除緩存。 通過清除緩存，您將丟失所有存儲的數據，瀏覽器將獲取新鮮內容。