如何修復WordPress中的槓桿瀏覽器緩存警告

Google PageSpeed Insights是衡量網站性能的幾種有用工具之一。但是,它的一些建議(例如「利用瀏覽器緩存」警告)可能會使缺乏經驗的網站所有者感到困惑。

當您將其分解時,緩存並不難理解。通過一些調整,您可以在站點上實施此開發最佳實踐,以減少載入時間並提高PageSpeed得分。

在這篇文章中,我們將通過「槓桿瀏覽器緩存」警告的介紹拉開序幕。然後,我們將在WordPress網站上分享解決此問題的一些技巧。

免費試用

跳進去吧!

槓桿瀏覽器緩存警告是什麼?

為了了解「利用瀏覽器緩存」警告,先了解一下Google PageSpeed Insights會有所幫助。如果您是該平台的新手,我們建議您閱讀完整的指南《 Google PageSpeed Insights:使用WordPress評分100/100》。

槓桿瀏覽器緩存警告是Google PageSpeed經常返回的「診斷」之一,它是改善得分的建議,如下所示:

利用瀏覽器緩存的pagespeed見解

利用Google PageSpeed Insights中的瀏覽器緩存警告

在Google PageSpeed Insights的第5版中,此消息已替換為「使用有效的緩存策略服務靜態資產」警告:

pagespeed服務靜態資源

在Google PageSpeed Insights中通過有效的緩存策略警告為靜態資產提供服務

儘管語言和外觀有所變化,但對這些警告的解決方案是相同的。

Google建議使用瀏覽器緩存來減少頁面載入時間並提高性能。簡而言之,緩存是指用戶的瀏覽器保存站點頁面的靜態副本。然後,在以後的訪問中,可以更快地重新載入此內容,因為瀏覽器不必聯繫您站點的伺服器即可訪問所請求的資源。

但是,每個緩存的資源都需要指定的到期期限。這會告訴瀏覽器您網站上的內容何時過時,因此可以用更新的版本替換其緩存的副本。

如果您在性能測試結果中看到「利用瀏覽器緩存」警告,則可能意味著以下兩種情況之一:

  • 您網站或第三方伺服器的Cache-Control或Expires標頭丟失了。
  • 存在必要的標頭,但有效期很短,因此對性能沒有太大影響。

該警告的解決方案涉及解決這些問題中的一個或兩個。

?警告!利用瀏覽器緩存?如果閱讀這些單詞會使您心跳加速,則需要查看本指南,以修復該可怕的消息⚡️

點擊鳴叫

如何修復WordPress中的槓桿瀏覽器緩存警告(3種方法)

根據引起問題的方式,您可以通過幾種不同的方法來修復WordPress中的「槓桿瀏覽器緩存」警告。您可以嘗試以下三種解決方案。

1.添加緩存控制並終止標頭

有兩個與瀏覽器緩存相關的標頭:Cache-Control和Expires。必須至少存在一個才能為您的站點啟用瀏覽器緩存,因為這是瀏覽器確定刷新資源之前應保留資源多長時間的方式。

確定這是否是導致「槓桿瀏覽器緩存」警告的一種簡單方法是查看為每個資源提供的詳細信息。在Google PageSpeed Insights第5版中,您會在「緩存TTL」下看到「無」,而不是:

頁面速度緩存ttl

在Google PageSpeed Insights中緩存TTL列表

作為方便參考,當缺少標題時,以前的Google PageSpeed Insights版本會顯示「未指定過期」消息:

「槓桿瀏覽器緩存」警告中列出的資源

「槓桿瀏覽器緩存」警告中列出的資源

當Cache-Control標頭打開客戶端緩存並設置資源的最大使用期限時,Expires標頭用於指定資源不再有效的時間點。

使用WordPress,我們的流量增長了1,187%。
我們將向您展示如何。
加入20,000多個其他人,他們每周都會收到有關WordPress內部技巧的新聞!

          現在訂閱
        
        
          
            
            成功!感謝您的訂閱

