如何設定WordPress靜態資源瀏覽器快取

如果您有使用網站測速效能測試深入淺出教程一文中提及的15個網站測速工具對網站進行測速,相信對瀏覽器快取這個概念不會陌生。個人尤其推薦其中Google PageSpeed Insights網站效能測試工具。

通過修復瀏覽器快取警告,能夠在一定的程度上加速您的WordPress網站併為網站訪問者提供更好的體驗。在本教程中,我們將再一次介紹如何處理WordPress網站在網站效能測試中的瀏覽器快取警告。

fix-leverage-browser-caching-warning-in-wordpress-og-1

什麼是WordPress瀏覽器快取?

瀏覽器快取是一種提高網站載入速度的方法。當一個網頁載入時,所有的檔案將被單獨載入。

這會在瀏覽器和WordPress託管伺服器之間建立多個請求,從而增加網頁載入時間。

啟用瀏覽器快取後,Web瀏覽器會在本地儲存您的網頁副本。這允許瀏覽器在使用者訪問您網站上的第二頁時更快地載入常見檔案,如樣式表、Logo、影象等。

site-speed-test-results

這減少了整體伺服器負載,因為對實際伺服器的請求會減少,因此您的網站效能將得到改善。

在哪裡檢視WordPress瀏覽器快取警告?

利用瀏覽器快取警告意味著您沒有啟用瀏覽器快取,或者您的快取設定可能錯誤。

當您執行網站速度測試,您會收到一份報告,其中顯示了您可以修復哪些方法來加速WordPress。

如果您的網站當前未使用瀏覽器快取,那麼您將收到啟用瀏覽器快取的警告。

這就是從頁面速度洞察工具檢視結果時的樣子。

leverage-browser-caching-warning

有時您會收到一條警告,指出您的高效快取策略不起作用。

這兩個警告都是指您的瀏覽器快取設定錯誤。

effecient-cache-policy-warning

利用瀏覽器快取意味著啟用和自定義快取規則以加速您的網站。

下面我們將介紹使用兩種不同的方法輕鬆修復WordPress瀏覽器快取警告。

方法 1. 使用WordPress外掛WP Rocket修復瀏覽器快取警告

WP Rocket是市場上最好的WordPress快取外掛之一。它非常適合初學者,即使不瞭解複雜的快取和速度術語,也可以幫助您優化站點以提高速度。

wp-rocket-plugin

開箱即用,所有推薦的快取設定都將真正加速您的WordPress網站

要使用WP Rocket修復瀏覽器快取警告,您所要做的就是安裝並啟用外掛。

就是這樣。

WP Rocket將自動啟用瀏覽器快取並使用正確的規則修改您的檔案.htaccess

方法 2. 通過新增程式碼來修復瀏覽器快取警告

第二種方法涉及向WordPress檔案新增程式碼。

這種方法對初學者不太友好,所以請僅在您確切知道自己在做什麼時才遵循此方法。對於大多數站長,我們建議使用方法 1。

話雖如此,讓我們來一起看看如何通過向WordPress新增程式碼來修復瀏覽器快取警告。

注意:在您自定義您的WordPress程式碼之前,我們建議您備份您的 WordPress 網站。有關更多詳細資訊,請參閱有關如何備份和恢復WordPress網站

確定您的網站是執行Apache還是 Nginx?

首先,您需要確定您的網站是使用Apache還是Nginx伺服器。

為此,請在新選項卡或視窗中開啟您的網站。然後,右鍵單擊並選擇“Inspect(檢查)”選項。

right-click-and-inspect

接下來,單擊頁面頂部的“Network(網路)”選項卡。

您可能需要重新整理頁面才能載入結果。

click-network-item

之後,在“Name(名稱)”列中單擊您的域名。

它應該在頁面的頂部。

click-website-url

然後,在“Response Headers(響應標頭)”部分,您將看到一個名為“server(伺服器)”的專案,其中顯示了伺服器的型別。在這種情況下,該站點在 Apache 伺服器上執行。

find-server-name

在Apache中新增快取控制和過期標頭

要使用Apache伺服器修復瀏覽器快取警告,您需要向.htaccess檔案中新增程式碼。

要編輯此檔案,您需要使用FTP客戶端或主機的檔案管理器工具連線到您的WordPress伺服器帳戶。

連線後,您可以在網站的根資料夾中找到.htaccess檔案。

htaccess-ftp-example

如果找不到,請不要擔心。有時可以隱藏此檔案。有關更多詳細資訊,請閱讀瞭解為什麼在WordPress網站上找不到 .htaccess 檔案

接下來,您需要新增快取控制和/或過期標頭以開啟瀏覽器快取。這會告訴 Web 瀏覽器在刪除網站資源之前應將其儲存多長時間。

cache-control標頭向Web瀏覽器提供了有關如何進行快取的特定詳細資訊。

expires標頭啟用快取並告訴Web瀏覽器它應該在刪除特定檔案之前儲存多長時間。

您可以將以下程式碼新增到您的.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 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 3 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 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 3 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 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 3 days" 
</IfModule> 
## EXPIRES HEADER CACHING ##

 

此程式碼根據檔案型別設定不同的快取到期日期。

之後,您可以新增以下程式碼以啟用快取控制:

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

此程式碼設定快取到期的時間。在上面的示例中,快取將在90,000秒後過期。

之後,Web瀏覽器將請求檔案的新版本。

在Nginx中新增快取控制和過期標頭

如果您使用Nginx Web伺服器來託管您的WordPress部落格,那麼您可以編輯伺服器配置檔案以修復瀏覽器快取錯誤。

您如何編輯和訪問此檔案取決於您的主機,因此如果您在訪問該檔案時需要幫助,可以聯絡您的主機提供商。

然後,您需要新增以下程式碼來新增過期標頭:

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

此程式碼將為不同的檔案型別設定過期時間。請注意,影象的快取時間比 HTML、CSS、JS 和其他檔案型別長,因為影象通常保持不變。

之後,您可以新增以下程式碼來新增快取控制標頭:

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

此程式碼設定快取到期的時間。它告訴您的伺服器上述檔案型別在14天內不會更改。

如果您想進一步加快WordPress的速度,請檢視我們關於如何提高WordPress速度和效能的教程

我們希望本教程能幫助您瞭解如何輕鬆修復WordPress網站效能測試中的瀏覽器快取警告。

評論留言