如何在 Google PageSpeed Insights 中達到 100（在 WordPress 上）

如果有一個工具可以幫助您加快網站速度，那豈不是很棒？ 嗯，有！ Google PageSpeed Insights 就是這個名字，它是一項免費服務，可以解決您網站速度慢的問題。 在本文中，我們將了解它是什麼、它是如何工作的，以及如何在 WordPress 中達到難以捉摸的 Google PageSpeed Insights 100 / 100 分數。

什麼是 Google PageSpeed Insights？

Google PageSpeed Insights 是一種在線工具，用於測量您網站的速度和用戶體驗。 它測量網站在桌面和移動設備上的加載時間，並顯示有關網站性能的各種指標。 如果指標被判斷為次優，該工具會提供有關如何改進它們的建議。

只需轉到 Google PageSpeed Insights，輸入 URL，然後點擊分析。 Google 會在移動設備和桌面設備上判斷您的網站。 你可能會發現你在其中一項上的得分高於另一項。

谷歌過去常常給網頁打滿分 100 分，但現在不會了。

取而代之的是，谷歌測量了三個統計數據，它稱之為Core Web Vitals 。 這些都是：

• Largest Contentful Paint (LCP) ：網站主要內容的加載速度。 為了獲得良好的用戶體驗，該時間應為2.5 秒或更短。
• First Input Delay (FID) ：站點對用戶輸入的響應程度。 FID 應為100 毫秒或更短。
• Cumulative Layout Shift (CLS) ：衡量網頁的視覺穩定性。 0.1或更低的 CLS 分數是更可取的。

此外，Google 還會衡量以下內容：

• First Contentful Paint (FCP) ：網頁開始在屏幕上呈現所花費的時間。 一個好的 FCP 分數是1.8 秒或更短。
• Interaction to Next Paint (INP) ：衡量頁面對用戶交互的響應程度。 真正響應迅速的網站的 INP 為200 毫秒或更短。
• Time to First Byte (TTFB) ：服務器請求後發送數據的第一個字節所花費的時間。 0.8 秒或更短的 TTFB 是理想的。

在此之下，在“診斷性能問題”部分，Google PageSpeed Insights 會為您提供四個分數——性能、可訪問性、最佳實踐和 SEO。 90分以上是好成績，50到89分錶示可以改進，低於50分是不好的。

下面是谷歌的機會和診斷。 這些是您可以間接提高績效得分的方法。 性能指標對您的網站速度影響最大。

在我們探討如何提高網站性能之前，讓我們先了解一下為什麼網站速度很重要。

為什麼網站速度很重要？

網站速度對用戶和消費者行為有巨大影響。

完全加載移動著陸頁所需的平均時間為 22 秒[1] 。

隨著頁面加載時間從 1 秒增加到 3 秒，跳出的可能性增加 32% [2] 。

如果移動網站的加載時間超過 3 秒，則 53% 的訪問會被放棄[3] 。

顯然，如果您運營電子商務網站，速度慢的網站會導致轉化率下降，這是您需要解決的問題。 轉化率隨著網站加載時間的延長而下降[4] ：

• 在 2.4 秒內加載的頁面有 1.9% 的轉化率
• 3.3秒，轉化率為1.5%
• 4.2秒，轉化率不到1%
• 在 5.7+ 秒時，轉化率為 0.6%

高 PageSpeed Insights 分數與實際頁面速度

Google 根據實驗室數據（在受控條件下收集）和現場數據（從野外的真實用戶收集）計算 PageSpeed Insights 分數。

要測試您的實際頁面速度，您可以使用在線工具，例如 GTmetrix 或 Pingdom 的速度測試。

使用這些工具，您可以在不同位置測試您的站點。

您可以在 GTmetrix 上看到德克薩斯州聖安東尼奧的測試服務器的頁面加載時間為 666 毫秒——這是一個非常好的分數。

在香港，頁面加載時間稍長一些——1.4 秒。

Pingdom 還在華盛頓特區的測試中顯示了 850 毫秒的快速加載時間，但在日本東京的測試加載時間較慢，為 1.06 秒。

上升趨勢工具可讓您跨移動設備和桌面設備進行測試。 這是來自法國巴黎的 WP Shout 網站在 iPad Air 上的結果——加載時間為 1.9 秒：

