建站
咨詢
售后
建站咨詢
新聞中心
您是否剛剛通過速度測(cè)試工具運(yùn)行您的wordpress網(wǎng)站，卻被告知您需要“Add Expires headers”到您的WordPress網(wǎng)站？
創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比寧津網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式寧津網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋寧津地區(qū)。費(fèi)用合理售后完善，10多年實(shí)體公司更值得信賴。
緩存過期標(biāo)頭是讓W(xué)eb瀏覽器知道是從訪問者的瀏覽器緩存還是從您的服務(wù)器加載網(wǎng)頁(yè)資源（如圖像）的規(guī)則。這些可以幫助提高您網(wǎng)站的性能。除此之外，它們也是YSlow性能建議的一部分，這意味著它們會(huì)影響您在GTmetrix等工具中的性能“分?jǐn)?shù)” 。
在這篇文章中，我們將解釋什么是過期標(biāo)頭以及它們?nèi)绾斡绊懩木W(wǎng)站。然后，我們將向您展示如何使用幾種不同的方法在WordPress中添加過期標(biāo)頭。
但首先，我們需要快速繞道討論另一個(gè)主題——瀏覽器緩存。
什么是瀏覽器緩存？
在討論過期標(biāo)頭之前，我們首先需要向您介紹瀏覽器緩存的概念。這很重要，因?yàn)檫^期標(biāo)頭可以幫助您控制和實(shí)現(xiàn)瀏覽器緩存——因此，如果您不了解瀏覽器緩存，就無法理解過期標(biāo)頭。
簡(jiǎn)而言之，瀏覽器緩存讓您的網(wǎng)站告訴訪問者的瀏覽器將某些文件保存在訪問者的本地計(jì)算機(jī)上并加載這些本地文件以供后續(xù)訪問，而不是在每次頁(yè)面加載時(shí)從您的服務(wù)器下載它們。
通過消除每次下載文件的需要，您可以加快站點(diǎn)的加載時(shí)間并減少帶寬使用。
讓我們看一個(gè)示例——您網(wǎng)站的徽標(biāo)圖像。您的徽標(biāo)在每個(gè)頁(yè)面上都是相同的，因此強(qiáng)制訪問者的瀏覽器在每次頁(yè)面加載時(shí)重新下載相同的徽標(biāo)文件是沒有意義的。通過瀏覽器緩存，您可以將該徽標(biāo)文件存儲(chǔ)在訪問者的本地計(jì)算機(jī)上。訪問者在第一次訪問時(shí)仍需要下載您的徽標(biāo)圖像。但是對(duì)于后續(xù)的頁(yè)面查看，該文件將從其本地瀏覽器緩存中加載。
什么是過期標(biāo)頭？
過期標(biāo)頭讓您告訴訪問者的Web瀏覽器它是否應(yīng)該從本地瀏覽器緩存中加載給定資源（如上所述），或者它是否需要從Web服務(wù)器下載新版本。
更具體地說，它允許您在文件“過期”之前為不同文件類型的緩存版本設(shè)置持續(xù)時(shí)間，并且瀏覽器必須再次從服務(wù)器下載它。
讓我們看一個(gè)例子……
假設(shè)您想控制網(wǎng)站上PNG圖像文件的瀏覽器緩存行為。如果您將PNG文件的過期標(biāo)頭設(shè)置為一個(gè)月，這意味著訪問者的瀏覽器將：
- 在初始訪問/下載后一個(gè)月從緩存中加載已經(jīng)下載的版本。
- 一個(gè)月后從服務(wù)器重新下載該文件。
您可以為不同的文件類型設(shè)置不同的過期標(biāo)頭，這使您可以精細(xì)控制站點(diǎn)的瀏覽器緩存。
過期標(biāo)頭與緩存控制
雖然使用過期標(biāo)頭是控制WordPress上的瀏覽??器緩存的一種方法，但它不是唯一的方法。還有另一種稱為緩存控制的技術(shù)。
緩存控制是一種更現(xiàn)代的技術(shù)，為控制緩存行為提供了更多的靈活性。出于這個(gè)原因，今天許多網(wǎng)站都使用緩存控制。
但是，過期標(biāo)頭仍然提供大多數(shù)站點(diǎn)所需的一切，因此它們是用于瀏覽器緩存的好選擇。您也可以同時(shí)使用兩者，盡管在大多數(shù)情況下您的緩存控制標(biāo)頭將優(yōu)先。如果同時(shí)使用兩者，您需要確保在每個(gè)中設(shè)置相同的時(shí)間值。
如果您想了解有關(guān)如何在WordPress上實(shí)現(xiàn)緩存控制的更多信息，請(qǐng)查看我們的指南，了解如何在WordPress中利用瀏覽器緩存。
如何修復(fù)WordPress中的“添加過期標(biāo)頭”
現(xiàn)在，讓我們進(jìn)入實(shí)際的操作方法部分，我們將向您展示如何在 WordPress 中設(shè)置過期標(biāo)頭。
您可以為您的WordPress網(wǎng)站添加過期標(biāo)頭。您可以在服務(wù)器級(jí)別（Nginx或Apache）使用您自己的代碼片段或通過一些用戶友好的WordPress插件來執(zhí)行此操作。
當(dāng)有人第一次訪問您的WordPress網(wǎng)站上的網(wǎng)頁(yè)時(shí)，所有文件都會(huì)一個(gè)一個(gè)地加載。瀏覽器和WordPress托管服務(wù)器之間的所有這些請(qǐng)求都會(huì)增加網(wǎng)頁(yè)加載時(shí)間。
瀏覽器緩存將部分或全部文件存儲(chǔ)在訪問者的計(jì)算機(jī)上。這意味著他們下次訪問該頁(yè)面時(shí)，可以從他們自己的計(jì)算機(jī)加載文件，從而提高您的WordPress性能。
現(xiàn)在您可能想知道，瀏覽器如何知道要保存哪些文件以及將它們保留多長(zhǎng)時(shí)間？
這就是過期標(biāo)標(biāo)頭的用武之地。
使用expires headers或cache-control headers設(shè)置關(guān)于保存哪些文件以及保存它們多長(zhǎng)時(shí)間的規(guī)則。在本文中，我們將重點(diǎn)介紹緩存過期標(biāo)頭，因?yàn)樗鼈儗?duì)于大多數(shù)用戶來說設(shè)置起來更簡(jiǎn)單。
緩存過期標(biāo)頭為瀏覽器緩存中存儲(chǔ)的每種類型的文件設(shè)置過期日期。在該日期之后，文件將從您的服務(wù)器重新加載，以便為訪問者提供最新版本的頁(yè)面。
如何在Apache Web服務(wù)器上使用.htaccess添加過期標(biāo)頭
如果您的Web主機(jī)使用Apache Web服務(wù)器，您可以使用.htaccess文件添加過期標(biāo)頭，該文件位于您的服務(wù)器的根文件夾（與保存wp-config.php文件相同的文件夾）。
這是您需要做的：
## EXPIRES HEADER CACHING ##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" ## EXPIRES HEADER CACHING ##
雖然默認(rèn)值應(yīng)該適用于大多數(shù)網(wǎng)站，但您可以根據(jù)需要調(diào)整代碼片段中不同文件類型的時(shí)間段。
如何在Nginx Web服務(wù)器上使用配置文件添加過期標(biāo)頭
如果您的主機(jī)使用Nginx Web服務(wù)器，您可以通過編輯服務(wù)器的配置文件來控制過期標(biāo)頭。您如何編輯此文件將取決于您的房東——如果您需要幫助，可以聯(lián)系服務(wù)器提供商的支持。
這是您需要使用的代碼：
location ~* \.(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}
您可以根據(jù)需要調(diào)整不同類型文件的過期時(shí)間。
確定您的網(wǎng)站運(yùn)行的是Apache還是Nginx
首先，您需要弄清楚您的網(wǎng)站是使用Apache還是Nginx服務(wù)器。為此，請(qǐng)瀏覽到您的網(wǎng)站并右鍵單擊該頁(yè)面，然后選擇“Inspect（檢查）”選項(xiàng)。
接下來，您需要單擊頁(yè)面頂部的“Network（網(wǎng)絡(luò)）”選項(xiàng)卡。您可能需要刷新頁(yè)面才能加載結(jié)果。
之后，您可以單擊“Name（名稱）”列頂部的域名。然后您應(yīng)該向下滾動(dòng)到“Response Headers（響應(yīng)標(biāo)頭）”部分并檢查名為“server（服務(wù)器）”的項(xiàng)目。
這將顯示您正在使用哪個(gè)Web服務(wù)器。在這種情況下，該站點(diǎn)在Nginx服務(wù)器上運(yùn)行。
如何使用WordPress插件添加過期標(biāo)頭
如果您對(duì)自己添加過期標(biāo)頭代碼感到不自在，您還可以找到一些可以為您完成這項(xiàng)工作的WordPress插件。其中一些插件添加過期標(biāo)頭，而其他插件使用緩存控制。無論哪種方式，最終結(jié)果都是您的WordPress網(wǎng)站可以從瀏覽器緩存中受益。
如果您的主機(jī)尚未為您實(shí)現(xiàn)緩存，一種解決方案是使用緩存插件。一個(gè)很好的選擇是WP Rocket。激活WP Rocket插件后，它會(huì)自動(dòng)為您啟用瀏覽器緩存 – 無需配置任何其他設(shè)置。
以下是一些其他緩存插件，可以幫助您實(shí)現(xiàn)過期標(biāo)頭和/或?yàn)g覽器緩存：
- WP Super Cache
- W3 Total Cache
- WP Fastest Cache
- WP Rocket
WP Rocket是市場(chǎng)上對(duì)初學(xué)者最友好的WordPress緩存插件。啟用后，它會(huì)立即工作以加快您的網(wǎng)站速度，而無需像許多其他緩存插件一樣處理復(fù)雜的配置設(shè)置。
WP Rocket是一個(gè)高級(jí)插件，但其免費(fèi)版本已經(jīng)包含所有功能最好的部分。
您需要做的第一件事是安裝并激活WP Rocket插件（官網(wǎng)）。
安裝并激活后，WP Rocket將自動(dòng)打開瀏覽器緩存。默認(rèn)情況下，它會(huì)使用最佳設(shè)置添加過期標(biāo)頭和緩存控制標(biāo)頭，以加速您的WordPress網(wǎng)站。
這就是你需要做的。如果您想了解有關(guān)該插件的更多信息，請(qǐng)參閱有關(guān)如何在WordPress中正確安裝和設(shè)置WP Rocket的教程。
如果您更喜歡使用免費(fèi)的緩存插件將過期標(biāo)頭添加到您的網(wǎng)站，那么我們建議您查看W3 Total Cache。
W3 Total Cache提供了一些與WP Rocket相同的功能，但它并不適合初學(xué)者。您必須手動(dòng)啟用 expires 標(biāo)頭，因?yàn)樗粫?huì)自動(dòng)啟用它們。
如果您已經(jīng)對(duì)緩存進(jìn)行了排序并且只想要一個(gè)更有針對(duì)性的插件，那么兩個(gè)不錯(cuò)的免費(fèi)插件是：
- Leverage Browser Caching
- Add Expires Headers
Leverage Browser Caching插件沒有設(shè)置 – 您只需激活它，它就會(huì)立即開始工作。
Add Expires Headers插件可讓您控制不同文件類型的過期標(biāo)頭 – 您可以從WordPress儀表盤中新的Add Expires Headers區(qū)域進(jìn)行這些選擇：
您可以為不同的文件類型配置不同的過期規(guī)則
如何測(cè)試過期標(biāo)頭是否正常工作
要測(cè)試您的過期標(biāo)頭是否配置正確，您可以使用GiftOfSpeed中的這個(gè)免費(fèi)工具。輸入網(wǎng)站的URL后，該工具會(huì)告訴您兩件事：
您還可以通過您正在使用的任何速度測(cè)試工具（例如GTmetrix）運(yùn)行您的站點(diǎn)，并檢查您是否仍然看到“添加過期標(biāo)頭”消息。
如何使用終端測(cè)試過期標(biāo)頭
如果您更喜歡使用更多技術(shù)選項(xiàng)測(cè)試過期標(biāo)頭，您可以curl在終端中向您網(wǎng)站上的靜態(tài)資產(chǎn)發(fā)出請(qǐng)求，并直接檢查HTTP標(biāo)頭。例如，如果您的過期或緩存控制規(guī)則涵蓋CSS文件，您可以發(fā)出curl如下請(qǐng)求。
curl -I https://kinstalife.com/wp-includes/css/dist/block-library/style.min.css
在我們的例子中，curl對(duì)style.min.css文件的請(qǐng)求提供了以下響應(yīng)。
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
如您所見，響應(yīng)包括一個(gè)expires和cache-control標(biāo)頭。具體來說，cache-control標(biāo)頭顯示的max-age為315360000秒，表示有效期為一年。
如何為外部腳本添加過期標(biāo)頭
我們?cè)谏厦嫦蚰故镜姆椒▽⒆屇刂芖ordPress站點(diǎn)服務(wù)器上所有文件的過期標(biāo)頭。但是，這些方法不允許您控制您可能正在加載的第三方腳本的過期標(biāo)頭，例如Google Fonts、Google Analytics等。
因此，即使您已經(jīng)通過上述方法實(shí)現(xiàn)了過期標(biāo)頭，某些速度測(cè)試工具仍可能將此標(biāo)記為潛在問題。
以下是一些常見第三方腳本的解決方案……
如何將過期標(biāo)頭添加到Google字體
許多WordPress網(wǎng)站依賴谷歌字體來定制字體。這通常涉及從Google的CDN加載字體，這意味著您將無法通過服務(wù)器的配置設(shè)置過期標(biāo)頭。
一種簡(jiǎn)單的解決方法是在本地托管字體文件，而不是依賴Google的CDN。要進(jìn)行此設(shè)置，您可以使用WordPress.org上的Optimize My Google Fonts (OMGF) 免費(fèi)插件。
您還可以查看我們?cè)赪ordPress中本地托管字體的完整指南，以了解有關(guān)此方法的優(yōu)缺點(diǎn)的更多信息。
如何向Google Analytics添加過期標(biāo)頭
如果您遇到與瀏覽器緩存和Google Analytics相關(guān)的問題，您還可以考慮在本地托管Google Analytics腳本，就像我們向您展示的Google字體一樣。
這里有一些 WordPress 插件可以很容易地實(shí)現(xiàn)這一點(diǎn)：
- CAOS（完整的分析優(yōu)化套件）
- Perfmatters
- WP Rocket及其附帶的Google跟蹤插件。
小結(jié)
回顧一下，過期標(biāo)頭可幫助您控制WordPress站點(diǎn)上不同文件類型的瀏覽器緩存行為。
如今，許多站點(diǎn)依賴緩存控制標(biāo)頭而不是過期標(biāo)頭，因?yàn)榫彺婵刂剖且环N更現(xiàn)代的選項(xiàng)，可提供更大的靈活性。但是，對(duì)于大多數(shù)站點(diǎn)，過期標(biāo)頭仍然可以正常工作，您也可以同時(shí)使用過期標(biāo)頭和緩存控制。
此外，如果您不實(shí)施過期標(biāo)頭，一些速度測(cè)試工具會(huì)降低您網(wǎng)站的分?jǐn)?shù)，這可能是您設(shè)置此策略的主要?jiǎng)訖C(jī)。
我們希望本教程能幫助您了解如何在WordPress中添加過期標(biāo)頭。您可能對(duì)下列文章也會(huì)感興趣：
- 如何使用插件/無插件優(yōu)化WordPress網(wǎng)站瀏覽器緩存
- 如何設(shè)置WordPress靜態(tài)資源瀏覽器緩存
- 如何實(shí)現(xiàn)采用高效的緩存策略提供靜態(tài)資源
- 使用Workers自定義CDN緩存策略取代Cloudflare Page Rule
當(dāng)前標(biāo)題：如何在WordPress中添加緩存文件過期標(biāo)頭
文章鏈接：http://www.5511xx.com/article/cdjdoce.html
