如何使用高效的緩存策略為靜態資產提供服務

GTMetrix和Google PageSpeed Insights等網站提供有關如何提高網站性能的建議。 如果您正在閱讀本文，您至少會意識到每個網站都有機會通過手動優化或使用 10Web Booster 等插件來提高性能。

在這兩個工具中，您可能會看到建議使用有效的緩存策略來提供靜態資產。 此建議是將文件存儲在本地，以便更快地重複訪問該站點。 改進此建議的步驟不會改進初始站點訪問（還有其他改進）。 儘管如此，所有後續訪問都將受益於利用瀏覽器緩存。

應該注意的是，使用高效緩存策略提供靜態資產的建議也被稱為利用瀏覽器緩存或 WordPress 中的瀏覽器緩存。

本文解釋瞭如何使用高效的緩存策略為靜態資產提供服務，以及高效的緩存策略如何提高您網站的性能。

使用 GTMetrix 時，結果頁面上的建議將類似於下面的示例。 它將突出顯示實施瀏覽器緩存可能帶來的節省。

在 Google PageSpeed Insights 中，建議看起來很相似並提供了相似的信息。

這些建議是相似的，因為 GTMetrix 和 PageSpeed Insights 使用Lighthouse工具作為他們的網頁分析框架。 Lighthouse是一個開源工具，旨在提高網站性能，可以以多種不同的格式運行。

讓我們花點時間快速回顧一下，提醒自己網站的性能是如何通過一系列指標來衡量的，其中最重要的是核心網絡生命力。

這是一個摘要：

• Largest Contentful Paint ( LCP ) – 衡量最大對象加載到頁面視口中所需的時間。
• First Input Delay ( FID ) – 這衡量網站的響應能力。 它衡量用戶點擊網站或與網站互動與網站響應之間的時間。
• Cumulative Layout Shift ( CLS ) – 衡量頁面佈局意外移動的程度。

對 LCP 和 FID 產生積極影響的一種方法是使用高效的緩存策略為靜態資產提供服務，這意味著讓瀏覽器知道它可以在本地存儲資源一段時間。

高效的緩存策略將意味著更快的加載時間，因為無論您的網速有多快，從本地緩存加載都將更快並節省時間。

有幾個組件，所以讓我們更詳細地討論它們。

如何使用高效的緩存策略為靜態資產提供服務

要了解如何使用高效的緩存策略為靜態資產提供服務，我們首先需要了解不同的方面，例如靜態資產、緩存和緩存策略。 讓我們在這里分解它們。

什麼是靜態資產？

靜態資產是文件。 當我們在本文中提到靜態資產時，我們指的是預計不會很快或經常更改的單個文件。

圖像、javascript、CSS 文件和字體等文件都可以被視為靜態資產。 對於 WordPress，這些 CSS、javascript 以及圖像和字體文件通常是主題、插件或用戶內容的一部分。

動態生成的文件和頁面不被視為靜態資產。 WordPress 中的一個例子是緩存插件生成的靜態頁面。 這將在下一節中詳細說明。

什麼是緩存？

緩存是將答案存儲在緩存中的過程，以便下次提出相同問題時，可以更快地返回答案。

相關文章

如何安全有效地清除 WordPress 緩存？

通過我們的前 5 名選擇找到最好的 WordPress 緩存插件

如果您以前使用過 WordPress 緩存插件，您可能對整頁緩存很熟悉。 頁面緩存不同於靜態資產緩存。

頁面緩存與靜態資產緩存

本文著眼於專門的靜態資產（文件）緩存。 這不應與全頁緩存相混淆，全頁緩存存儲生成的頁面供以後使用。

頁面緩存和文件緩存都有助於提高站點的性能。 在討論靜態資產緩存時，我們指的是特定資產，例如 javascript、CSS 和圖像文件。

