什麼是 Core Web Vitals 以及如何優化它

2021 年，谷歌將頁面體驗作為排名因素。 它的主要目的是提高網絡性能。 隨著頁面體驗更新，如果您希望您的網站在谷歌搜索結果中排名，核心網絡活力已成為一個重要的考慮因素。

當有人在谷歌上搜索特定關鍵字時，谷歌將如何確定它必須在頂部呈現哪個網站以及在底部呈現哪個網站。 好吧，毫無疑問，它首先考慮的是內容。 內容將始終主導排名，但除了內容之外，谷歌還衡量網頁的許多其他元素，如關鍵字、這些關鍵字在頁面中的使用、反向鏈接等等。 頁面性能也是其中之一。 谷歌通過核心網絡生命力衡量頁面性能。

在本文中，我們將討論 Core Web Vitals 以及如何對其進行優化以在搜索結果中排名更高並獲得更多流量。

什麼是核心網絡生命力

Largest Contentful Paint、First Input Delay 和 Cumulative Layout Shift 是構成 Core Web Vital 的三個關鍵性能指標，它們衡量用戶加載頁面的速度和效率，以及網站元素的交互性和穩定性在整個加載過程中保持不變。

讓我們進一步分解它以便更好地理解。

1. LCP（Largest Contentful Paint）

LCP 評估網站首屏最大元素（圖片、視頻、動畫、文本等）加載和顯示的速度。

一個好的 LCP 是 2.5 秒，而 2.5-4 秒之間的任何東西都需要改進，超過 4 秒被谷歌認為是差的。

最大的內容油漆統計

1. Largest Contentful Paint 佔 Google Lighthouse 性能得分的 25%。
2. 43% 的移動 URL 和 44% 的桌面 URL 通過了 2.5 秒的 Largest Contentful Paint 基準。
3. 根據研究，B2B 網站的平均移動 Largest Contentful Paint 分數為 7.05s，遠高於獲得及格分數所需的 2.5s 分數。
4. 根據研究，零售網站的平均移動 Largest Contentful Paint 分數為 9.17s，遠高於獲得及格分數所需的 2.5s 分數。

2. FID（首次輸入延遲）

頁面的 FID 是瀏覽器開始處理事件處理程序以響應用戶與頁面的第一次交互（例如單擊、點擊）所花費的時間。

良好的 FID 低於 100 毫秒，而介於 100-300 毫秒之間的任何東西都需要改進，高於 300 毫秒被認為是差的。

第一個輸入延遲統計

1. 首次輸入延遲佔 Google Lighthouse 性能得分的 25%。
2. 89% 的移動 URL 和 99% 的桌面 URL 滿足 100 毫秒的首次輸入延遲基準。

3. CLS (Cumulative Layout Shift)

CLS 是一種有用的以用戶為中心的衡量視覺穩定性的指標，因為它有助於量化用戶遇到意外佈局更改的頻率。 這是視覺穩定性測量的重要方面。

良好的 CLS 低於 0.1，而介於 0.1 和 0.25 之間的任何東西都需要改進，而高於 0.25 則被認為是差的

累積佈局變化統計

1. Cumulative Layout Shift 佔 Google Lighthouse 性能得分的 5%。
2. 46% 的移動 URL 和 47% 的桌面 URL 通過了 .1 的 Cumulative Layout Shift 基準。

現在為什麼 Core Web Vitals 很重要

像 Core Web Vitals 這樣的工具有助於提高您的網站在搜索結果中的排名。 它們至關重要，因為它們可以告訴 Google 網站的運行狀況以及可以改進的地方。

不可否認，Core Web Vitals 提升了用戶體驗作為排名元素的重要性。

因此，如果您在一個內容質量幾乎相當的領域進行競爭，那麼針對 Core Web Vitals 進行優化會產生巨大的差異，這意味著如果 Google 必須顯示具有相同內容質量的兩個頁面，那麼它會更喜歡具有良好的 Core Web Vitals 得分。 請記住，沒有什麼可以取代您網站上的優質內容。

Google 的 John Mueller 對 Core Web Vitals 的看法

