如何實現採用高效的快取策略提供靜態資源

Google PageSpeed Insights是評估網站效能工具之一。但是，它的一些建議（例如“採用高效的快取策略提供靜態資源”警告資訊）可能會使缺乏經驗的站長感到困惑。

當你對其進行分解時，快取並不難理解。通過一些調整，在網站上實施最佳程式碼，以減少載入時間並提高PageSpeed得分。

在這篇文章中，我們將通過“採用高效的快取策略提供靜態資源”警告資訊進行講解，然後，分享解決此問題的一些技巧。

如何理解採用高效的快取策略提供靜態資源？

為了瞭解“採用高效的快取策略提供靜態資源”警告資訊，先了解一下Google PageSpeed Insights會有所幫助。如果您是該平臺的新手，建議先閱讀完整的指南《如何做到Google PageSpeed Insights測試滿分》一文。

採用高效的快取策略提供靜態資源是Google PageSpeed返回的許多“診斷結果”之一，可作為改善分數的建議，如下所示：

Google PageSpeed Insights之快取策略

Google建議使用瀏覽器快取來減少頁面載入時間並提高效能。簡而言之，快取是指使用者的瀏覽器儲存站點頁面的靜態副本。然後，在隨後的訪問中，可以更快地重新載入此內容，因為瀏覽器不必連線伺服器即可訪問所請求的靜態資源。

但是，每個快取的資源都需要指定的到期期限。這會告訴瀏覽器您網站上的內容何時過時，過期後使用更新的版本替換其快取的副本。

如果您在效能測試結果中看到“採用高效的快取策略提供靜態資源”警告，則可能意味著以下兩種情況之一：

• 您的站點伺服器或第三方伺服器缺少Cache-Control或Expires標頭。
• 存在必需的標頭，但是有效期很短，因此對效能沒有太大影響。

採用高效的快取策略提供靜態資源的具體措施

您可以通過幾種不同的方式來修復WordPress網站“採用高效的快取策略提供靜態資源”警告，具體取決於其原因。您可以嘗試以下三種解決方案。

1. 新增快取控制並過期標頭

有兩個與瀏覽器快取相關的標頭：Cache-Control（快取控制）和Expires（快取有效期）。必須至少存在一個才能為您的站點啟用瀏覽器快取，因為這是瀏覽器確定重新整理資源之前應保留資源多長時間的方式。

確定這是否是導致“採用高效的快取策略提供靜態資源”警告的一種簡單方法是檢視每個資源的詳細資訊。在Google PageSpeed Insights最新版本，您會在“ 快取TTL ”下看到“None”：

在Google PageSpeed Insights中快取TTL列表

又或者快取有效期過短時，最新版的Google PageSpeed Insights也會在“採用高效的快取策略提供靜態資源”警告列表羅列，只是“ 快取TTL ”展示的是快取有效期：

瀏覽器快取資源快取有效期過短

Cache-Control標頭啟用客戶端快取並設定資源的最大使用期限時，Expires標頭僅用於指定快取資源有效期。

Expires在HTTP / 1.1中引入並提供了比Cache-Control更多的選項。它們可用於完成相同的事情，但Expires的資料值是HTTP日期，而Cache-Control max-age允許您指定相對的時間量，以便您可以指定 “請求頁面後X小時”。

HTML Cache控制元件是一個非常類似的問題，並且與快取教程有很好的連結，可以回答你的大部分問題（例如，[http://www.mnot.net/cache_docs/#EXPIRES).)總結一下， 當您需要更多地控制快取的方式時，建議對影象和Cache-Control等靜態資源使用Expires。via itranslater.com

您不必同時新增兩者，因為這可能是多餘的。通常推薦使用較新的Cache-Control。但是，某些Web效能工具（例如GTmetrix）仍會檢查Expires標頭。

如何在Nginx中新增Cache-Control快取控制標頭

要在Nginx中新增Cache-Control標頭，可以將以下內容新增到伺服器的Nginx配置檔案中：

location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
 expires 30d;
 add_header Cache-Control "public, no-transform";
}

這告訴您的伺服器，指定的檔案型別在至少30天內不會更改。

如何在Apache中新增Cache-Control快取控制標頭

如果您使用的是Apache伺服器  ，則可以將以下程式碼新增到.htaccess  檔案中：

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

