如何修復網站測速中的“指定快取驗證器”警告問題

指定快取驗證器

您是否在WordPress網站上的PingdomGTmetrixGoogle PageSpeed Insights中看到“指定快取驗證器(Specify a Cache Validator)”警告?這是因為缺少HTTP快取標頭,這些標頭應該包含在每個源伺服器響應中,因為它們都驗證並設定了快取的長度。如果沒有找到標頭,它每次都會為資源生成一個新的請求,這會增加伺服器的負載。 使用快取標頭可確保 不必從伺服器載入後續請求,從而為使用者節省頻寬並提高效能。

指定快取驗證器警告

指定快取驗證器警告

Pingdom的警告指出:

以下資源缺少快取驗證器。未指定快取驗證器的資源無法有效重新整理。指定Last-Modified或ETag標頭以啟用以下資源的快取驗證。

按照有關如何解決“指定快取驗證”的警告下面的步驟。

修復“指定快取驗證器”警告

關於此警告需要注意的第一件事是,您只能針對伺服器上的請求修復此問題。如果您有3rd方請求,您會看到此內容,則您無能為力,因為您無法控制他們的Web伺服器。儘管隨時與他們分享這篇文章。請記住,使用Pingdom,您可能需要多次執行測試。可能是第一次出現警告,第二次消失。當您第一次執行該工具時,它會從伺服器啟動資產的快取。

有四種不同型別的標題可以以不同的方式用於修復此警告。這可能會讓人有點困惑,但我們將嘗試儘可能簡單地解釋它。

驗證快取的標頭

前兩個標頭是last-modifiedETag。這些標頭可幫助瀏覽器確定自上次請求以來該檔案是否已更改。或者更確切地說,他們驗證快取。

1. 上次修改

最後修改標頭通常自動從伺服器傳送。這是一個您通常不需要手動新增的標題。傳送它是為了檢視自上次請求以來瀏覽器快取中的檔案是否已被修改。您可以在Pingdom中檢視header請求或使用Chrome DevTools檢視最後修改的header的值。

最後修改的標題

最後修改的標題

2. ETag

ETag的頭也很類似Last-Modified頭。它還用於驗證檔案的快取。如果您執行的是Apache 2.4或更高版本,則ETag標頭已使用FileETag指令自動新增。就NGINX而言,自2016年以來,ETag標頭預設啟用。

ETag標頭

ETag標頭

您可以使用以下程式碼在NGINX中手動啟用ETag標頭

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
etag on
etag on
etag on

決定快取長度的標頭

接下來的兩個標頭是Cache-ControlExpires。這些標頭有助於確定檔案在從伺服器獲取新副本之前應在快取中保留多長時間。請記住,要修復您在Pingdom或GTmetrix中看到的警告,您需要確保您有一個既可以驗證快取又可以確定快取長度的標頭。

3. 快取控制

Cache-Control是由不同指令組成的標頭,允許您定義快取的長度。一些最常見的指令包括:

  • max-age:定義檔案應該被快取的時間。
  • public: 允許任何快取公開儲存響應。
  • private:只能通過瀏覽器訪問檔案快取。

快取控制頭

快取控制頭

在上面的示例中,我們可以看到資產正在使用max-age指令。604800秒等於7天的快取。要在Apache中進行配置,只需將以下程式碼新增到您的 .htaccess 檔案中。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=604800, public"
</filesMatch>
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"> Header set Cache-Control "max-age=604800, public" </filesMatch>
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=604800, public"
</filesMatch>

要在NGINX中配置它,只需將以下程式碼新增到您的配置檔案中。所有NGINX配置檔案都位於該/etc/nginx/目錄中。主要配置檔案是/etc/nginx/nginx.conf.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
add_header Cache-Control "public";
}
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ { add_header Cache-Control "public"; }
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
 add_header Cache-Control "public";
}

要了解有關不同指令的更多資訊,請檢視這篇關於Cache-Control的深入文章  。

4. 過期

最後你有expires標頭。根據這篇Google Developers文章,HTTP Caching : Cache-Control標頭被定義為HTTP/1.1規範的一部分,並取代了以前用於定義響應快取策略的標頭(在本例中為Expires標頭)。所有現代瀏覽器都支援Cache-Control,因此這就是您所需要的。但是,如果您同時擁有兩者,則不會有任何傷害,但請記住,只會使用一個。Expires標頭使用實際日期,而Cache-Control標頭允許您指定到期前的時間量。

過期標題

過期標題

要在Apache中新增Expires標頭,只需將以下程式碼新增到您的 .htaccess檔案中。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
## 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 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 7 days"
</IfModule>
## EXPIRES HEADER CACHING ##
## 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 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 7 days" </IfModule> ## EXPIRES HEADER CACHING ##
## 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 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 7 days"
 </IfModule>
 ## EXPIRES HEADER CACHING ##

確保在諸如mod_rewrite、GZIP等內容下方新增Expires標頭塊。在檔案底部是最安全的。

在.htaccess中新增過期標頭

在.htaccess中新增過期標頭

要在NGINX中新增Expires標頭,只需將以下程式碼新增到您的配置檔案中。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 7d;
}
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ { expires 7d; }
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
    expires 7d;
}

在NGINX上的很多情況下,Cache-Control標頭和Expires標頭只是一起使用,即使這在技術上不是必需的:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 7d;
add_header Cache-Control "public";
}
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ { expires 7d; add_header Cache-Control "public"; }
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
    expires 7d;
    add_header Cache-Control "public";
}

大多數3rd方CDN提供商,例如KeyCDN和Cloudflare,也會在交付您的資產時自動新增這些標頭。如果您看到警告,則可能是您的主機執行的軟體過時或伺服器配置錯誤。我們通常在共享主機上看到這種情況。或者,您可能正在設定自己的伺服器,在這種情況下,可能尚未新增上述某些標頭。

如果一切順利,並且您沒有任何未正確使用標頭的3rd方請求,您應該會使用Pingdom等網站速度測試工具(如下所示)看到您的分數有所提高。

修復了指定快取驗證器警告

修復了指定快取驗證器警告

評論留言