WordPress 瀏覽器緩存
已發表: 2015-05-18使用槓桿瀏覽器緩存(也稱為過期緩存)顯著加速您的 WordPress 網站。
許多速度優化和測試提供商將其稱為“瀏覽器緩存”、“利用瀏覽器緩存”、“過期標頭”、“緩存標頭”、“緩存控制”和“ Web 緩存”。 正如 Google PageSpeed Insights 所指出的,GTMetrix 和 MaxCDN 遵循本指南進行正確設置。
什麼是瀏覽器緩存?
瀏覽器緩存是您的 Web 服務器告訴瀏覽器將頁面或特定資源存儲一段時間的方法,這樣就不必在每次加載頁面時都從服務器下載它們。 這可以緩存整個頁面和/或資源,例如 JavaScript、CSS、圖像(jpeg、png、gif 等)等等。
您的 WordPress 網站將在第一次為每個用戶正常加載,但此後當他們瀏覽頁面並執行操作時它會明顯更快。 資源存儲在瀏覽器中,因此在本地加載而不是再次下載。
瀏覽器緩存的重要性
最終,瀏覽器緩存的目的和重要性是為您的用戶加速您的 WordPress 網站,以便他們獲得更愉快的體驗。 這可能會導致流量增加、搜索排名提高,甚至提高您想要實現的目標的轉化率。
作為額外的獎勵效果,通過不為同一訪問者在每個頁面加載上下載資源,可以減輕 Web 服務器的負載,並且還可以節省 Web 服務器上的帶寬。
Web 緩存為服務器和用戶提供相互速度
實現瀏覽器緩存
在您的 WordPress 網站上設置槓桿瀏覽器緩存實際上非常快速和簡單,但設置可能會根據您的設置和您使用的 Web 服務器而有所不同。 默認情況下,最常見的設置是在 Apache Web 服務器上運行 WordPress,但也有其他流行的 Web 服務器可用,例如 Nginx、IIS 等。
使用 WordPress Leverage 瀏覽器緩存插件可簡化實施。
為了使它更容易,有幾個 WordPress 利用瀏覽器緩存插件可用。 我們已經使用、測試並推薦了 WordPress Leverage Browser Caching Ninjas 插件。 它是一個安裝和激活插件,為您完成剩下的工作,就這麼簡單。
Apache 瀏覽器緩存
Apache 使用.htaccess
文件進行瀏覽器緩存。 在您的 WordPress 安裝的根目錄中應該有一個.htaccess
文件,如果沒有,您可以創建一個並將以下代碼行放入其中,在最頂部:
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##
(https://gist.github.com/tribulant/36be0f683eedfa468f51)
Nginx 利用瀏覽器緩存
如果您正在運行 Nginx (En-gine-ex) 服務器,則設置與上面的 Apache 不同。 您需要將以下代碼添加到您的 vhost 配置文件中,該文件通常位於/etc/nginx/sites-enabled/default
。 將以下內容添加到您的服務器塊:

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
}
(https://gist.github.com/tribulant/19bb56a222af41854ecc)
輕量級
Lighttpd 使用 mod_expire 模塊來控制為瀏覽器提供內容緩存的標頭。 這可以相應地進入Lighttpd核心的配置。
$HTTP["url"] =~ "^/images/" {
expire.url = ( "" => "access plus 1 hours" )
}
(https://gist.github.com/tribulant/26263533eee33e3b61ed)
Microsoft IIS 利用瀏覽器緩存
為 IIS(Internet 信息服務)設置瀏覽器緩存非常容易。
在Administration Tools
界面中選擇它,然後顯示它的屬性。 選擇HTTP Headers
選項卡後,您應該會看到兩個有趣的區域; Enable Content Expiration
和Custom HTTP headers
。 第一個應該是不言自明的,第二個可用於應用 Cache-Control 標頭。
瀏覽器緩存的技術性
Web 服務器通過在發送 HTML 之前向瀏覽器發送 HTTP 標頭來實現利用瀏覽器緩存。 它們告訴瀏覽器有關 HTML 內容的某些信息,例如內容類型、當前日期、服務器詳細信息、緩存控制和過期等。
Cache-Control
、 Expires
和Etag
標頭是提供瀏覽器緩存指令的標頭。 這些標頭由上述方法自動創建,以相應地利用 Apache、Nginx 和 IIS 中的瀏覽器緩存,因此除非您感興趣,否則您無需深入了解細節。
緩存控制頭
Cache-Control
向瀏覽器提供某些指令,例如內容被視為“新鮮”的時間、緩存的公共/私有狀態、驗證等。
緩存控制:max-age=3600,公共
(https://gist.github.com/tribulant/6309926734d3c127064c)
過期標題
Expires
標頭僅提供 HTTP 日期,直到資源應該並且可以緩存到為止。
過期:2015 年 11 月 28 日星期六 05:36:25 GMT
(https://gist.github.com/tribulant/1b655d60a8a665b18b85)
Etag 標頭
Etag
是在 HTTP 1.1 中引入的,作為一種驗證方法,帶有由服務器發送的令牌,瀏覽器使用它來檢查內容的表示是否已更改。 直到Etag
,瀏覽器大多使用Last-Modified
標頭,但Etag
現在更相關。 無論如何,大多數 Web 服務器都會生成Last-Modified
和Etag
標頭。
電子標籤:“pub1259380237;gz”
(https://gist.github.com/tribulant/2b542d76410bc047be00)
瀏覽器緩存的底線
通過為雙方提供速度和性能,瀏覽器緩存對您(您的 Web 服務器)和您的用戶都是互惠互利的。
借助瀏覽器緩存,強大而積極,您的 Web 服務器足夠聰明,可以知道資源何時發生變化,以便為用戶生成更新的標頭,以便根據需要獲取新內容。 不要驚慌您的用戶會卡在舊內容上,事實並非如此。
強烈建議 WordPress 網站使用 Web 瀏覽器緩存,最終,推薦的 WordPress Leverage Browser Caching Ninjas 插件可以解決問題。 只需安裝、激活即可完成!