該程式碼段應新增在“ #BEGIN WordPress”之前或“ #END WordPress”之後。在這種情況下，快取設定為在84,600秒後過期。

如何在Nginx中新增Cache-Control快取有效期標頭

您可以在Nginx中新增Expires頭，方法是將以下內容新增到伺服器NG配置檔案中。在此示例中，您可以看到如何根據檔案型別指定不同的到期時間：

location ~*  \.(jpg|jpeg|gif|png|svg)$ {
    expires 365d;
}

location ~*  \.(pdf|css|html|js|swf)$ {
    expires 2d;
}

如何在Apache中新增Cache-Control快取有效期標頭

您可以通過在.htaccess 檔案中新增以下內容來在Apache中新增Expires標頭：

## EXPIRES HEADER 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 image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "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 image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##

然後，您可以再次通過Google PageSpeed Insights執行網站並檢視瀏覽器快取警告是否仍然存在。

2.Google Analytics統計程式碼瀏覽器快取策略

比較諷刺的是，有時Google Analytics谷歌統計程式碼的JS檔案也會被Google PageSpeed Insights識別為未優化的靜態資源：

谷歌統計JS程式碼

您將無法使用Cache-Control或Expires標頭更改此設定，因為該資源不在本地伺服器上。但是，有一種方法可以通過在本地伺服器存放Google Analytics統計程式碼JS檔案從而實現瀏覽器快取。

不過請注意，Google不支援此方法。

（1）使用外掛CAOS實現瀏覽器快取谷歌統計JS指令碼

如果您想解決上述問題， 可以使用Daan van den Bergh開發的免費外掛-Complete Analytics Optimization Suite（CAOS）：

CAOS 外掛

您可以從WordPress外掛市場下載CAOS，也可以在WordPress儀表板的“外掛”>“安裝外掛”中搜尋安裝。

在本地存放分析指令碼檔案的其他一些好處包括，將對Google的外部HTTP請求從兩個減少到一個，並且可以讓您完全控制檔案的快取。這意味著您可以使用前面提到的快取頭。

首先，請安裝外掛，然後輸入您的Google Analytics（谷歌統計）跟蹤ID。該外掛將Google Analytics（谷歌統計）的必要跟蹤程式碼新增到您的WordPress網站，下載analytics.js 檔案並將其儲存到您的伺服器，並使用中的預定指令碼對其進行更新wp_cron()。

建議也將其設定為頁尾載入中：

CAOS跟蹤程式碼位置設定

溫馨提示：CAOS不能與其他Google Analytics相關的WordPress外掛一起使用。

（2）使用外掛WP-Rocket實現瀏覽器快取谷歌統計JS指令碼

或者，您可以使用WordPress快取外掛WP-Rocket來實現相同的目標：

WP-Rocket外掛

此外掛的Google跟蹤元件可實現本地託管谷歌統計指令碼。只需在WP-Rocket>Add-ons下啟用該功能即可。

WP-Rocket及其元件與其他谷歌統計相關外掛相容。但注意，作為專業外掛它的價格不菲，49美元/年起。

3.儘量減少使用第三方指令碼

有時，由於Google Analytics的指令碼檔案託管在Google伺服器上，因此它可能影響到您Google PageSpeed Insights評分，因為你無法控制其快取機制。

其他第三方指令碼也是如此。如果您是通過WordPress網站管理業務，則很可能會執行其他第三方指令碼來跟蹤轉化，A/B測試等。

這可能包括諸如百度統計，百度站長聯盟，阿里媽媽廣告聯盟，CNZZ統計，51統計，Crazy Egg，Hotjar等指令碼。不幸的是，除非找到在本地伺服器託管這些指令碼的方法，否則您對此無能為力，完全無法控制它們。

理想情況下，如果您想提高Google PageSpeed得分，則應該最大限度地減少使用第三方指令碼。

小結

Google PageSpeed Insights雖然不能絕對地評估您網站的效能，但仍然可以幫助你更好地理解網站效能的瓶頸所在。通過解決“採用高效的快取策略提供靜態資源”下的警告資訊來提高得分，可以幫助網站載入效能上升一個檔次，提升網站使用者體驗。

如果您在Google PageSpeed Insights中看到此警告，則可以通過以下方法解決此問題：

1. 新增Cache-Control或Expires標頭。
2. 利用瀏覽器快取進行Google Analytics統計程式碼指令碼。
3. 儘量減少使用第三方指令碼。