Google PageSpeed見解：評分100/100的真相

毫無疑問，對於所有類型的網站管理員，開發人員和網站所有者來說，Google PageSpeed Insights都是有用的工具。但是，我們注意到，許多人都花了很多時間來優化網站，以爭取在此測試中獲得100/100的得分。

事實是，這不是要使用Google PageSpeed Insights的方式，也不是值得的追求。如果您專註於實施平台的建議，而不是將頁面頂部的數字置零，則可以為您的網站帶來更多好處。

這篇文章是有關如何充分利用Google PageSpeed Insights的綜合指南。我們將介紹Google如何使用您的分數，以及如何合併您收到的建議。

只需移至Kinsta，即可將WordPress網站的速度提高200％。
        
          今天免費遷移

讓我們開始吧！

Google PageSpeed Insights簡介

如果您還不熟悉Google PageSpeed Insights，則它是用於測試網站性能的工具。您可以輸入任何URL並進行分析：

Google PageSpeed見解

然後，Google會根據幾種性能優化最佳做法，為您測試過的網站提供100分的總得分：

Google PageSpeed Insights得分

伴隨著這一結果，您還將看到Google關於如何提高性能的幾條建議（因此，您的PageSpeed Insights得分也是如此）：

Google PageSpeed Insights建議

截至2018年，PageSpeed Insights得分是通過Google的開源自動工具Lighthouse（Lighthouse）計算出來的，該工具可以改善網頁的整體質量。該平台可以評估各種因素，包括性能，可訪問性，漸進式Web應用程序等。

要查看Lighthouse對您的網站的全面評估，可以使用Google的Measure工具：

Google網站管理員衡量審核工具

除了像執行一次Google PageSpeed Insights一樣進行性能審核外，您還將獲得可訪問性，最佳做法和搜索引擎優化（SEO）的分數。

Google PageSpeed Insights中評分100/100的真相

正如我們在本文開頭所提到的，我們看到許多網站所有者和開發人員都對獲得完美的PageSpeed Insights得分感到著迷。不幸的是，那些人往往忽略了測試結果中更重要的方面：建議。

當然，您應該盡最大努力縮短網站的載入時間，但獲得100/100的Google PageSpeed Insights實際上並不那麼重要。對於初學者來說，這甚至不是對性能進行全面測試。

與PageSpeed Insights不同，Pingdom工具可讓您從多個位置測試網站的性能：

Pingdom Tools速度測試結果

您也可以在平台上運行測試，例如GTmetrix（結合了來自PageSpeed Insights和YSlow的分數）和WebPageTest。可能是，您在這些不同工具上的得分可能不完全匹配，這表明您可以任意選擇這些數字。

真正重要的是您網站的實際速度。透視一下，我們發現平均載入時間在500毫秒以下（這非常快！）的網站在PageSpeed Insights上的得分未達到100/100。

影響您的速度優化方法的另一個因素是您網站的感知性能。訪問者不在乎您的Google PageSpeed Insights得分是多少。他們只是希望能夠儘快查看您的內容。

使用Google PageSpeed Insights測試網站的性能的真正目的並不是取得高分。相反，它可以在您的網站上找到問題點，以便您可以對其進行優化並減少實際和預期的載入時間。

Google如何使用PageSpeed Insights

性能不僅會影響您網站的用戶體驗（UX），而且還會影響SEO。鑒於PageSpeed Insights是由世界上最大，最流行的搜索引擎運營的，因此，您的得分可能會對搜索引擎結果頁面（SERP）排名（至少對Google本身）有一定影響。

現實情況是Google確實使用PageSpeed Insights來確定排名。網站速度是簡單明了的排名因素。您的性能測試成績可以使您很好地了解自己在該方面的立場。

但是，Google不僅僅考慮PageSpeed結果頂部圓圈中的數字。達到100/100並不能保證您在SERP上名列前茅。

話雖如此，當改善SEO時，您仍然可以使用PageSpeed Insights結果。例如，自2018年以來，移動頁面速度一直是Google的排名因素。您會注意到，性能測試提供了網站的桌面版和移動版的數據：

Google PageSpeed Insights中的「移動」標籤

由於超過73％的移動互聯網用戶聲稱他們遇到的網站載入時間太長，因此Google PageSpeed Insights移動標籤中的信息非常寶貴。使用此處的建議來減少在智能手機和其他設備上的載入時間應該可以給您帶來競爭優勢。

