使用有效的緩存策略服務靜態資產(3 種方法)

已發表: 2022-04-12

當您使用有效的緩存策略提供靜態資產時,用戶的瀏覽器將在本地存儲這些文件,並且加載頁面所需的時間更少。 通常,一旦頁面被加載,就必須下載該頁面的所有資源,例如 HTML、CSS、JavaScript 和圖像。

瀏覽器緩存允許瀏覽器從其本地緩存中檢索靜態資源,例如 CSS、JavaScript 和圖像。 因此,頁面加載速度更快。 緩存內容意味著對頁面的後續訪問將比用戶第一次訪問更快,但在第一次訪問時不會。

目錄

什麼是緩存?

緩存是計算中的高速數據存儲層,它保存一部分通常是臨時的數據,以便可以比訪問數據的主存儲位置更快地處理對該數據的後續請求。 緩存允許您快速重用以前檢索或計算的數據。

緩存實際上是如何工作的?

緩存中的數據通常保存在 RAM(隨機存取存儲器)等快速訪問硬件中,但也可以與軟件組件結合使用。 緩存的基本目標是通過消除聯繫其後面較慢的存儲層的需要來加速數據檢索。

與存儲完整和持久數據的數據庫相比,緩存通常會臨時存儲部分數據。

緩存的優點

讓我們來看看緩存的一些優點。

提高應用程序的性能

從內存緩存中讀取數據的速度非常快,因為內存比磁盤(磁性或 SSD)(亞毫秒)快幾個數量級。 這種顯著更快的數據訪問提高了應用程序的整體性能。

應減少後端負載

通過將部分讀取負載從後端數據庫轉移到內存層,緩存可以減輕數據庫的壓力,使其在重負載下不會遭受性能低下甚至在尖峰下崩潰。

應消除數據庫中的熱點

許多應用程序往往比其他應用程序更頻繁地檢索數據子集。 因此,數據庫中可能會出現熱點,您可能需要根據最常用數據的吞吐量要求過度配置其資源。 對於頻繁訪問的數據,內存緩存可減少過度配置要求,同時提供快速、可預測的性能。

降低數據庫成本

每秒輸入/輸出操作(IOPS)可以由單個緩存實例執行,允許它替換多個數據庫實例並顯著降低成本。 如果主數據庫按數據量收費,這一點至關重要。 在某些情況下可能會有很大的價格差異。

可預測的性能

處理應用程序利用率的激增是現代系統中的一個普遍問題。 增加的數據庫負載會導致更長的數據檢索時間,從而使整體應用程序性能不可預測。 這個問題可以通過使用高吞吐量的內存緩存來解決。

增加閱讀人數(IOPS)

除了減少延遲之外,內存系統的請求率 (IOPS) 比類似的基於磁盤的數據庫要高得多。 當用作分佈式側緩存時,單個實例每秒可以滿足數百甚至數千個請求。

什麼是資產緩存?

緩存是一個簡單的概念。 當瀏覽器下載資產時,它使用服務器的策略來確定是否應該在後續訪問時再次下載它。 如果服務器不提供策略,瀏覽器默認,這通常意味著緩存該會話的文件。

什麼是靜態資產緩存?

指定瀏覽器應臨時保留或緩存資源的時間。 對該資源的任何後續請求都來自瀏覽器的本地副本,而不是來自網絡。

每當您的站點訪問者獲取尚未在瀏覽器或服務器中緩存的內容的新版本時,您就使用了低效的緩存策略。 實際上,您可能正在為他們提供緩存和隨時可用的保存內容。

另請閱讀:如何修復 WordPress 中損壞的永久鏈接

什麼是有效的緩存策略?

如果您的靜態文件沒有更改(或者您有可接受的緩存清除機制),我們建議您將緩存策略設置為 6 個月或 1 年。

全局 CSS/JS 文件、徽標、圖形等元素在已完成的網站上很少更改,因此 6 個月或一年是可以使用的公平緩存到期時間。

當然,如果你經常修改上述靜態文件,你可以選擇更短的緩存過期時間,只要大於 3 個月。

使用高效的緩存策略服務靜態資產

有多種方法可以使用高效的緩存策略來服務靜態文件,我們將討論 3 種方法

  1. 如果您使用的是 LiteSpeed Enterprise 或 Apache,請使用 .htaccess 文件
  2. 使用 LiteSpeed 緩存
  3. 使用 W3 Total Cache 插件

在 Apache 和 LiteSpeed Enterprise 上使用 .htaccess 文件提供靜態資產

注意:如果您使用的是 OpenLiteSpeed 或 NGINX,此方法將不起作用。

登錄到您的 WordPress 儀表板

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

搜索“文件管理器”。 安裝並激活插件

單擊左側菜單中的“文件管理器”

在 public_html 文件夾中,右鍵單擊 .htaccess 並單擊重命名

更改文件名 (.htaccess-error)

單擊頂部的“新文件”圖標

將文件命名為“.htacess”

粘貼以下代碼並保存並關閉

<IfModule mod_expires.c> ExpiresActive On # CSS, JavaScript ExpiresByType text/css "access plus 1 year" ExpiresByType text/javascript "access plus 1 year" ExpiresByType application/javascript "access plus 1 year" # Fonts ExpiresByType font/ttf "access plus 1 year" ExpiresByType font/otf "access plus 1 year" ExpiresByType font/woff "access plus 1 year" ExpiresByType font/woff2 "access plus 1 year" ExpiresByType application/font-woff "access plus 1 year" # Images ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/webp "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" ExpiresByType image/x-icon "access plus 1 year" # Video ExpiresByType video/webm "access plus 1 year" ExpiresByType video/mp4 "access plus 1 year" ExpiresByType video/mpeg "access plus 1 year" # Others ExpiresByType application/pdf "access plus 1 year" ExpiresByType image/vnd.microsoft.icon "access plus 1 year" </IfModule>

使用 LiteSpeed Cache 提供靜態資產

您需要安裝並激活 LiteSpeed Cache 插件,安裝後,請按照以下指南進行操作:

  • 轉到您的 WordPress 儀表板
使用高效的緩存策略服務靜態資產
  • 單擊左側菜單中的 LiteSpeed Cache -> Cache
  • 單擊頂部的“瀏覽器”選項卡
  • 打開“瀏覽器緩存”切換
  • 點擊“保存更改”

使用 W3 Total Cache 提供靜態資產

首先安裝並激活 W3 Total Cache 插件,然後按照以下指南進行操作。

  • 轉到您的 WordPress 儀表板
  • 單擊左側菜單中的性能 -> 瀏覽器緩存
  • 向下滾動到“媒體和其他文件”。 將“Expires Header Lifetime”更改為至少 15552000 秒(180 天)。
  • 點擊“保存所有設置”

結論

當您為靜態資產提供有效的緩存策略時,用戶的瀏覽器會將這些文件保存在本地,從而減少頁面加載所需的時間。 頁面的所有資源,如 HTML、CSS、JavaScript 和圖片,必須在加載後立即下載。