如何在 WordPress 中利用瀏覽器緩存？

已發表: 2022-06-25

在本教程中，我們將學習如何利用 WordPress 中的瀏覽器緩存來加速您的網站。

一般來說，加速 WordPress 網站的方法有很多，但是在網站速度優化分析中，瀏覽器緩存是最常見的問題。

您可以使用各種互聯網工具，包括 Google PageSpeed Insights、GTMetrix 和 Pingdom，來跟踪和測試您網站的速度。 它們為您提供準確的發現，並向您展示您的網站需要在哪里工作。 您可能在評估網站速度時看到了“利用瀏覽器緩存”警告。

您還可以閱讀：使用有效的緩存策略服務靜態資產

目錄

什麼是槓桿瀏覽器緩存？

緩存是瀏覽器將網站的可緩存資源保留在其本地系統上的時間長度。

圖片、JavaScript、CSS 和其他資源都在其中。 每次有人看到該網站時，保存在您機器上的可緩存材料都會上傳回來。 因此，網站的加載速度顯著提高。 出於這個原因，人們希望在 WordPress 中使用瀏覽器緩存。

在 WordPress 中利用瀏覽器緩存如何工作？

每當用戶進入某個域時，都會有許多進程在後台運行。

與用戶瀏覽器通信的所有內容都使您的 WordPress 網站可見。 這些網站元素包括腳本、圖形、樣式表、內容等。 必要時，它們必須從網站的服務器傳輸到用戶的瀏覽器。 以下是此過程中的步驟：

  1. 將 URL 輸入到訪問者的瀏覽器中。
  2. 瀏覽器向託管您網站的服務器發出請求（HTTP 請求）。
  3. 用戶在服務器組裝後接收數據。 用戶此時開始體驗放緩。 人們可以最小化紙幣的大小、優化圖像大小和其他措施來阻止這種緩慢。
  4. 瀏覽器現在可以在數據傳輸後最終顯示網站。 當用戶訪問不同的頁面時，重複該過程。 服務器一次接收大量請求可能會導致性能低下。 因此，人們必須優化他們的網站以保持他們的速度。
在 WordPress 中利用瀏覽器緩存

Web 瀏覽器和軟件程序都使用緩存內容。 它會暫時保存在您的本地磁盤上。 術語“Web 緩存”或“HTTP 緩存”指的是這些數據。 每次您訪問同一網站時，瀏覽器都會從您的計算機上傳數據並下載該網站的內容。

您需要使用特定工具來確定您的 WordPress 網站是否有效地利用了瀏覽器緩存。

瀏覽器緩存和服務器緩存的區別

為了減少 Web 服務器上的負載和延遲，服務器端 Web 緩存（對於服務器端緩存，我們始終推薦 WordPress 的 LiteSpeed Cache）通常需要使用 Web 代理來存儲來自它前面的 Web 服務器的 Web 響應。 客戶端的 Web 緩存還可以包括基於瀏覽器的緩存，它保存以前訪問的 Web 內容的緩存副本。

此過程需要使用網絡服務器為您的網站生成緩存網頁。 上述動作是網頁緩存的一個例子，它主要是服務器端的。

您可以通過幾種不同的方式增強服務器緩存系統。 最好的選擇是更新 Apache 的標頭。 下一階段是使用 WordPress 插件，然後添加 CDN。

方法 1：在 WordPress 中手動利用瀏覽器緩存

注意：此方法僅適用於 LiteSpeed Enterprise 或 Apache。

通過在 .htaccess 文件中包含一些代碼，您可以手動利用 WordPress 中的瀏覽器緩存。 對於三個不同的目標，您實際上需要添加三位代碼：

  1. 添加過期標頭
  2. 添加緩存控制標頭
  3. 關閉 ETag

您必須有權訪問您的網站文件才能添加此代碼，您可以通過登錄您的託管帳戶或 Cyber​​Panel 來完成此操作。

轉到您的Cyber​​Panel儀表板

單擊左側菜單中的WordPress ->列出 WordPress

您將進入List WordPress Websites 。 從這裡，單擊您的WordPress 網站標題