Google PageSpeed Insights建議（提高性能的24種方法）

在這篇文章中，我們討論了很多有關Google PageSpeed Insights的建議。它們是您的性能測試結果的實質，並且比您的實際分數更有價值。因此，我們將這篇文章的其餘部分專門用於他們。

但是，在深入研究各個建議之前，您需要了解現場數據和實驗室數據之間的區別。前者在過去30天的「 Chrome用戶體驗報告」中將您的網站與其他網站進行了比較。

還有兩個圖表顯示您的平均首次合格塗料（FCP）和首次輸入延遲（FID）的平均下降幅度：

Google PageSpeed Insights欄位數據

在上圖中，我們網站的FCP大約等於第75個百分位數中網站的45％，我們的FID大約等於第95個百分位數中9％的網站。

實驗室數據顯示模擬頁面載入的特定數據：

Google PageSpeed Insights實驗數據

您會注意到我們的現場數據和實驗室數據不完全匹配。完全正常實驗室數據是在固定條件下創建的，而現場數據則使用隨時間推移收集的實際載入速度。

結合使用時，現場數據和實驗室數據應使您對站點的實際載入時間有所了解。正如我們前面提到的，這比您的整體PageSpeed得分更為重要，因此您需要注意這些數字。

在考慮了這些信息之後，就該開始根據Google PageSpeed的建議來改善網站的性能。

1.消除渲染阻止資源

Google PageSpeed Insights最常見的建議之一是消除渲染阻止資源：

消除渲染阻止資源建議

這是指阻止頁面快速載入的JavaScript和CSS腳本。訪問者的瀏覽器必須先下載並處理這些文件，然後才能顯示頁面的其餘部分，因此，如果其中許多文件位於「首屏」位置，則可能會對您的網站速度產生負面影響。

您可以在我們的消除渲染阻止腳本的指南中了解有關此問題的更多信息。就Google而言，您應該考慮兩種解決方案：

• 如果您沒有很多JavaScript或CSS，則可以內聯它們以擺脫此警告。此過程是指將JavaScript和/或CSS合併到HTML文件中。您可以使用類似Autoptimize的插件來執行此操作。但是，這實際上僅對非常小的站點有效。大多數WordPress網站都具有足夠的JavaScript，因此該方法實際上會使您減速。
• 另一個選擇是推遲您的JavaScript。此屬性在HTML解析期間下載您的JavaScript文件，但僅在解析完成後才執行。同樣，具有此屬性的腳本按頁面上顯示的順序執行。

在PageSpeed結果中的建議下方，您會找到受此問題影響最大的資源列表。

2.避免鏈接關鍵請求

鏈接關鍵請求的概念與關鍵渲染路徑（CRP）和瀏覽器如何載入頁面有關。在您的頁面可見之前，必須完全載入某些元素（例如我們上面討論的JavaScript和CSS）。

作為此建議的一部分，Google PageSpeed Insights將在您正在分析的頁面上向您顯示請求鏈：

避免鏈接關鍵請求建議

此圖將向您顯示在頁面顯示之前必須滿足的一系列相關請求。它還會告訴您每種資源的大小。理想情況下，您希望最小化依賴請求的數量及其大小。

這篇文章中討論的其他建議涵蓋了實現這些目標的幾種方法，包括：

• 消除渲染阻止資源
• 延遲屏幕外圖像
• 最小化CSS和JavaScript

此外，您可以優化資產載入的順序，以縮短CRP。這意味著將首屏內容移動到HTML文件的頂部。您可以在我們的文章「如何優化WordPress中的關鍵渲染路徑」中了解有關優化CRP的更多信息。

重要的是要注意，您並不需要大量的關鍵請求鏈。與其他許多建議不同，Google PageSpeed Insights不會將此審核視為「通過」或「失敗」。僅提供此信息以幫助您縮短載入時間。

3.保持較低的請求計數和較小的傳輸大小

瀏覽器必須執行的請求越多，以載入您的頁面，並且伺服器返回的資源越大，則網站花費的時間就越長。因此，Google建議您盡量減少要求的請求數量並減少資源規模。

與避免鏈接關鍵請求的建議一樣，此請求不會導致“通過”或“失敗”。取而代之的是，您將僅看到發出的請求數量及其大小的列表：

保持較低的請求數量和小的傳輸量建議

