Instant Fix WordPress 利用瀏覽器緩存（逐步）

已發表: 2021-07-07

如果您想完全了解如何在 WordPress 中修復利用瀏覽器緩存，請堅持到最後，因為我們有很多東西要分享。

誰不喜歡超快的加載速度？

但不知何故，您發現“利用瀏覽器緩存”正在阻止您的網站快速加載。

然而，我們為此提供了解決方案。

這是大多數人在 Google PageSpeed Insights 中遇到的最常見錯誤。

如果您的目標是在 Google PageSpeed Insights 中獲得 90 以上的分數，那麼您需要解決這個問題。

您需要知道，頁面速度對於在 Google SERP 上排名高以及提供良好的用戶體驗與以往一樣重要。

這篇文章將告訴您 WordPress 利用瀏覽器緩存的方式，以及如何修復 WordPress 中利用瀏覽器緩存的問題。

如果您想完全了解如何在 WordPress 中修復利用瀏覽器緩存，請堅持到最後，因為我們有很多東西要分享。

誰不喜歡超快的加載速度？

但不知何故，您發現“利用瀏覽器緩存”正在阻止您的網站快速加載。

然而，我們為此提供了解決方案。

這是大多數人在 Google PageSpeed Insights 中遇到的最常見錯誤。

如果您的目標是在 Google PageSpeed Insights 中獲得 90 以上的分數，那麼您需要解決這個問題。

您需要知道，頁面速度對於在 Google SERP 上排名高以及提供良好的用戶體驗與以往一樣重要。

這篇文章將告訴您 WordPress 利用瀏覽器緩存的方式，以及如何修復 WordPress 中利用瀏覽器緩存的問題。

所以，讓我們深入研究。

目錄

關於利用瀏覽器緩存 WordPress 的少量信息

簡而言之，利用瀏覽器緩存通過減少 HTTP 請求和提高服務器響應時間來加速頁面加載。

現在，我們所說的緩存是什麼意思？

瀏覽器在本地存儲網站上可用的可緩存資源的時間稱為緩存。

其中包括什麼？

這包括圖像、CSS、JavaScript 等。

當任何人訪問該網站時，已保存在您設備上的可緩存資源會被重新上傳。

網站的加載速度因此明顯提高。 這就是人們想要在 WordPress 中使用瀏覽器緩存的原因。

什麼是顯示實際數據和解決方案的真正平台？

您可以嘗試 Think with Google 來檢查您網站的狀態，如果它加載速度很快或者需要幾秒鐘才能完全加載。

該工具將為您提供如何優化網站以快速加載網站的所有解決方案，並提供完整的報告。

您可以使用的另一個合法工具是 Google 的 PageSpeed Insights 來測試您網站的頁面速度。

它將建議您開發強大的緩存策略來提高頁面速度。

如何利用瀏覽器緩存

如果您擁有或經營一個網站，您應該被告知服務器緩存是指您的網站生成緩存網頁的機制。

這是服務器端； 當用戶通過瀏覽器訪問網站時，會發生瀏覽器緩存。

這與前面的說法完全相反。

此外，當您使用瀏覽器緩存時，您是在告訴服務器資源應該在訪問者的瀏覽器中存儲多長時間。

為了利用瀏覽器緩存，您通常需要識別 HTTP 標頭以指定您網站上各種文件類型的正確到期時間。

如果您想手動輸入代碼或使用 WordPress 插件，將取決於您的 Web 服務器是 Nginx 還是 Apache。

現在，讓我們繼續討論在 WordPress 中利用瀏覽器緩存的方法，無論有沒有插件。

如何在沒有插件的情況下修復 WordPress 上的槓桿瀏覽器緩存？

很多人不喜歡用插件來解決這個問題。

您可以通過更改 Web 服務器上的設置來使用瀏覽器緩存。

然後，如果您這樣做，您的 Web 服務器將告訴訪問者的瀏覽器將這些資源保存到瀏覽器緩存中。

這些文件將由瀏覽器在本地存儲一段時間，並用於後續頁面訪問。

指示 Web 服務器開始緩存訪問者瀏覽器的過程因服務器而異。

Apache 和 Nginx 都是最流行的 Web 服務器。