Core Web Vitals 要記住的另一件事是，它不僅僅是一個隨機排名因素。 它還會影響您網站排名後的可用性（當人們訪問時）。 如果您獲得更多流量（來自其他 SEO 努力）並且您的轉化率很低，那麼該流量將不會像您擁有更高轉化率時那樣有價值（假設 UX/速度會影響您的轉化率，這通常會影響）。

簡而言之，擁有可靠的 Core Web Vitals 不僅僅是搜索引擎優化。 每個網站所有者都應努力提升訪問者的整體體驗。

即使您的網頁內容非常出色，您仍然需要確保網站的每個方面都經過優化以獲得較高的搜索引擎排名，以便您的網站對目標受眾可見。 Core Web Vitals 還強調了用戶體驗的重要性。

如何衡量 Core Web Vitals

您可以在幾個測試、報告和擴展的幫助下檢查您網站的核心網絡活力。

其中最重要的是：

• PageSpeed Insights 的 Core Web Vitals 評估；
• Google Search Console 中的 Core Web Vitals 報告；
• Core Web Vitals Chrome 擴展程序。

1. PageSpeed Insights 中的核心 Web Vitals 評估

Google PageSpeed Insights (PSI) 分為兩個部分：

• 確定您的實際用戶體驗（Core Web Vitals 評估）
• 確定性能問題（實驗室數據、PSI 分數）。

專注於第一部分以提高您的 Core Web Vitals 分數。 Field Data 報告合併了此分析。 本研究的數據來自 Chrome 用戶體驗報告 (CrUX)。 此數據基於實際用戶與您網站的互動。 谷歌在確定搜索引擎排名時會考慮這些字段結果。

PSI 的“診斷”部分也是一個很好的資源，可用於詳細了解可以改變三個指標中的任何一個的因素：

PSI 在確定總體優化分數和提供優化建議時會考慮真實用戶指標和實驗室數據。

雖然此信息很有用，但它是在實驗室中使用特定設備和網絡在受控環境中收集的。 但是，您網站的某些訪客可能使用過時的技術或功率不足的連接。 這就是為什麼將實驗室結果與您網站的實際性能進行比較並不是一個好主意。

PSI 並不總是提供字段摘要。

當 CrUX 沒有從現場收集到足夠的數據時，就像小型網站經常出現的情況一樣，就會出現這樣的問題。 值得慶幸的是，我們可以從其他來源收集現場數據。

2. Google Search Console 中的 Core Web Vitals 報告

Google Search Console (GSC) 中添加了兩份新的 Core Web Vitals 報告，一份用於移動設備，一份用於桌面設備。

每個報告都提供有關字段數據和 URL 組性能的信息。

這些報告非常適合發現跨多個 URL 的常見問題。 因此，您將收到有關整個網站的信息，而不僅僅是一頁。

例如，如果您有大量相同的頁面，其中最大的元素是圖像，則每個頁面的 LCP 指標都相同。 在這種情況下，GSC 會在每個頁面上發現 LCP 問題。

簡而言之，這些新的 GSC 報告是跟踪整個站點的核心網絡生命力性能的最顯著方法。

3.使用Chrome用戶體驗報告（CrUX）獲取現場數據

可以通過以下兩種方式訪問 CrUX 數據集

• Chrome 用戶體驗報告 API - 要訪問此開發人員必須熟悉 JavaScript 和 JSON。
• BigQuery – 需要 Google Cloud 項目和 SQL 技能。

您需要做的不僅僅是通過 PSI 或 GS​​C 傳遞頁面。 但是，它們提供了更多用於排列和可視化數據的選項。 例如，BigQuery 具有數據切片和與其他數據集連接的功能。

如果您擁有實施這兩種策略的資源和技術知識，請嘗試這兩種策略。

關於 Core Web Vitals 的一些重要統計數據