沒有要記住的理想請求數或最大大小。相反，Google建議您通過創建效果預算為自己設置這些標準。這是一組已定義的目標，可能與以下方面有關：

• 最大影像尺寸
• 使用的網路字體數量
• 您呼叫多少外部資源
• 腳本和框架的大小

制定績效預算為您提供了一套標準，以使您對自己負責。超出預算時，您可以決定是否要消除或優化資源以遵守預定準則。您可以在Google自己的指南中詳細了解如何創建一個。

4.縮小CSS

CSS文件通常大於其所需的大小，以使它們易於閱讀。其中可能包含各種回車符和空格，這些對於計算機理解其內容不是必需的。

縮小CSS是通過消除不必要的字元，空格和重複來壓縮文件的過程。 Google建議您這樣做，因為它可以減少CSS文件的大小，從而可以提高載入速度：

縮小CSS建議

我們建議使用諸如Autoptimize或WP Rocket之類的插件來縮小CSS文件。

5.縮小JavaScript

正如您可以通過縮小來減小CSS文件大小一樣，這同樣適用於您的JavaScript文件：

縮小JavaScript建議

Autoptimize或WP Rocket也可以為您的WordPress網站處理此任務。

6.刪除未使用的CSS

樣式表中的任何代碼都是必須載入的內容，以便頁面對用戶可見。如果您網站上的CSS實際上沒有用處，則會不必要地浪費您的性能。

這就是Google建議刪除所有未使用的CSS的原因：

刪除未使用的CSS建議

這裡的解決方案與消除渲染阻止CSS的解決方案基本相同。您可以以最適合您網頁的方式內聯或推遲樣式。您還可以使用諸如Chrome DevTools之類的工具來查找需要優化的未使用CSS。

7.最小化主線程工作

「主線程」是用戶瀏覽器的主要元素，負責將代碼轉換成訪客可以與之交互的網頁。它解析並執行HTML，CSS和JavaScript。此外，它負責處理用戶互動。

這意味著，當主線程處理您網站的代碼時，它也無法處理用戶請求。如果您網站的主線程工作時間過長，則可能會導致UX效果不佳以及頁面載入時間變慢。

Google PageSpeed將標記耗時超過四秒鐘的頁面以完成主線程工作並顯示可用的網頁：

最小化主線程工作建議

這篇文章的其他部分已經介紹了一些用於減少主線程工作量的方法，包括：

• 減少代碼
• 刪除未使用的代碼
• 實施緩存

但是，您可能還需要考慮代碼拆分。此過程涉及將JavaScript分成需要在需要時執行的捆綁包，而不是要求瀏覽器在頁面變得互動式之前先載入所有捆綁包。

Webpack通常用於實現代碼拆分。請注意，這是一種相當先進的技術，初學者通常應獨自承擔。

8.減少JavaScript執行時間

JavaScript執行通常是主線程工作的最主要貢獻者。 PageSpeed Insights有單獨的建議，如果此任務對您的網站的性能有重大影響，則會向您發出警報：

減少JavaScript執行時間建議

上面建議的減少主線程工作量的方法也應該在PageSpeed結果中解決此警告。

9.減少伺服器響應時間（TTFB）

到達第一位元組的時間（TTFB）是衡量瀏覽器在發出請求後從站點伺服器接收回第一位元組數據所需的時間。雖然這與您的整體網站速度不同，但可以理解的是，將TTFB設置得較低對您的網站性能有好處。

因此，減少伺服器響應時間是Google PageSpeed Insights的建議之一。如果您能夠達到較低的TTFB，則會在「通過審核」下看到以下消息：

伺服器響應時間很短

有幾個因素會影響您的TTFB。降低它的一些策略包括：

• 選擇高質量的虛擬主機提供商
• 使用輕量級主題和插件
• 減少您網站上安裝的插件數量
• 利用內容分發網路（CDN）
• 實施瀏覽器緩存
• 選擇可靠的域名系統（DNS）提供商

我們在TTFB上的帖子是有關該領域優化的更多詳細信息的絕佳資源。

10.適當大小的圖像

圖片等媒體文件可能會真正拖累您網站的性能。適當調整它們的大小是減少載入時間的簡單方法：

適當大小的圖像建議

如果您的頁面包含的圖像大於所需的圖像，則可以使用CSS來適當調整它們的大小。這比最初簡單地以正確的大小載入圖像需要更長的時間，因此會影響頁面的性能。