頁面緩存存儲 WordPress 動態生成的頁面的結果，並在特定時間內重新提供該版本。 頁面緩存通常存儲在服務器或邊緣網絡（如 CDN）上，而靜態資產則存儲在用戶機器本地。

緩存關於我們如何使用有效的緩存策略為靜態資產提供服務意味著告訴瀏覽器它可以在瀏覽器本地存儲資源多長時間，然後才能重新下載它。

什麼使靜態資產可緩存？

根據 GTMetrix 的說法，如果資產滿足以下要求，則它是可緩存的：

• 它是字體、CSS、javascript 或媒體文件。
• 它返回 200、203 或 206 HTTP 狀態代碼
• 它沒有明確的無緩存策略

什麼是緩存策略？

我們已經了解了什麼是靜態資產以及緩存資產的含義。

術語新鮮度和陳舊度可以在這裡用來描述緩存文件的狀態。 如果可以從緩存中提取文件，則可以將其稱為fresh 。 當它過期時，它會被稱為stale 。

政策將回答諸如文件被視為新鮮的時間以及如何檢查文件是否新鮮等問題。 該政策規定我們只需要在特定時間後檢查服務器，或者讓我們知道在每次請求時檢查服務器，但只有在文件發生變化時才重新下載文件。

在我們進一步進行之前，還有一些術語有助於理解。

緩存策略如何影響 UX 和 SEO？

用戶體驗 (UX) 和搜索引擎優化 (SEO) 緊密相關。 根據谷歌的說法，研究表明用戶關心網站的響應速度，因此谷歌將響應速度更快的頁面排名更高。

如果有效地緩存靜態資產，由於加載這些資產所需的時間減少，頁面將呈現得更快。 時間的減少導致核心網絡生命力（例如 LCP 和 FID）的改進，並最終導致更高的搜索引擎排名。

您可以在此處閱讀有關核心網絡生命力如何影響頁面排名的更多信息。

如何使用有效的緩存策略問題修復服務靜態資產

手動修復

使用高效緩存策略提供靜態資產不是 WordPress 特定的設置，您可以通過修改網絡服務器配置文件或使用 10Web Booster 託管等插件來手動設置它，以確保您的站點配置了優化的緩存設置。

本節將介紹直接編輯 Web 服務器的配置文件以在服務器上啟用緩存控制和過期 HTTP 標頭，以便在它提供靜態資產時在響應中應用 HTTP 標頭。

當請求資源時，Web 服務器會在所謂的 HTTP 標頭中響應資源和一些額外信息。 將 HTTP 標頭視為有關連接的元數據。 在緩存的情況下，HTTP 標頭Cache-Control和Expires控制我們如何緩存資產。

緩存控制標頭包含有關是否和/或如何緩存靜態資產的說明。 緩存控制有很多指令，所以讓我們了解一些最流行的指令。

以下是緩存控制標頭的一些示例。

示例：將資產緩存 7 天
Cache-Control: max-age=604800

示例：最多可在共享緩存中存儲 7 天
Cache-Control: public, max-age=604800

示例：可以存儲，但必須在每次請求時重新驗證
Cache-Control: no-cache

示例：無法緩存
Cache-Control: no-store

cache-control header 較新並且有更多選項，但在不支持 cache-control 的情況下，expires HTTP header 完成相同的 header 任務並指示資產在需要重新驗證之前有效多長時間。 （請注意，Cache-Control 標頭中的 max-age 指令優先於 Expires）
Expires: Wed Feb 13 21:01:38 CST 2023

直接修改服務器配置

首先，讓我們看看“艱難的方式”，以便我們了解當我們使用其他工具和服務時會發生什麼，這些工具和服務使我們更容易。

阿帕奇

在 Apache HTTP 服務器中，可以將以下代碼片段添加到站點定義或 .htaccess 文件中。

在解釋這個片段時，它說擴展名與 .ico 或 .pdf 等匹配的任何資產都將為該資產設置 Cache-Control 標頭。

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
    Header set Cache-Control "max-age=3600, public"