1. 前 100 個桌面域中有 56% 通過了 Core Web Vitals
2. 重品牌效應——主要品牌即使表現不佳也排名很高。
3. 2022 年 2 月，前 100 名移動設備中有 61% 通過了 Core Web Vitals
4. 2022 年 2 月，美國前 100 個域名的平均加載時間在桌面上為 2.38 秒，在移動設備上為 2.32 秒——低於谷歌 2.5 秒的合理閾值。
5. 2022 年 2 月，桌面和移動設備的平均 CLS 分數分別為 0.11 和 0.08——這是前 100 大網站的移動設備平均 CLS 首次低於谷歌 0.1 的合適閾值
6. 2020 年 1 月，只有 22% 的桌面和 27% 的移動前 100 個域分別通過了 Core Web Vitals。 快進到 2022 年 2 月，這一比例在台式機上翻了一番以上，達到 56%，在移動設備上達到 62%。 這表明表現最好的域在網絡性能方面取得了顯著進步。
7. Top 100、B2B、Healthcare 和 Dict/Reference 站點在兩種設備上的平均 LCP 為 2.5 秒或更短。
8. 平均而言，旅行的移動 LCP 比字典/參考網站差 1.6 倍。
9. 平均而言，Travel 的桌面 LCP 比 B2B 域差 1.5 倍。
10. 位置 1 的 URL 比位置 9 的 URL 更有可能通過 Core Web Vitals 評估 10%。
11. 從位置 1 到位置 5，每個位置的 Core Web Vitals 評估通過率降低了 2%。

如何優化核心網絡生命力

既然我們已經牢牢掌握了 Core Web Vitals 及其功能，我們可以將注意力轉向一些建議的改進 Core Web Vitals 的步驟。 請記住，您的測試結果將決定您提高分數所需採取的步驟。 因此，必須考慮 PageSpeed Insights（或您使用的其他測試工具）提出的意見和建議。

以下是經過驗證的提高 Core Web Vitals 分數的基本策略。

1.使用內容分發網絡

使用 CDN 可以在很大程度上提高站點性能。 使用 CDN 的網站加載速度相對較快。 為什麼？ 因為 CDN 使服務器和最終用戶之間的數據傳輸變得快速。

CDN 是一個龐大的互連服務器網絡。 您可以使用 CDN 將您網站的內容存儲在許多服務器上。 當用戶訪問您的網站時，地理位置最近的服務器會向他呈現網站，從而減少數據傳輸時間。

通過使用 CDN，您可以減少用戶的 LCP 加載時間。 Time-to-First-Byte 也可以通過使用 (TTFB) 來減少。

2.優化圖片

另一種提高 LCP 的方法是通過圖像優化。 如果圖像具有高分辨率，則它們的尺寸會很大，並且需要花費合理的時間來加載，這會對 LCP 分數產生不利影響。

使用壓縮圖像可以加快加載速度。 TinyJPG 等許多網站都可以免費減小圖像的大小而不影響其質量。 通過確保圖像的大小和尺寸正確，可以進一步優化圖像。

因此，明智的做法是確保您沒有在網站的某些區域使用不必要的圖像尺寸。 包括適當的屬性可以幫助您的瀏覽器為頁面的各個部分提供理想的空間量，從而減少不斷改變佈局的需要。

通過更改源代碼，您可以更改媒體文件的寬度和高度屬性。

3.實現延遲加載

您的 LCP 和頁面加載時間都可以從使用延遲加載中獲益。 Smush 只是提供延遲加載的幾個 WordPress 插件的一個例子。

延遲加載，也稱為按需加載，是一種提高網頁內容性能的方法。

延遲加載有助於僅加載必要的部分並延遲加載其餘部分，直到用戶需要它，這與批量加載相反，批量加載一次加載整個網頁並一次性呈現。

4.優化您的網站字體

您在網站上使用的字體會像圖像一樣影響其加載時間。 這是因為每個字體粗細組合都需要瀏覽器加載整個字體系列。

Web 字體優化是提高站點速度的簡單方法。 這是因為優化的網絡字體在用戶計算機上佔用的空間更少，加載速度更快。

另一方面，如果尚未加載相關的網絡字體，瀏覽器可能不會自動呈現文本組件。 但是，切換到替代字體可能會導致不必要的佈局更改，從而降低您的 CLS 分數。

在為您的網站決定字體時要小心。 如果您使用兩種以上的字體而不是將每種字體應用於每個元素，最好使用全局字體來選擇性地應用必要的類型和粗細。 使用此方法，您可以將字體下載限制為內容所必需的字體。

5.升級您的 WordPress 主機

如果站點加載時間過長，則可能表示更改託管計劃。 將您的託管從共享託管更改為專用託管可以在很大程度上提高 FCP。