要解決此問題，您可以上傳適當尺寸的圖像，也可以使用「響應式圖像」。這涉及為各種設備創建大小不同的圖像。

您可以使用srcset屬性（添加到 標籤以指定其他尺寸的替代圖像文件。瀏覽器可以閱讀此列表，確定最適合當前屏幕的選項，並提供該圖像的版本。

例如，假設您有一個標題圖像，並且想要使其具有響應性。您可以上傳800、480和320像素寬的三個版本。然後您將應用srcset屬性，如下所示：

srcset屬性指定不同的可用文件，大小屬性根據當前屏幕大小告訴瀏覽器應使用哪個文件。

11.延遲屏幕外圖像

延遲屏幕外圖像的過程通常稱為「延遲載入」。這意味著，與其使瀏覽器在顯示上述內容之前不載入頁面上的每個圖像，它只會載入立即可見的圖像。

頁面可見之前較少的載入意味著更好的性能，這就是Google建議使用此方法的原因：

推遲屏外圖像建議

有幾個專門用於延遲載入的WordPress插件，包括a3延遲載入和WP Rocket的延遲載入。各種圖像和性能優化插件（例如Autoptimize）也具有延遲載入功能。查閱有關在WordPress上延遲載入圖像和視頻的完整指南。

12.有效編碼圖像

正如我們在本文前面提到的，圖片對您網站的性能有重大影響。您可能要考慮的最基本的優化最佳實踐之一是壓縮，它可以幫助減小文件大小，以便更快地載入它們。這也是遵循Google推薦的有效編碼圖像的主要方法：

有效編碼圖像推薦

關鍵是要在不犧牲圖像本身質量的前提下，使文件最小。 Imagify和Smush等插件可以幫助完成此任務。您可以在我們的圖像優化指南中了解有關它們的更多信息。

影響您是否「通過」或「失敗」有效編碼圖像審核的其他建議包括：

• 以正確的尺寸提供圖片
• 實施延遲載入（延遲屏幕外圖像）
• 將圖像轉換為下一代文件格式，例如WebP
• 將視頻格式用於動畫內容，例如GIF

除了壓縮圖像之外，您還可以按照本文其他地方所述的步驟執行這些建議。

13.以下一代格式提供圖像

有些圖像文件格式的載入速度比其他格式更快。不幸的是，它們不是您常用的PNG或JPEG格式。 WebP圖片正在成為新的標準，如果您的圖片不遵守，Google PageSpeed將通知您：

推薦下一代格式的圖像

似乎很難滿足這個建議，因為您的WordPress網站上可能已經有很多圖像。幸運的是，有一些插件可以提供幫助。例如，Imagify和Smush都提供WebP轉換功能。

14.對動畫內容使用視頻格式

在各種情況下，GIF都是視覺內容的有效形式。教程演練，功能評論，甚至幽默的動畫都可以使您的帖子更加生動有趣，並使其對讀者更有價值。

不幸的是，這些好處會損害您的性能。 GIF要求載入，這就是為什麼PageSpeed Insights建議改為提供視頻內容的原因：

使用視頻格式推薦動畫內容

不幸的是，將GIF轉換為視頻格式並不是最簡單的過程。首先，您必須確定要使用的視頻類型：

• MP4：產生稍大的文件，但與大多數主流瀏覽器兼容。

• WebM：儘管瀏覽器兼容性有限，但仍是最優化的視頻格式。

在做出最適合您的網站的選擇之後，您需要轉換文件格式。最好的方法是通過命令行。首先，請安裝FFmpeg。這是用於轉換文件格式的開源工具：

FFmpeg文件格式轉換工具，用於視頻和音頻

然後，打開命令行界面並運行以下命令：

ffmpeg -i input.gif output.mp4

這會將文件名為input.gif的GIF轉換為文件名為output.mp4的MP4視頻。但是，更改格式僅僅是開始。現在，您需要以一種使它看起來像動畫GIF的方式將結果視頻嵌入WordPress網站。

嵌入視頻內容以製作動畫

您可能已經注意到，如果您曾經看過GIF，它們與普通視頻略有不同。它們通常會自動播放並循環播放，並且始終沒有聲音。在WordPress網站上嵌入新的MP4或WebM文件不會產生這些功能。

但是，您可以使用一些非常簡單的代碼來重新創建它們。將您的視頻上傳到媒體庫，然後將以下內容添加到頁面或發布您要包含GIF的位置：

