您是否剛剛通過速度測試工具執行您的WordPress網站，卻被告知您需要“Add Expires headers”到您的WordPress網站？
快取過期標頭是讓Web瀏覽器知道是從訪問者的瀏覽器快取還是從您的伺服器載入網頁資源（如影象）的規則。這些可以幫助提高您網站的效能。除此之外，它們也是YSlow效能建議的一部分，這意味著它們會影響您在GTmetrix等工具中的效能“分數” 。
在這篇文章中，我們將解釋什麼是過期標頭以及它們如何影響您的網站。然後，我們將向您展示如何使用幾種不同的方法在WordPress中新增過期標頭。
但首先，我們需要快速繞道討論另一個主題——瀏覽器快取。
什麼是瀏覽器快取？
在討論過期標頭之前，我們首先需要向您介紹瀏覽器快取的概念。這很重要，因為過期標頭可以幫助您控制和實現瀏覽器快取——因此，如果您不瞭解瀏覽器快取，就無法理解過期標頭。
簡而言之，瀏覽器快取讓您的網站告訴訪問者的瀏覽器將某些檔案儲存在訪問者的本地計算機上並載入這些本地檔案以供後續訪問，而不是在每次頁面載入時從您的伺服器下載它們。
通過消除每次下載檔案的需要，您可以加快站點的載入時間並減少頻寬使用。
讓我們看一個示例——您網站的徽標影象。您的徽標在每個頁面上都是相同的，因此強制訪問者的瀏覽器在每次頁面載入時重新下載相同的徽標檔案是沒有意義的。通過瀏覽器快取，您可以將該徽標檔案儲存在訪問者的本地計算機上。訪問者在第一次訪問時仍需要下載您的徽標影象。但是對於後續的頁面檢視，該檔案將從其本地瀏覽器快取中載入。
什麼是過期標頭？
過期標頭讓您告訴訪問者的Web瀏覽器它是否應該從本地瀏覽器快取中載入給定資源（如上所述），或者它是否需要從Web伺服器下載新版本。
更具體地說，它允許您在檔案“過期”之前為不同檔案型別的快取版本設定持續時間，並且瀏覽器必須再次從伺服器下載它。
讓我們看一個例子……
假設您想控制網站上PNG影象檔案的瀏覽器快取行為。如果您將PNG檔案的過期標頭設定為一個月，這意味著訪問者的瀏覽器將：
- 在初始訪問/下載後一個月從快取中載入已經下載的版本。
- 一個月後從伺服器重新下載該檔案。
您可以為不同的檔案型別設定不同的過期標頭，這使您可以精細控制站點的瀏覽器快取。
過期標頭與快取控制
雖然使用過期標頭是控制WordPress上的瀏覽器快取的一種方法，但它不是唯一的方法。還有另一種稱為快取控制的技術。
快取控制是一種更現代的技術，為控制快取行為提供了更多的靈活性。出於這個原因，今天許多網站都使用快取控制。
但是，過期標頭仍然提供大多數站點所需的一切，因此它們是用於瀏覽器快取的好選擇。您也可以同時使用兩者，儘管在大多數情況下您的快取控制標頭將優先。如果同時使用兩者，您需要確保在每個中設定相同的時間值。
如果您想了解有關如何在WordPress上實現快取控制的更多資訊，請檢視我們的指南，瞭解如何在WordPress中利用瀏覽器快取。
如何修復WordPress中的“新增過期標頭”
現在，讓我們進入實際的操作方法部分，我們將向您展示如何在 WordPress 中設定過期標頭。
您可以為您的WordPress網站新增過期標頭。您可以在伺服器級別（Nginx或Apache）使用您自己的程式碼片段或通過一些使用者友好的WordPress外掛來執行此操作。
當有人第一次訪問您的WordPress網站上的網頁時，所有檔案都會一個一個地載入。瀏覽器和WordPress託管伺服器之間的所有這些請求都會增加網頁載入時間。
瀏覽器快取將部分或全部檔案儲存在訪問者的計算機上。這意味著他們下次訪問該頁面時，可以從他們自己的計算機載入檔案，從而提高您的WordPress效能。
現在您可能想知道，瀏覽器如何知道要儲存哪些檔案以及將它們保留多長時間？
這就是過期標標頭的用武之地。
使用expires headers或cache-control headers設定關於儲存哪些檔案以及儲存它們多長時間的規則。在本文中，我們將重點介紹快取過期標頭，因為它們對於大多數使用者來說設定起來更簡單。
快取過期標頭為瀏覽器快取中儲存的每種型別的檔案設定過期日期。在該日期之後，檔案將從您的伺服器重新載入，以便為訪問者提供最新版本的頁面。
如何在Apache Web伺服器上使用.htaccess新增過期標頭
如果您的Web主機使用Apache Web伺服器，您可以使用.htaccess檔案新增過期標頭，該檔案位於您的伺服器的根資料夾（與儲存wp-config.php檔案相同的資料夾）。
這是您需要做的：
- 在您首選的FTP客戶端中使用FTP連線到您的伺服器
- 在根資料夾中找到.htaccess檔案
- 將 .htaccess 檔案的備份副本下載到本地計算機。這樣，如果出現任何問題，您可以重新上傳備份副本以解決任何潛在問題。
- 在檔案頂部附近新增下面的程式碼片段
## 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 ##
雖然預設值應該適用於大多數網站，但您可以根據需要調整程式碼片段中不同檔案型別的時間段。
如何在Nginx Web伺服器上使用配置檔案新增過期標頭
如果您的主機使用Nginx Web伺服器，您可以通過編輯伺服器的配置檔案來控制過期標頭。您如何編輯此檔案將取決於您的房東——如果您需要幫助，可以聯絡伺服器提供商的支援。
這是您需要使用的程式碼：
location ~* \.(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}
您可以根據需要調整不同型別檔案的過期時間。
確定您的網站執行的是Apache還是Nginx
首先，您需要弄清楚您的網站是使用Apache還是Nginx伺服器。為此，請瀏覽到您的網站並右鍵單擊該頁面，然後選擇“Inspect（檢查）”選項。
接下來，您需要單擊頁面頂部的“Network（網路）”選項卡。您可能需要重新整理頁面才能載入結果。
之後，您可以單擊“Name（名稱）”列頂部的域名。然後您應該向下滾動到“Response Headers（響應標頭）”部分並檢查名為“server（伺服器）”的專案。
這將顯示您正在使用哪個Web伺服器。在這種情況下，該站點在Nginx伺服器上執行。
如何使用WordPress外掛新增過期標頭
如果您對自己新增過期標頭程式碼感到不自在，您還可以找到一些可以為您完成這項工作的WordPress外掛。其中一些外掛新增過期標頭，而其他外掛使用快取控制。無論哪種方式，最終結果都是您的WordPress網站可以從瀏覽器快取中受益。
如果您的主機尚未為您實現快取，一種解決方案是使用快取外掛。一個很好的選擇是WP Rocket。啟用WP Rocket外掛後，它會自動為您啟用瀏覽器快取 – 無需配置任何其他設定。
以下是一些其他快取外掛，可以幫助您實現過期標頭和/或瀏覽器快取：
WP Rocket是市場上對初學者最友好的WordPress快取外掛。啟用後，它會立即工作以加快您的網站速度，而無需像許多其他快取外掛一樣處理複雜的配置設定。
WP Rocket是一個高階外掛，但其免費版本已經包含所有功能最好的部分。
您需要做的第一件事是安裝並啟用WP Rocket外掛（官網）。
安裝並啟用後，WP Rocket將自動開啟瀏覽器快取。預設情況下，它會使用最佳設定新增過期標頭和快取控制標頭，以加速您的WordPress網站。
這就是你需要做的。如果您想了解有關該外掛的更多資訊，請參閱有關如何在WordPress中正確安裝和設定WP Rocket的教程。
如果您更喜歡使用免費的快取外掛將過期標頭新增到您的網站，那麼我們建議您檢視W3 Total Cache。
W3 Total Cache提供了一些與WP Rocket相同的功能，但它並不適合初學者。您必須手動啟用 expires 標頭，因為它不會自動啟用它們。
如果您已經對快取進行了排序並且只想要一個更有針對性的外掛，那麼兩個不錯的免費外掛是：
Leverage Browser Caching外掛沒有設定 – 您只需啟用它，它就會立即開始工作。
Add Expires Headers外掛可讓您控制不同檔案型別的過期標頭 – 您可以從WordPress儀表盤中新的Add Expires Headers區域進行這些選擇：
您可以為不同的檔案型別配置不同的過期規則
如何測試過期標頭是否正常工作
要測試您的過期標頭是否配置正確，您可以使用GiftOfSpeed中的這個免費工具。輸入網站的URL後，該工具會告訴您兩件事：
- 您網站上所有檔案的快取持續時間。
- 快取型別（應該說過期標頭，因為這是您使用的方法，但您也可能會看到快取控制，具體取決於您的站點配置）。
您還可以通過您正在使用的任何速度測試工具（例如GTmetrix）執行您的站點，並檢查您是否仍然看到“新增過期標頭”訊息。
如何使用終端測試過期標頭
如果您更喜歡使用更多技術選項測試過期標頭，您可以curl在終端中向您網站上的靜態資產發出請求，並直接檢查HTTP標頭。例如，如果您的過期或快取控制規則涵蓋CSS檔案，您可以發出curl如下請求。
curl -I https://kinstalife.com/wp-includes/css/dist/block-library/style.min.css
在我們的例子中，curl對style.min.css檔案的請求提供了以下響應。
HTTP/2 200 server: nginx date: Wed, 27 Jan 2021 01:11:05 GMT content-type: text/css; charset=UTF-8 content-length: 51433 last-modified: Tue, 12 Jan 2021 20:17:48 GMT vary: Accept-Encoding etag: "5ffe03ec-c8e9" expires: Thu, 31 Dec 2037 23:55:55 GMT cache-control: max-age=315360000 access-control-allow-origin: * accept-ranges: bytes x-edge-location-klb: HaIXowU1oNczJ391oDE9zVvZ7279840b5d30a89472f57253756b3e63
如您所見，響應包括一個expires和cache-control標頭。具體來說，cache-control標頭顯示的max-age為315360000秒，表示有效期為一年。
如何為外部指令碼新增過期標頭
我們在上面向您展示的方法將讓您控制WordPress站點伺服器上所有檔案的過期標頭。但是，這些方法不允許您控制您可能正在載入的第三方指令碼的過期標頭，例如Google Fonts、Google Analytics等。
因此，即使您已經通過上述方法實現了過期標頭，某些速度測試工具仍可能將此標記為潛在問題。
以下是一些常見第三方指令碼的解決方案……
如何將過期標頭新增到Google字型
許多WordPress網站依賴谷歌字型來定製字型。這通常涉及從Google的CDN載入字型，這意味著您將無法通過伺服器的配置設定過期標頭。
一種簡單的解決方法是在本地託管字型檔案，而不是依賴Google的CDN。要進行此設定，您可以使用WordPress.org上的Optimize My Google Fonts (OMGF) 免費外掛。
您還可以檢視我們在WordPress中本地託管字型的完整指南，以瞭解有關此方法的優缺點的更多資訊。
如何向Google Analytics新增過期標頭
如果您遇到與瀏覽器快取和Google Analytics相關的問題，您還可以考慮在本地託管Google Analytics指令碼，就像我們向您展示的Google字型一樣。
這裡有一些 WordPress 外掛可以很容易地實現這一點：
- CAOS（完整的分析優化套件）
- Perfmatters
- WP Rocket及其附帶的Google跟蹤外掛。
小結
回顧一下，過期標頭可幫助您控制WordPress站點上不同檔案型別的瀏覽器快取行為。
如今，許多站點依賴快取控制標頭而不是過期標頭，因為快取控制是一種更現代的選項，可提供更大的靈活性。但是，對於大多數站點，過期標頭仍然可以正常工作，您也可以同時使用過期標頭和快取控制。
此外，如果您不實施過期標頭，一些速度測試工具會降低您網站的分數，這可能是您設定此策略的主要動機。
我們希望本教程能幫助您瞭解如何在WordPress中新增過期標頭。您可能對下列文章也會感興趣：
- 如何使用外掛/無外掛優化WordPress網站瀏覽器快取
- 如何設定WordPress靜態資源瀏覽器快取
- 如何實現採用高效的快取策略提供靜態資源
- 使用Workers自定義CDN快取策略取代Cloudflare Page Rule
評論留言