您將在一周內收到下一期的Kinsta新聞通訊。

訂閱Kinsta新聞通訊
        
  
    
      
  

    
      
        訂閱
    
  
  
    
  
    
      
        
      
      
      我同意條款和條件以及隱私政策

您不必同時添加兩者,因為這可能是多餘的。 Cache-Control是較新的,通常是推薦的方法。但是,某些Web性能工具(例如GTmetrix)仍在檢查Expires標頭。

如果您在Kinsta託管,則不必擔心設置這些標題。我們所有的Nginx伺服器都已經包含了它們。使用內容分發網路(CDN)的用戶也應該已經應用了這些標頭。

如果您使用的是其他託管服務提供商,請務必先備份您的網站,然後再執行以下步驟,因為如果不注意編輯.htaccess文件可能會破壞您的網站。

如何在Nginx中添加緩存控制標頭

要在Nginx中添加Cache-Control標頭,可以將以下內容添加到伺服器的配置文件中:

位置〜* 。(js | css | png | jpg | jpeg | gif | svg | ico)$ {
 到期30天;
 add_header高速緩存控制項「公共,無變換」;
}

這告訴您的伺服器,指定的文件類型在至少30天內不會更改。在刷新之前,它將在該時間段內保存相關文件。

如何在Apache中添加緩存控制標頭

如果您有Apache伺服器,則可以將以下代碼添加到.htaccess文件中:

標頭集Cache-Control「最大年齡= 84600,公共」

該代碼段應添加在「 #BEGIN WordPress」之前或「 #END WordPress」之後。在這種情況下,緩存設置為在84,600秒後過期。

如何在Nginx中添加過期標題

您可以在Nginx中添加Expires標頭,方法是將以下內容添加到伺服器塊中。在此示例中,您可以看到如何根據文件類型指定不同的到期時間:

位置〜* 。(jpg | jpeg | gif | png | svg)$ {
        365天到期;
    }

    位置〜* 。(pdf | css | html | js | swf)$ {
        過期2天;
    }
如何在Apache中添加過期標頭

您可以通過在.htaccess文件中添加以下內容來在Apache中添加Expires標頭:

##過期標題培訓##

有效期至
ExpiresByType圖片/ jpg「訪問1年」
ExpiresByType圖片/ jpeg「訪問1年」
ExpiresByType圖片/ gif「訪問1年」
ExpiresByType image / png「訪問1年」
ExpiresByType圖片/ svg「訪問1年」
ExpiresByType文本/ css「訪問1個月」
ExpiresByType應用程序/ pdf「訪問1個月」
ExpiresByType應用程序/ javascript「訪問1個月」
ExpiresByType應用程序/ x-javascript「訪問1個月」
ExpiresByType應用程序/ x-shockwave-flash「訪問1個月」
ExpiresByType圖片/ x圖標「訪問1年」
過期默認為「訪問2天」

##過期標題培訓##

然後,您可以通過再次通過Google PageSpeed Insights運行網站並查看警告是否仍然存在來檢查標題。

2.利用瀏覽器緩存進行Google Analytics(分析)

具有諷刺意味的是,有時Google Analytics(分析)是「槓桿瀏覽器緩存」警告和PageSpeed評分不完善的原因。這是因為它的緩存過期時間很短,只有兩個小時。這曾經是舊的警告:

利用瀏覽器緩存pagespeed見解分析

利用Google Analytics(分析)腳本的瀏覽器緩存警告

在PageSpeed Insights版本5中,此問題不再導致警告,但是Google Analytics(分析)仍可能被列為未優化的資源:

Pagespeed通過了分析

Google PageSpeed Insights通過了Google Analytics(分析)腳本列表審核

由於資源不在您的伺服器上,因此您將無法使用Cache-Control或Expires標頭更改此設置。但是,有一種方法可以通過在本地託管腳本來為Google Analytics(分析)利用瀏覽器緩存。