這會將指定的屬性應用於您的視頻，使其看起來更像「 GIF格式」。只需修改文件名和類型以匹配您的資源即可。有關此主題的更多詳細信息，建議閱讀Google關於將GIF轉換為視頻的指南。

15.確保在Webfont載入期間文本仍然可見

像圖像一樣，字體往往是需要較長時間載入的大文件。在某些情況下，瀏覽器可能會隱藏您的文本，直到您使用的字體完全載入為止，這將導致Google PageSpeed Insights提出以下建議：

確保在建議字體載入期間文本仍然可見

Google建議您以@ font-face樣式應用Font Display API交換指令來解決此問題。為此，請訪問樣式表（style.css），然後在@ font-face下的src屬性後添加以下內容：

字體顯示：交換

您可以在我們的文章《如何在WordPress中更改字體》和有關託管本地字體的深入指南中了解有關優化網路字體的更多信息。

16.啟用文本壓縮

Google PageSpeed Insights的「啟用文本壓縮」建議是指使用GZIP壓縮：

啟用文字壓縮建議

在某些情況下（如上圖所示），伺服器將自動啟用文本壓縮。如果您的網站不是這種情況，則有兩種選擇可以遵循此建議。

首先是安裝具有GZIP壓縮功能的插件。如果您願意為此付費，WP Rocket是一個可行的解決方案。

您也可以手動壓縮文本。這涉及到編輯.htaccess文件，這可能會帶來風險，因此請確保您手頭有最新備份。

大多數WordPress網站都在Apache伺服器上運行。啟用GZIP壓縮的代碼如下所示：

＃壓縮HTML，CSS，JavaScript，文本，XML和字體
  AddOutputFilterByType DEFLATE應用程序/ javascript
  AddOutputFilterByType DEFLATE application / rss + xml
  AddOutputFilterByType DEFLATE application / vnd.ms-fontobject
  AddOutputFilterByType DEFLATE應用程序/ x字體
  AddOutputFilterByType DEFLATE應用程序/ x-font-opentype
  AddOutputFilterByType DEFLATE應用程序/ x-font-otf
  AddOutputFilterByType DEFLATE應用程序/ x-font-truetype
  AddOutputFilterByType DEFLATE應用程序/ x-font-ttf
  AddOutputFilterByType DEFLATE應用程序/ x-javascript
  AddOutputFilterByType DEFLATE application / xhtml + xml
  AddOutputFilterByType DEFLATE應用程序/ xml
  AddOutputFilterByType DEFLATE字體/ opentype
  AddOutputFilterByType DEFLATE字體/ OTF
  AddOutputFilterByType DEFLATE字體/ ttf
  AddOutputFilterByType DEFLATE image / svg + xml
  AddOutputFilterByType DEFLATE圖片/ x-icon
  AddOutputFilterByType DEFLATE文本/ CSS
  AddOutputFilterByType DEFLATE text / html
  AddOutputFilterByType DEFLATE文本/ javascript
  AddOutputFilterByType定義文本/純文本
  AddOutputFilterByType DEFLATE text / xml

  ＃刪除瀏覽器錯誤（僅適用於真正的舊瀏覽器）
  BrowserMatch ^ Mozilla / 4 gzip-only-text / html
  BrowserMatch ^ Mozilla / 4 .0[678] 無gzip
  BrowserMatch bMSIE！no-gzip！gzip-only-text / html
  標頭附加隨用戶代理

您應該將其添加到.htaccess文件中的#END之後。如果您的WordPress網站恰好位於Nginx伺服器上，則應將以下代碼添加到nginx.conf文件中：

36 gzip；
37 gzip_disable「 MSIE [1-6]。（？！。* SV1）「;
38 gzip_vary on;
39 gzip_types文本/純文本/ css文本/ javascript應用程序/ javascript應用程序/ x-javascript;

如果您想檢查網站的文本壓縮情況，建議您使用GiftOfSpeed之類的工具：

GiftOfSpeed GZIP壓縮檢查

這將使您知道是否已成功實施GZIP壓縮，站點正在運行的伺服器類型以及其他一些關鍵細節。

17.預連接到必需的起點

您很可能在您的網站上至少擁有一個第三方資源-Google Analytics（分析）是一個常見的例子。瀏覽器可能需要一些時間才能建立與這些資源的連接，從而降低了載入速度。

使用預連接屬性可以立即告訴瀏覽器您頁面上需要載入第三方腳本。請求這些請求的過程可以儘快啟動，從而改善您的性能。