因此，Google PageSpeed Insights 得分與實際頁面速度之間似乎存在相關性。

如何在 WordPress 上獲得理想的 Google PageSpeed Insights 100 分數

現在您知道了為什麼高 Google PageSpeed Insights 分數很重要，是時候看看可以改進它的方法了。

提高 Google PageSpeed Insights 得分的方法

1.優化圖片

針對 Web 優化圖像是提高性能分數的簡單方法。

您需要一個圖像壓縮插件，例如 Optimole。

此插件可以將您的圖像壓縮到較小的文件大小，以便更快地加載它們。 您可以將它們用於所有新圖像上傳以及現有圖像。 Optimole 的優點在於它還可以通過 CDN 傳送您的圖像，從而實現更快的傳送。

它還可以將您的圖像轉換為 WebP 格式，這種格式比 JPG 或 PNG 文件更小。 這將幫助您通過Serve images in next-gen formats推薦。 此外，您可以通過為它們設置最大寬度來調整任何較大圖像的大小。

確保您的圖像具有指定的寬度和高度屬性以滿足圖像元素沒有明確的寬度和高度的機會。

Optimole 插件還包括延遲加載，它只在用戶向下滾動到圖像或視頻時才加載它們。 這有助於延遲屏幕外圖像機會，如下所示。

另一種減小圖像文件大小的方法是使用 SVG 圖像。 SVG 是矢量文件，因此可以輕鬆地重新縮放它們而不會影響其文件大小。 它們在 WordPress 中不受原生支持，但您可以使用 SVG Support 或 Safe SVG 等插件將它們添加到您的媒體庫中。

2. 避免過大的 DOM 大小

什麼是 DOM？ DOM 代表文檔對像模型，是一種樹狀結構，包含頁面的所有 HTML 元素、屬性和文本。

減少 DOM 大小的幾個策略是將長網頁分成較小的部分，並避免在 CSS 中使用 {display:none;} 聲明隱藏 DOM 節點。

可以增加 DOM 大小的一個因素是使用頁面構建器。 頁面構建器傾向於增加頁面上 <div> 元素的數量。

如果您使用 Elementor，從 3.0 版開始，一些 HTML 包裝器已被刪除，這減少了 DOM 的大小。

或者您可以轉而使用 Gutenberg 而不是頁面構建器，就像 Chris Lema 所做的那樣。

您可以在這篇文章中找到更多關於避免 DOM 尺寸過大的提示。

3.優化JavaScript和CSS