</filesMatch>

對於 Apache，許多託管服務提供商將為您提供向 .htaccess 文件添加指令的選項。 請注意，雖然這是添加到服務器配置的一種簡單方法，但已知使用 .htaccess 文件會在服務器級別產生負面性能影響。

Nginx

在 Nginx 中，可以將此片段添加到服務器塊。

在解釋這個片段時，它說任何擴展名與 .ico 或 .pdf 等匹配的資產都將同時設置過期和緩存控制標頭。

location ~* \.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$ {
    expires 1h;
    add_header Cache-Control "public, no-transform";
}

對於 Apache 和 Nginx，我們展示瞭如何修改/添加標頭。 我們展示了用於緩存的特定標頭，但該方法可用於任何其他形式的緩存。

使用 WordPress 插件修復

如果以上感覺很多，那是因為它確實如此。 修改服務器配置並及時更新手動更改既費時又容易出錯。

10Web Booster 免費計劃可以配置 Apache 為靜態資產添加標頭，它還為緩存的網頁添加標頭。 如果您還沒有使用 10Web 託管並且您的主機使用 Apache，這是開始實施高效緩存策略的好方法。

如果您需要更多選項或對 HTTP 標頭的更多控制，您可以使用 10Web Booster Pro。 10Web Booster Pro 利用其 Cloudflare。 當您使用 Cloudflare 時，它會將緩存控制標頭添加到您的靜態資產和緩存頁面。 這繞過了任何服務器配置或限制，因為您的訪問者直接從 Cloudflare 獲得文件。

使 10Web Booster 插件成為此處最佳選擇的原因是它可以自動完成所有這些工作。 您不需要管理任何服務器配置或 .htaccess 文件。

或者，如果您使用 10Web Hosting，它會自動實現緩存，您無需擔心為靜態資產添加標頭。

仍然無法解決問題？ 試試這兩個技巧

如果您已實施上述步驟，並且您仍然看到具有高效緩存策略的服務靜態資產仍顯示在您的報告中，那麼您可以嘗試以下幾種方法。

驗證文件是否已緩存

如果 GTMetrix 和 PageSpeed 仍然報告您應該使用緩存策略提供靜態資產，您可能需要驗證您的實現是否確實進行了預期的更改。

在大多數瀏覽器中，有一種簡單的方法可以驗證文件是否來自緩存。

在 Chrome 中，在視圖和開發人員下，選擇開發人員工具：

在“網絡”選項卡下，您將能夠識別來自（磁盤緩存）或（內存緩存）的文件。 磁盤緩存和內存緩存的區別是內存在瀏覽器關閉時消失，而磁盤在瀏覽器關閉時仍然存在。

增加緩存時間

根據 Lighthouse 的統計數據，高效的緩存策略是緩存命中率與未命中率高的策略，這意味著大多數靜態資產都設置了 max-age 或 expires。 對於正在生產或不經常更改的站點，建議最長使用期限為三個月甚至一年。

他們建議開始一個大約三個月（大約 7890000 秒）的策略，如果您已經設置了這個，那麼如果您的網站是實時的，那麼將 max-age 增加到一年或更長時間可能是值得的。

結論

能夠使用高效的緩存策略為靜態資產提供服務可以提高網站性能的速度。

本文介紹了什麼是靜態資產、什麼是 HTTP 標頭，並研究瞭如何啟用和驗證緩存標頭是否就位。

我們研究了通過修改服務器配置手動啟用標頭的具體細節，以及我們如何使用 10Web Booster 等 WordPress 插件使其更容易，並利用 10Web 與 Cloudflare 的集成來訪問設置緩存控制 HTTP 標頭。

10Web Booster 不僅僅是一個緩存插件。 您可以在這篇10Web Booster 文章中閱讀更多關於許多緩存和速度優化功能的信息。

常問問題