如果Google認為您的網頁可以從此技術中受益，則會看到「預連接到所需來源」建議：

預連接到必需的來源建議

有幾種方法可以實現這種優化策略。如果您願意編輯WordPress主題文件，則可以在header.php文件中添加鏈接標記。這是一個例子：

在這種情況下，標籤會告知瀏覽器他們需要儘快建立與example.com的連接。 Google PageSpeed Insights將列出您應為其添加帶有預連接屬性的鏈接標籤的所有相關資源。

另一種選擇是使用插件來達到相同的效果。 Perfmatters包含預連接功能（免責聲明：我是Perfmatters的創始人之一）。 WP Rocket和Pre *派對資源提示包括類似的功能。

18.預載密鑰請求

與預先連接到必需的來源建議類似，遵循此建議可以使瀏覽器必須向站點伺服器發出的請求數量減至最少。但是，預載入密鑰請求不是連接到第三方資源，而是指在您自己的伺服器上載入關鍵資產：

預載關鍵請求建議

實施此技術也與先前的建議非常相似。您可以將指定PageSpeed Insights中列出的資源的鏈接標籤添加到header.php文件中：

您還可以使用Perfmatters，WP Rocket或Pre * Party Resource Hints合併此標籤。

19.避免多個頁面重定向

當您希望一個URL指向另一個URL時，將使用重定向。在您移動或刪除網站上的頁面時，通常會使用它們。一般而言，使用重定向沒什麼問題，但它們確實會導致載入時間的額外延遲。

如果您的網站上重定向過多，則可能會在Google PageSpeed Insights中看到以下建議：

避免多頁重定向建議

為了響應此建議，您唯一可以做的就是確保僅在絕對必要時才使用重定向。您可以在我們的文章「 WordPress重定向–更好的性能的最佳做法」中了解有關創建它們的過程的更多信息。

20.通過高效的緩存策略服務靜態資產

如果您已經使用Google PageSpeed Insights已有一段時間了，那麼您可能會更了解此建議，即「利用瀏覽器緩存」警告。在第5版中，它現在被標記為使用有效的緩存策略服務靜態資產：

具有高效緩存策略建議的伺服器靜態資產

這個建議有幾層我們需要克服。首先是「緩存」的含義。簡而言之，這是瀏覽器保存頁面副本的過程，因此可以在以後訪問時更快地載入它們。

WordPress網站實現緩存的最常見方式是使用插件。 WP Rocket和W3 Total Cache是​​受歡迎的選項。但是，一些託管服務提供商-包括我們在Kinsta的我們-通過其伺服器啟用緩存。在安裝緩存插件之前，請確保檢查主機是否屬於這種情況。

為網站啟用緩存後，您可以擔心此建議的第二部分，即緩存策略的「效率」。瀏覽器會定期清除其緩存，以使用更新的副本刷新它們。

理想情況下，您希望此時間段更長而不是更低。如果您每隔幾個小時就要從瀏覽器緩存中清除網站，那將使您首先使用此技術的目的無法實現。您可以使用Cache-Control和Expires標頭來優化緩存的有效期限。

添加緩存控制標頭

使用以下代碼在Nginx中添加Cache-Control標頭：

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

您應該將此添加到伺服器的配置文件中。在上面的示例中，指定的文件類型設置為30天後過期。

具有Apache伺服器的用戶應在其.htaccess文件中使用此代碼段：

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

在#BEGIN WordPress之前或#END WordPress之後添加此代碼。在此示例中，緩存過期時間設置為84,600秒。

添加過期標題

緩存控制標頭現在幾乎是標準的。但是，有些工具（包括GTMetrix）仍在檢查Expires標頭。

通過將以下內容合併到伺服器塊中，可以將它們添加到Nginx伺服器：

位置〜* 。（jpg | jpeg | gif | png | svg）$ {
        365天到期；
    }

    位置〜* 。（pdf | css | html | js | swf）$ {
        過期2天；
    }

您應該根據文件類型設置不同的到期時間。如果將以下代碼添加到.htaccess文件中，Apache伺服器將產生相同的結果：

##過期標題培訓##

有效期至
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 ##

Once again, you should add this code either before #BEGIN WordPress or after #END WordPress.

Efficient Caching of Google Analytics

Ironically, the Google Analytics script you may have added to your pages』 headers in order to track user behavior has a cache expiration period of just two hours. This is likely so that, if updates are made to the platform, users will have access to the changes quickly.