這是您的Cyber​​Panel WordPress 管理器。 單擊文件管理器。

在public_html中，您會發現 . htaccess文件。 請注意，只有 LiteSpeed Enterprise 支持htaccess 規則。 OpenLite Speed 不支持它。 右鍵單擊它並單擊CodeMirror

在末尾添加以下代碼。 htaccess文件的內容通過複製和粘貼。 不要以任何其他方式修改文件。

 #Customize expires cache start - adjust the period according to your needs <IfModule mod_expires.c> FileETag MTime Size AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript ExpiresActive On ExpiresByType text/html "access 600 seconds" ExpiresByType application/xhtml+xml "access 600 seconds" ExpiresByType text/css "access 1 month" ExpiresByType text/javascript "access 1 month" ExpiresByType text/x-javascript "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 application/pdf "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresDefault "access 1 month" </IfModule> #Expires cache end

上述代碼指示瀏覽器提供靜態資源的緩存副本，而不是下載新資源。

刷新/過期時間也包含在設置中：

HTML 需要 600 秒。
一個月的 JavaScript 和 CSS
對於圖像，一年

由於過期日期，訪問者不必過於頻繁地下載特定資源。 如有必要，您可以快速更改過期時間。

要建立關於資源如何緩存、緩存在哪里以及過期前的最長期限的瀏覽器緩存策略，我們需要包含緩存控制標頭。 我們不需要重複我們前面已經提到的過期時間。

下面的代碼，然後粘貼它：

 # 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>

電子標籤將被禁用，因此瀏覽器必須使用過期標頭和緩存控制來代替驗證文件。 這是關鍵：

 Turn Etags off <IfModule mod_headers.c> Header unset ETag </IfModule> FileETag None

完成後，點擊保存。

方法 2：使用插件在 WordPress 中利用瀏覽器緩存

一個錯誤可能會徹底毀掉您的網站，因此編輯 .htaccess 文件可能非常危險。 因此，如果您不想承擔任何不必要的風險，可以使用 W3 Total Cache 之類的插件。

W3 總緩存插件

以下是如何使用 W3 Total Cache（最好的插件之一）來利用瀏覽器緩存。

輸入您的WordPress 儀表板

單擊左側菜單中的插件->添加新的

搜索W3 Total cache 。 現在安裝並激活這個插件

性能選項卡將出現在左側菜單中。 單擊左側菜單中的性能->常規設置

向下滾動到瀏覽器緩存並確保其啟用並保存更改

現在點擊左側菜單中的性能- >瀏覽器緩存

確保

  1. 設置過期標頭
  2. 設置緩存控制
  3. 設置實體標籤

已啟用。 保存所有更改。

LiteSpeed 緩存插件

Cyber​​Panel 在每個 WordPress 站點部署中默認為每個用戶提供 LiteSpeed Cache。 如果您不使用 Cyber​​Panel，可以從此處下載。

通過簡單地打開該功能，緩存插件 LiteSpeed Cache 使您能夠利用瀏覽器緩存。

進入您的WordPress 儀表板

單擊左側菜單中的LiteSpeed Cache -> Cache

單擊頂部欄中的瀏覽器選項卡

確保瀏覽器緩存已啟用，然後單擊保存更改

結論

請記住，有時在安裝插件後，您不會立即註意到所做的更改。 CSS/樣式表文件是造成這種延遲的罪魁禍首。 由於您已經保存在計算機上的瀏覽器緩存，您將無法查看所做的更改。 建議使用瀏覽器的隱身功能查看網站，以便在多次修改後正確查看。 使用這個功能不會消耗緩存資源，應該可以清楚的注意到變化。

您選擇利用瀏覽器緩存的方法最終是無關緊要的。 在行動中觀察它是唯一重要的事情。 只要在 WordPress 中利用瀏覽器緩存功能按預期運行，您使用的方法就無關緊要了。 方法沒有對錯之分； 無論您的選擇如何，結果都是一樣的。 無論您決定更改 .htaccess 文件還是使用插件，利用瀏覽器緩存都將縮短加載時間。