核心網絡生命力終極指南
已發表: 2022-05-06Core Web Vitals 是衡量網絡用戶體驗的重要現實世界網絡指標。 它們包含的三個指標是最大內容繪製 (LCP)、首次輸入延遲 (FID) 和累積佈局偏移 (CLS)。
2020 年 5 月，谷歌宣布 Core Web Vitals 將成為頁面體驗更新的一部分，因此成為排名因素。 自 2021 年 5 月以來，移動頁面體驗信號已用於排名，而桌面版本在 2022 年 2 月成為其中的一部分。
儘管對於 Core Web Vitals 對排名的實際影響存在不同意見，但這些指標提供了一種評估用戶體驗的可量化方式，超越了搜索排名。 確保您的頁面提供出色的體驗是滿足用戶在登陸您的頁面並完成業務目標後的需求的基礎。
本文解釋了每個 Core Web Vitals 指標測量的內容、如何分析您的分數以及如何改進它們。
什麼是核心網絡生命力？
Core Web Vitals 衡量用戶體驗的特定方面：
- Largest Contentful Paint 測量加載性能 — LCP 識別頁面加載期間最有可能加載主要內容的點。
- 首次輸入延遲衡量交互性——FID 評估用戶在與頁面交互之前必須等待多長時間。
- Cumulative Layout Shift 衡量視覺穩定性 - CLS 匯總可見頁面內容佈局中的意外變化。
對於這些指標中的每一個，Google 確定了對應於不同分數的適當閾值：
- 好的，
- 需要改進，
- 較差的。
為了讓大多數用戶更有可能達到設定的目標，您應該將至少 75% 的網頁瀏覽量設定在三個指標中的每一個的“良好”閾值內。 選擇此測量是為了確保頁面為大多數用戶提供良好的體驗，無論使用的設備和網絡條件如何。
還應該注意的是，除非沒有收集到足夠的數據，否則每個頁面都會測量 CWV 指標。 如果是這種情況，則可以從整個網站或其某些部分推斷出分數。
Ahrefs對 Core Web Vitals 進行了一項研究，並分析了大量網站的分數。 它表明，在 2022 年，大約33% 的網站通過了 CWV 指標，這一分數比前一年高出 10 個百分點。
致力於改進 CWV 指標絕對是一個不容忽視的 SEO 方面。 讓我們來看看每個指標、它的特徵以及優化它的方法。
最大含量塗料 (LCP)
LCP 識別頁面的主要內容加載所需的時間。 主要內容通常是主圖、視頻或大段文字。
LCP 的測量值取自首屏上的內容，這是用戶在加載頁面後最初看到的內容。
最大的元素有時會隨著頁面加載而改變。 例如，可以將內容添加到 DOM，或者佈局可能會發生變化，從而導致最大的元素從視口中移動。 因此，另一個元素可以被認為是最大的。
一個相關的指標是First Contentful Paint (FCP) ，指的是用戶訪問您的頁面後瀏覽器渲染 DOM 內容的第一個元素所花費的時間。
查看下圖，了解 FCP 發生時間和 LCP 啟動時間之間的聯繫。
你可以看到最大的元素是一個文本段落。 它出現在其他類似元素可見之前，例如圖像。 圖像加載後，我們可以觀察到它們仍然比文本小，然後仍然是頁面上最大的元素。
Google對 LCP有以下閾值：
| 好的 | < 2.5 秒 |
| 需要改進 | 2.5 – 4.0 秒 |
| 較差的 | > 4.0 秒 |
LCP 應該在頁面開始加載後的 2.5 秒內發生，以提供良好的體驗。
如果 LCP 較高且元素加載時間較長，則用戶將需要等待頁面元素加載，從而對他們的體驗產生負面影響。
根據 Ahrefs 的研究，與 FID（哪些網站的困難最小）和 CLS 相比，LCP 似乎是最複雜和最具挑戰性的指標。 LCP 分數對移動設備尤其不利，可能是由於連接速度較慢和 CPU 限制。
如何提高 LCP
以下是一些優化 LCP 分數的建議：
- 刪除可能會顯著降低頁面速度的不必要的第三方腳本，
- 縮小你的 CSS 文件，
- 實現圖像的延遲加載，當用戶向下滾動頁面時加載它們，
- 優化您的關鍵渲染路徑以優先考慮與用戶當前操作相關的內容，
- 優化您的圖像，例如，壓縮它們或調整它們的格式，
- 從頁面中刪除非常大的元素，
- 改善您的託管，
- 優化網頁字體。
如需深入分析如何衡量和改進 LCP，請遵循我們的最大內容繪製指南。
首次輸入延遲 (FID)
FID 衡量用戶與頁面交互所需的時間。 這些交互可以包括以下操作：
- 單擊導航中的鏈接，
- 在註冊表單字段中輸入電子郵件地址，
- 從下拉菜單中選擇一個選項。
對於某些頁面，可能不會報告和測量 FID。 這對於僅包含文本內容的頁面（例如博客文章）來說是可以預期的，其唯一的交互需要滾動或捏合屏幕進行縮放。
FID 對於需要基本交互的頁面至關重要，例如登錄或註冊頁面。
關注第一個輸入是相關的，因為：
- 第一印像對於確定用戶對網站的整體印象至關重要，
- 最重要的交互性問題發生在頁面加載期間，因此關注用戶的第一次交互可以對 Web 上網站的整體交互性產生積極影響。
Google為 FID設置了以下閾值：
| 好的 | < 100 毫秒 |
| 需要改進 | 100 毫秒 - 300 毫秒 |
| 較差的 | > 300 毫秒 |
您的目標應該是不超過 100 毫秒的 FID 分數，以便為您的用戶提供良好的體驗。
超過這個時間會阻礙用戶快速與頁面交互的能力。
如何提高 FID
以下是優化首次輸入延遲分數的方法：
- 減少負載期間向服務器發出的請求數，
- 通過最小化或延遲它來優化你的 JavaScript，
- 刪除非必要的第三方腳本，
- 使用瀏覽器緩存。
如需深入分析如何測量和改進 FID，請遵循我們的首次輸入延遲指南。
累積版式偏移 (CLS)
CLS 確定頁面加載期間頁面上移動的元素數量。
您的頁面元素應盡可能穩定，以便用戶輕鬆點擊，並確保佈局變化不會阻止他們完成所需的操作。
Google對 CLS有以下閾值：
| 好的 | < 0.1 |
| 需要改進 | 0.1 – 0.25 |
| 較差的 | > 0.25 |
您的目標應該是0.1 的 CLS 分數。 或更少。
如果您超過此閾值，則用戶在頁面佈局發生變化後很可能會意外單擊不需要的按鈕或鏈接。
如何改進 CLS
以下是優化累積佈局轉換分數的方法：
- 包括媒體文件的大小屬性，例如圖像和視頻，以告訴瀏覽器這些元素將使用多少空間，
- 避免在首屏上方添加新內容——將其添加到首屏下方，這樣它就不會被下壓，
- 確保頁面上的每個元素都有其保留空間。
有關如何衡量和改進 CLS 的深入分析，請遵循我們的 Cumulative Layout Shift 指南。
Core Web Vitals 如何影響 SEO？
Core Web Vitals 是以特定、可衡量的方式確定用戶體驗的指標。 改進的用戶體驗意味著用戶在訪問您的網站時可以輕鬆找到他們正在尋找的內容，並且他們更有可能返回。
我們知道Core Web Vitals 是確定的 Google 排名因素，但它們對排名的影響並不十分清楚。
以下是 John Mueller 於 2021 年 2 月 26 日對有關 Core Web Vitals 對搜索結果的影響的問題的回應：
[…] 到目前為止，相關性仍然重要得多。 因此，僅僅因為您的網站在 Core Web Vitals 方面比某些競爭對手的網站更快並不一定意味著，到了 5 月，您將在搜索結果中躍居第一。 […] 在搜索結果中顯示該網站對我們來說應該是有意義的。 因為您可以想像，一個真正快速的網站可能是一個完全空的網站。 但這對用戶來說不是很有用。 因此，在談到 Core Web Vitals 時，記住這一點是很有用的。 這是用戶注意到的事情。 這是我們將開始用於排名的東西。 但這不會完全改變一切。 因此，如果您有錯誤，它不會破壞您的網站並將其從索引中刪除。 如果你做對了，它不會把你從第 10 頁推到第一的位置。資料來源：約翰·穆勒
在 Twitter 帖子中，John 試圖更詳細地展示 CWV 分數的影響：
像這樣想。 圖形不按比例。 pic.twitter.com/6lLUYNM53A
— johnmu.xml（個人）（@JohnMu）2021 年 5 月 21 日
對於 SEO 社區的成員來說，衡量 Core Web Vitals 對排名的影響一直很困難。 當頁面體驗更新推出時，搜索中發生了許多其他更新，例如垃圾郵件更新和2021 年 7 月的核心更新。
這使得將CWV 的影響與其他變化區分開來變得很棘手。
此外，考慮到所有其他外部因素、算法調整以及谷歌處理這些變化需要多長時間，如何將 CWV 隔離為排名變化的直接原因？
— 莉莉·雷 (@lilyraynyc) 2021 年 10 月 25 日
據 SISTRIX稱，滿足 Google 推薦的所有 CWV 指標閾值的頁面排名比平均水平高 1 個百分點，相當於提高了 37%。 同時，在 SISTRIX 的可見性指數中，至少一項 CWV 指標未通過的頁面的排名下降了 3.7%。
Moz發現 CWV 指標的最顯著影響發生在未通過所有三個指標測試的 URL 上，下降了 1.15 個位置：
無論哪種方式， Core Web Vitals 的影響都遠遠超出了單純的排名因素。 用戶體驗可以影響您業務的成功——例如，它可以提高轉化率。
約翰在回應 Reddit 帖子時總結了這一點：
關於核心網絡生命力要記住的另一件事是，它不僅僅是一個隨機排名因素，它還會影響您的網站在排名後的可用性（當人們實際訪問時）。 如果您獲得更多流量（來自其他 SEO 工作）並且您的轉化率很低，那麼該流量就不會像您擁有更高的轉化率那樣有用（假設 UX/速度會影響您的轉化率，它通常會這樣做） . CWV 是識別和量化常見用戶煩惱的好方法。資料來源：約翰·穆勒
如何衡量核心網絡生命力？
您可以使用多種工具來衡量 Core Web Vitals 。 確保您知道這些工具使用哪些數據：
- 現場數據——取自真實世界的用戶，或
- 實驗室數據——從預定義的條件中收集。
要了解這兩種數據類型的用例，請確保您熟悉我們關於使用實驗室和現場數據測量 Web 性能的文章。
Chrome 用戶體驗報告
Chrome 用戶體驗報告(CrUX) 包含來自數百萬網站真實用戶的有關 Core Web Vitals 的公開匿名數據。 該數據集還包括有關設備和連接類型的信息，從而可以更全面地評估和比較不同技術和站點之間的用戶體驗。
CrUX 對於網站所有者和開發人員來說具有巨大的價值，可以幫助他們評估網頁在 Web 上的性能。
Chrome UX 報告中的數據可以在 PageSpeed Insights 和 GSC 中的 Core Web Vitals 報告中找到。
除此之外，請查看使用 CrUX 數據的其他一些選項。
燈塔
您可以在 Chrome DevTools 中訪問 Lighthouse：
請務必注意，Lighthouse 包含實驗室數據。
要在 Lighthouse 中分析 Core Web Vitals，請使用隱身模式，因為添加到 Chrome 的任何插件或擴展程序都會影響頁面的加載方式並顯示不准確的結果。
在您要分析的頁面上選擇生成報告後，您將看到評估結果和一些其他實用細節，例如最佳實踐和 SEO 檢查。
您還可以查看建議的操作以進一步改善您的頁面加載。
Google Search Console 中的 Core Web Vitals 報告
您可以在 Google Search Console 中找到專門針對 Core Web Vitals 的報告。 在 GSC 主視圖中，您將在體驗部分找到它：
打開其中一份報告後，您可以看到具有相應狀態的 URL 概覽，包括導致這些狀態的現有問題：
如果單擊狀態，您將顯示受問題影響的 URL 列表。 然後，您可以開始解決問題。 使用此報告的好處是您可以查看站點內所有索引頁面的數據，而不必分析每個 URL 。
Google Search Console 報告的數據來自 Chrome UX 報告，反映了訪問 URL 的真實用戶的體驗。
PageSpeed 見解
PageSpeed Insights 是一個有價值的工具，用於檢查頁面在移動和桌面設備上的性能，可以為改進頁面提供有用的建議。
至關重要的是，此工具可以顯示頁面的實驗室和現場數據。
如果您不想檢查域中的每個頁面，您可以專注於分析每種類型的幾個頁面，以了解它們的執行情況以及哪些頁面模板可能需要調整。
例如，如果您有一個電子商務網站，首先要檢查不同類型產品頁面的性能，以及類別和聯繫頁面，以及包含購物車或用於方便付款的頁面。
通用 SEO 工具
一些流行的 SEO 工具包括檢查 CWV 的功能。
Screaming Frog就是這樣一種工具——它的付費版本允許您在連接到 PageSpeed Insights API 後分析 CWV 指標。 您可以將獲得的數據導出為 .csv，以用於進一步分析。
另一種選擇是使用WebSite Auditor ，它提供了為所有頁面批量分析和細分 CWV 指標的機會，以簡化改進它們的過程。
與 Core Web Vitals 相關的其他指標
讓我們討論其他有價值的 Web 性能指標，這些指標可以幫助評估 Web 上的用戶體驗。
其他網絡生命力
除了 Core Web Vitals 之外，其他補充指標可以捕捉更完整的用戶體驗，並可以支持您診斷和解決與性能相關的問題的過程。
除了我在 LCP 上下文中提到的第一個內容繪製 (FCP) 指標外，還有以下指標需要注意：
- Time to First Byte (TTFB)捕獲請求資源所需的時間以及響應的第一個字節何時開始到達。 TTFB 可用於診斷 LCP 問題，例如服務器響應時間慢。
- Time to Interactive (TTI)是在安靜窗口之前發生的最後一個長任務的結束時間，這意味著沒有長任務並且不超過兩個正在進行的網絡 GET 請求，或者，如果沒有長任務 - 它是FCP 的值。
- 總阻塞時間 (TBT)確定 FCP (FCP) 和 TTI 之間的時間，捕獲主線程被運行超過 50 毫秒的長任務阻塞的時間，並可能導致用戶明顯延遲。 總阻塞時間是指在 FCP 和 TTI 之間發生的每個長任務的阻塞時間之和。
TTI 和 TBT 是實驗室指標，由於它們無法在現場測量，因此它們不被視為 Core Web Vitals。 但它們可用於診斷與可能影響 FID 的交互性相關的問題。
Core Web Vitals 的候選指標
在2021 年 Chrome 開發者峰會期間，Chrome 宣布 Core Web Vitals 正在考慮另外兩個性能指標——響應性和平滑度。
目前，First Input Delay 測量輸入延遲的延遲。 但是，它確定瀏覽器準備好處理請求所需的時間，但不會評估從初始用戶輸入到整個頁面生命週期的總事件持續時間。 這就是新的響應度指標將捕獲的內容。
了解如何在web.dev 關於響應性的帖子中衡量此指標。
同時， Smoothness將測量動畫或滾動過程中的“卡頓”或“凍結”，以幫助了解丟棄的動畫幀會對用戶造成多少影響。 分數將顯示動畫對用戶的流暢程度。
要了解有關平滑度指標的概念和測量計劃的更多信息，請查看 web.dev 上的帖子。
包起來
我們不需要進行進一步的研究或測試來確定Core Web Vitals 會繼續存在。 如果您花時間處理這些指標，您的用戶將來到您的網站並獲得令人滿意的體驗。
無論它們是重要的排名因素，還是更多地評估用戶體驗的可衡量方式，我們都可以預期 Google 將在未來改進 CWV 指標並優化它們在搜索中的使用方式。