讓我們開始逐步修復在兩台服務器上利用 WordPress 中的瀏覽器緩存。

  1. WordPress 利用瀏覽器緩存使用 (Apache)

許多共享託管服務使用 Apache，因此如果您的站點有一個 .htaccess 文件，您需要遵循 Apache 代碼說明。

下面介紹如何使用自定義代碼來利用 Apache 服務器上的瀏覽器緩存。

一旦您確認您的服務器在 Apache 上運行，您就可以繼續下一步。

  • 要訪問您的服務器，請登錄 CPanel 或使用 FTP 客戶端。
  • 立即找到您的.htaccess文件。


因為.htaccess 文件可能默認隱藏，您可能需要顯示隱藏文件（dotfiles）。

您的 .htaccess 文件應如下圖所示。

您需要了解，您可以直接在服務器上對其進行編輯，也可以將其導入並在文本編輯器中打開。

此外，您有很多選擇來確定瀏覽器緩存規則，例如：

過期標頭或緩存控制標頭。

讓我們看看兩者。

  • 緩存控制標頭：

打開後，您需要將以下代碼片段添加到您的 .htaccess 文件的頂部：

複製這段代碼：

 # BEGIN Cache-Control Headers <IfModule mod_expires.c> <IfModule mod_headers.c> <filesMatch "\.(ico|jpe?g|png|gif|swf)$"> Header append Cache-Control "public" </filesMatch> <filesMatch "\.(css)$"> Header append Cache-Control "public" </filesMatch> <filesMatch "\.(js)$"> Header append Cache-Control "private" </filesMatch> <filesMatch "\.(x?html?|php)$"> Header append Cache-Control "private, must-revalidate" </filesMatch> </IfModule> </IfModule>
  • 過期標頭：

這些 Expire 標頭可以添加到 your.htaccess 文件的頂部，就像 Cache-Control 標頭一樣。

看代碼格式：

 ## EXPIRES 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 text/css "access 1 month" ExpiresByType text/html "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 1 month" </IfModule> ## EXPIRES CACHING ##

在服務器上設置這些標頭後，您可以輕鬆地從 Chrome 的 DevTools 中查看這些標頭。

只需轉到網絡選項卡，選擇資產，然後查找您添加的標題表單，例如 Cache-Control、Expires 或兩者。

  • 禁用實體標籤：

最後但並非最不重要的一點是，您必須使用以下代碼來停用實體標籤：

FileETag 無

當您禁用 ETags 時，瀏覽器可以使用您的緩存策略，而不是在每次頁面加載時重新驗證文件。

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

  1. WordPress 利用瀏覽器緩存使用 (Nginx)

Nginx 是一個免費的開源網絡服務器，被超過 5 億個網站使用。

與 Apache 一樣，您有幾個選項可以在網站的靜態和動態組件上設置緩存到期時間。

  • “緩存控制”標頭（Nginx）

在您的服務器塊內，通常位於

/etc/nginx/site-enabled/default,

添加以下片段。

 location ~* \.(png|jpg|jpeg|gif)$ { expires 365d; add_header Cache-Control "public, no-transform"; } location ~* \.(js|css|pdf|html|swf)$ { expires 30d; add_header Cache-Control "public, no-transform"; }
  • “過期”標頭（Nginx）

將以下代碼插入您的服務器塊，該塊位於：

/etc/nginx/啟用站點/默認/

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

如何使用插件修復利用 WordPress 上的瀏覽器緩存？

如果您想繞過更複雜的編碼步驟，您可以使用一些優秀的 WordPress 插件來利用瀏覽器緩存。

  1. WP 最快緩存：

WP Fastest Cache 是另一個具有簡單自定義選項的 WordPress 緩存插件。

您可以在免費版中允許瀏覽器緩存。 如上圖，進入設置頁面，勾選瀏覽器緩存複選框。

  1. LiteSpeed 緩存：

LiteSpeed Cache 是一個緩存插件，只需打開它，您就可以利用瀏覽器緩存。

安裝並啟用插件後轉到緩存設置。 轉到瀏覽器選項卡並打開瀏覽器緩存功能。

您還可以指定到期日期。

但是，此設置將應用於您站點上的所有緩存文件。