This script will appear in the list of resources requiring your attention under the Serve static assets with an efficient cache policy recommendation. Since it belongs to a third party, you can』t change the expiration period with Cache-Control or Expires headers.

If this is the only script listed under this recommendation, you can still pass the audit:

Passed efficient cache policy audit

However, as we』ve noted throughout this post, your PageSpeed score matters less than your actual and perceived performance. In order to serve this resource efficiently, you may consider hosting Google Analytics locally.

Plugins like Complete Analytics Optimization Suite (CAOS) and Perfmatters will enable you to do this. You can read more about the process in our complete guide to this PageSpeed suggestion.

21. Reduce the Impact of Third-Party Code

We』ve now mentioned a few different ways in which third-party scripts can negatively impact your performance, and result in failed audits from PageSpeed Insights. Ideally, it』s best to limit your reliance on these tools in order to prevent adverse effects.

However, in some cases the best solution to a need your site has is to incorporate a third-party script. Google Analytics is an excellent example. Others include:

• Social media sharing buttons and feeds

• YouTube video embeds
• iFrames for ads and other content
• Libraries for JavaScript, fonts, and other elements

In cases where you deem the use of a third-party script necessary, it』s important to still reduce its impact on your site』s performance, as your PageSpeed analysis results will tell you:

Reduce the impact of third-party code recommendation

To load third-party code more efficiently, you can consider one of the techniques we』ve already mentioned in this post:

• Defer the loading of JavaScript
• Use link tags with preconnect attributes
• Self-host third-party scripts (as we described with Google Analytics above)

These methods should minimize the impact on your site』s performance.

22. Avoid Enormous Network Payloads

This recommendation is particularly relevant to your mobile visitors. Large payloads can require the use of more cellular data, thereby costing your users money. Minimizing the number of network requests needed to reach your pages can prevent this:

Avoid enormous network payloads recommendation

Google recommends keeping your total byte size to 1,600 KB or less. The methods most commonly used to achieve this goal are found throughout this post, including:

• Deferring CSS, JavaScript, and images that are below the fold
• Minifying code
• Compressing image files
• Using the WebP format for images
• Implementing caching

Follow the relevant steps for these strategies, and you should pass this audit without any additional effort.

23. User Timing Marks and Measures

This recommendation is only relevant if you』re using the User Timing API. This tool creates timestamps to help you evaluate your JavaScript』s performance. If you』ve set up the API for your site, you』ll see your marks and measures under this heading in PageSpeed Insights:

User Timing marks and measures recommendation

As you can see, this is another suggestion from Google that doesn』t result in a 『pass』 or 『fail』. PageSpeed Insights simply makes this information easily retrievable, so you can use it to assess areas that may require optimization.

If you』re interested in incorporating the User Timing API into your WordPress site, you can learn more in the Mozilla guide on the topic.

24. Avoid an Excessive Document Object Model (DOM) Size

In simplest terms, the DOM is how browsers turn HTML into objects. It involves the use of a tree-structure made up of individual nodes that each represent an object. Naturally, the larger your page』s DOM is, the longer it will take to load.

If your page exceeds certain standards regarding DOM size, it will recommend reducing the number of nodes as well as the complexity of your CSS styling:

Avoid an excessive DOM size recommendation

A common culprit if you』ve 『failed』 this audit in PageSpeed Insights is your WordPress theme. Heavy themes often add large volumes of elements to the DOM, and may also include convoluted styling that slows your site down. If this is the case, you may need to switch themes.

Are you struggling to score 100/100 on #Google PageSpeed? Here’s a tip: don’t obsess over your score and focus on what’s truly affecting your page load! ??

點擊鳴叫

摘要

Google PageSpeed Insights should be a staple in your webmaster toolbox. However, fixating on your score and obsessing over reaching the coveted 100/100 probably isn』t the best use of your time. It may take you away from other important tasks that could provide more significant benefits.

In this post, we covered the ways in which your Google PageSpeed Score does and doesn』t matter. We also shared some brief guidelines for putting the platform』s recommendations to work on your WordPress site, in order to improve its performance.

Do you have questions about Google PageSpeed Insights or optimizing your site』s performance? Ask away in the comments section below!

1.2K Shares

• Total1.2K
• 1.0K
• 3
• 1個
• 116
• 0
• 1個
• 0
• 0