厭倦了WordPress問題和緩慢的主機?我們提供全天候24/7的WordPress專家和一流的快速伺服器提供的世界一流的支持。查看我們的計劃

不過請注意,Google不支持此方法。

利用Complete Analytics Optimization Suite利用瀏覽器緩存進行Google Analytics(分析)

如果您想解決上述問題,可以免費使用Daan van den Bergh開發的名為Complete Analytics Optimization Suite(CAOS)的免費插件:

CAOS WordPress插件

CAOS WordPress插件

您可以從WordPress插件目錄中下載CAOS,也可以在WordPress儀錶板的“插件”>“添加新內容”中搜索它。

在本地託管分析腳本的其他一些好處包括,它將您對Google的外部HTTP請求從兩個減少到一個,並且使您能夠完全控制文件的緩存。這意味著您可以使用前面顯示的緩存頭。

首先,請安裝插件,然後輸入您的Google Analytics(分析)跟蹤ID。該插件將Google Analytics(分析)必需的跟蹤代碼添加到您的WordPress網站,下載analytics.js文件並將其保存到您的伺服器,並使用wp_cron()中的預定腳本對其進行更新。

我們建議也將其設置為在頁腳中載入:

caos設置

CAOS跟蹤代碼放置設置

請記住,CAOS不能與其他Google Analytics WordPress插件一起使用。

利用WP-Rocket利用瀏覽器緩存進行Google Analytics(分析)

或者,您可以使用WordPress緩存插件WP-Rocket實現相同的目標:

wp火箭插件

WP-Rocket WordPress插件

此插件的Google跟蹤插件可讓您通過單擊一個按鈕在本地託管分析腳本。只需在WP-Rocket>附件下打開狀態即可。

WP-Rocket及其附件與其他Google Analytics(分析)插件兼容。作為一種高級工具,它的價格為許可證每年起價為49美元。

3.盡量減少使用第三方腳本

有時,由於Google Analytics(分析)腳本託管在Google的伺服器上,因此它可能會導致您的Google PageSpeed Insights評分出現問題,因此您無法控制緩存。

其他第三方腳本也是如此。如果您是通過WordPress網站管理業務,則很可能會運行其他第三方腳本來跟蹤轉化,A / B測試等。

這可能包括Facebook轉換像素,Crazy Egg,Hotjar等腳本。不幸的是,除非找到在本地託管這些腳本的方法,否則您將無能為力。

Facebook Pixel用戶的一個選擇是使用另一個WP-Rocket附加組件。理想情況下,如果您想提高Google PageSpeed得分,則希望最大限度地減少使用第三方腳本。因此,值得對您的網站進行審核,並刪除運行它所不需要的任何腳本。

如果您曾經評估過站點性能,則很有可能您對槓桿瀏覽器緩存警告並不陌生。但是,如何解決該問題以使您的網站更快?通過此深入指南學習如何做! ??

點擊鳴叫

摘要

Google PageSpeed Insights雖然不能絕對地衡量您網站的性能,但仍然可以很好地指示其運行方式。通過解決「使用有效的緩存策略服務靜態資產」下顯示的警告來提高得分,可以使您的網站更快,更易於訪問。

如果您在Google PageSpeed Insights中看到此警告,則可以通過以下方法解決此問題:

  1. 添加Cache-Control或Expires標頭。
  2. 利用瀏覽器緩存進行Google Analytics(分析)。
  3. 最大限度地減少使用第三方腳本。

關於修復槓桿瀏覽器緩存還有其他技巧嗎?在下面的評論部分讓我們知道!

如果您喜歡這篇文章,那麼您會喜歡Kinsta的WordPress託管平台。加速您的網站,並從我們經驗豐富的WordPress團隊獲得24/7支持。我們基於Google Cloud的基礎架構專註於自動擴展,性能和安全性。讓我們向您展示Kinsta的與眾不同!查看我們的計劃

相關文章