可以縮小和壓縮CSS 和 JS 文件以提高性能。 縮小會刪除 CSS 或 JS 文件中的所有空格，而 GZIP 壓縮會刪除重複的字符，例如 {.

允許您縮小 CSS 或 JS 的 WordPress 插件包括 Autoptimize（免費）和 WP Rocket（付費）。

縮小可能會破壞您的站點，因此如果您遇到問題，縮小的插件會從縮小選項中排除文件。

WP Rocket 還可以選擇將您的 CSS 和 JS 文件合併到一個文件中，從而減少請求。 但是，如果您的 Web 服務器使用 HTTP/2，則您不會想要這樣做。 你可以先測試你的服務器是否運行 HTTP/2 來檢查。

您可以使用大多數緩存插件激活 GZIP 壓縮。 如果您的 Web 服務器是 Apache 或 LiteSpeed，該插件可以直接寫入您的 .htaccess 文件或提供行以復制並粘貼到其中。 如果您使用 NGINX 或 IIS，Hummingbird 還提供了在這些服務器上啟用壓縮的配置。

如果您的網站上有任何未使用的 CSS 或 JS，是時候將其刪除了。 您可以使用 Chrome DevTools 查找未使用的 CSS 和 JS，它們很可能來自插件。

您還可以使用 Rapidload 的 CSS Saver 來查看您的網站可能丟失的 CSS：

4.消除渲染阻塞資源

渲染阻塞 CSS 和 JS 是被標記為阻塞網頁第一次繪製的文件。

Autoptimize 插件可以解決這個問題，從而提高您的 First Contentful Paint 和 Largest Contentful Paint 分數。

5.減少初始服務器響應時間

服務器響應時間取決於幾個因素：您使用的主題和插件，以及您擁有的網絡託管類型。

考慮刪除您不使用的任何多餘插件或切換到輕量級主題，例如 Astra。

對於託管，我們建議通過共享網絡託管託管 WordPress 託管。 託管 WordPress 主機包括服務器優化作為服務的一部分。

6.確保文字在網頁字體加載期間保持可見

如果您使用網絡字體，谷歌的建議將阻止您的頁面文本在加載時不可見。

建議建議添加 font-display: swap; 到樣式表中的 @font-face 聲明。

下面的屏幕截圖顯示瞭如何使用 Asset CleanUp 插件添加此屬性。

7. 保持低請求數和小傳輸尺寸

Google PageSpeed Insights 記錄網絡服務器請求的文件數量和這些文件的大小。

如果這裡有大量數字，可以通過以下方式減少它們：

• 優化您的圖像和媒體文件。 建議使用視頻文件代替 GIF 動畫。
• 優化你的 CSS 和 JS
• 優化字體和第三方腳本
• 減小 HTML 文件的大小

8. 避免鏈接關鍵請求

關鍵請求是對加載頁面必不可少的請求。 例如，徽標可能是一項關鍵請求。

長鍊和包含大量下載的鏈被認為不利於您的網站速度。 它們會影響 First Contentful Paint 和 Largest Contentful Paint。

根據谷歌的說法，為了避免鏈接關鍵請求，你應該：

• 最小化關鍵資源的數量：消除它們、推遲它們的下載、將它們標記為異步等。
• 優化關鍵字節數以減少下載時間（往返次數）。
• 優化剩餘關鍵資源的加載順序：儘早下載所有關鍵資源，縮短關鍵路徑長度。

您可以通過以下方式做到這一點：

• 通過在引用它們的 HTML 中使用“link rel=”preload”來預加載關鍵請求、圖像和字體。
• 縮小你的 CSS 和 JavaScript。
• 消除渲染阻塞資源。

您可以使用 WP Rocket 之類的插件來為您執行這些任務。

9. 避免長時間的主線程任務並儘量減少主線程工作

長主線程任務是 JavaScript 任務（超過 50 毫秒），它會延遲用戶的交互時間。

最小化主線程工作意味著減少解析、編譯和執行 JS 的時間。

您可以通過以下方式減少 JavaScript 任務的長度和時間：

• 盡量減少使用臃腫的插件
• 在本地託管您的字體和分析腳本
• 縮小或延遲 JS 和 CSS
• 延遲加載背景圖片

有關最小化 WordPress 中主線程工作的更多提示，請參閱以下文章。

10. Avoid large layout shiftsAvoid large layout shifts 避免大的佈局偏移

佈局偏移有助於累積佈局偏移指標，並給用戶留下頁面跳轉的印象。

您可以通過以下方式解決此問題：

• 為您的媒體添加維度
• 預加載字體
• 優化您的動態內容，例如時事通訊註冊表單

有關更多信息，請閱讀本指南以修復 WordPress 中的累積佈局偏移。

11.減少第三方代碼的影響

第三方腳本是託管在別處的腳本，例如 Google Analytics 跟踪或 YouTube 嵌入。

在可能的情況下，嘗試在本地託管腳本。 你不能用 YouTube 做到這一點，但你可以在本地託管你的分析代碼和字體。

您可以使用本地 Google 字體插件在您自己的服務器上託管 Google 字體。

WordPress 的本地 Google Analytics – 緩存外部請求插件將在本地託管您的 Google Analytics。

12. 使用 CDN

內容交付網絡是一個遠程服務器網絡，它為用戶存儲和提供網絡內容。

CDN 可以通過緩存靜態文件（例如 HTML、CSS 和 JavaScript）並從用戶附近的位置提供這些文件來提高您網站的速度。 這有助於降低您的 First Contentful Paint 和 Largest Contentful Paint 分數。

我們在 WP Shout 中使用 Cloudflare CDN。 您可以免費開始使用它。

詳細了解為何應使用 CDN 和最佳選擇。

關於如何獲得 Google PageSpeed Insights 100 分數的結論

我們已經看到，影響網站速度的因素有很多。 這些技巧將幫助您獲得完美的分數。

不過，您不應該過於執著於獲得 100 分——90+ 分仍然非常好。 閱讀 David 關於優化站點性能的帖子，了解我們為提高分數所做的工作。