與其選擇最便宜的，不如選擇提供您需要的所有功能的最佳託管站點是一個明智的決定。 WordPress 主機提供的服務質量對於網站的成功至關重要。 它具有深遠的影響，從頁面加載時間到安全性。 特別是如果您有一個大型或複雜的網站，這不是偷工減料的地方。 相反，升級您的託管服務提供商或計劃是優化您的網站和縮短加載時間的最快但最強大的策略之一。

託管閱讀： Bluehost Review

6.消除渲染阻塞資源

如果沒有隨附的 HTML、CSS 和 JavaScript 文件，則無法呈現網站頁面。 這些文件都包含可以禁止人們訪問他們試圖查看的內容的腳本。

但是，您可以通過刪除渲染阻塞資源和任何不需要的 CSS 或腳本來防止這些腳本對您的用戶體驗產生負面影響（並反過來幫助提升核心網絡生命力）。

有許多方法可以實現這一點。 第一個是從 JavaScript 和 CSS 中刪除任何多餘的空格或註釋。 此外，您可以通過合併文件來減小 JavaScript 和 CSS 的大小。

7.延遲加載JavaScript

這是消除渲染阻塞元素的另一種方法，可以顯著提高 FID。

這通過阻止 JavaScript 文件的加載使網頁加載速度更快。

它加載頁面的其他內容，而不是等待 JS 文件加載。 除此之外，您還可以配置您的站點以快速加載出現在首屏的關鍵 CSS 腳本。 您可以通過從主要 CSS 文件中提取材料並將其內聯到您網站的代碼中來實現這一點。

8.實施內容緩存。

在增強用戶體驗方面，智能內容緩存是您可以使用的最強大的工具之一。 HTTP 協議的中央內容交付技術使用緩存，或臨時存儲早期請求的內容。 如果內容的緩存策略允許，傳送鏈中任何一點的組件都可以存儲它的副本以加速後續請求。

緩存對提高 Core Web Vital Scores 有很大幫助。

9.預加載英雄圖片

英雄圖片通常是出現在首屏內容之上的最重要的元素。 所以，如果他們加載得更快，那麼整體用戶體驗就會大大提高。 使用“rel=preload”鏈接屬性可以大大降低 LCP，這對於加載了 CSS 或 JavaScript 的英雄圖片特別有用。

10.避免將廣告或彈出窗口置於其他內容之上。

低 CLS 分數是由於在頂部添加內容而導致頁面內容移動的結果。

為廣告、iframe 和其他形式的動態內容留出空間。

不為它們分配特定空間肯定會破壞佈局，就像圖像和視頻一樣。 為避免內容溢出容器，請使用overflow: hidden 屬性並選擇具有足夠大小的容器。

11.分解長任務

這必須是您的首要任務。 當長任務延遲主線程時，它不能及時響應用戶的請求。 通過分解它們可以顯著提高網站性能。 這減少了 FID 並增強了 UX

12.停止或推遲運行任何不必要的第三方腳本

如果您自己的網站腳本與第三方的腳本衝突，則可能無法按時運行。 考慮哪些腳本對最終用戶最有幫助，並給予它們更高的優先級。 廣告和彈出腳本不應位於列表的頂部。

根據 Searchmetrics SEO 可見性，美國前 10 大域名在核心網絡生命力方面的表現如何。

所有指標以及域是否通過了核心網絡生命力指標，每月都會在域級別進行報告。 2022 年 2 月，75% 的維基百科桌面頁面加載時間不到 1.1 秒，該域的 FID（以毫秒為單位）和 CLS 均得分為 0，通過了 Core Web Vitals。

基於 Searchmetrics SEO 可見性指標的移動設備 CWV 的前 10 名。

在可能的情況下，使用域的移動版本。 然而，這主要依賴於 CrUX 的數據收集。 與桌面版相比，通過 Core Web Vitals 的移動網站比例更高。

結論

Core Web Vitals 改變了遊戲規則，可以改善每個人的網絡體驗。 這些衡量標準將繼續包含在 Google 的排名系統中。

這就是為什麼即使您沒有發現任何異常，也必須密切關注它們。

為了保持網站的成功運行，不斷提升用戶體驗至關重要。 多虧了眾多有用的工具和插件的可用性，這個過程可以變得比其他方式更簡單、更容易。 或者，如果您覺得這讓您望而生畏，那麼您可以聘請開發人員為您完成這項工作。