Core Web Vitals：定義、LCP、FID 和 CLS 簡介以及 Core Web Vitals 優化技巧
已發表: 2021-03-172021 年的非凡之處不止於此。 搜索引擎已經發展並變得比以往任何時候都更具競爭力。 谷歌計劃推出一項改變遊戲規則的新指標，用於在其搜索引擎上對網站進行排名。 良好的用戶體驗和頁面體驗將成為一個關鍵的排名因素——這一切都要歸功於谷歌新推出的和即將推出的核心網絡生命力。
隨著預計在今年晚些時候推出谷歌的核心網絡生命力，對於公司來說，根據這個排名因素趕上和優化他們的網站變得越來越重要。
如果您不知道什麼是核心 Web Vitals，它由什麼組成，以及您可以做些什麼來優化您網站的核心 Web Vitals，請繼續閱讀。 這個博客是給你的。
在本博客中，我們將介紹核心 Web Vitals 的可用區，並幫助您優化您的網頁。 讓我們開始。
什麼是核心網絡生命力？
圖片來源：web.dev
核心網絡生命力是 Google 用來評估您網站的整體用戶體驗的排名信號或一組標準和指標。 Google 核心 Web Vitals 評估您網站的速度、響應能力和視覺穩定性以及現有的用戶體驗信號，以評估整體頁面體驗和用戶友好性。
谷歌計劃推出這個新的排名信號，試圖改進它研究你的頁面提供的整體體驗的方式。 該搜索引擎將匯總這些數據的頂點，以在其 SERPS 上對您的網站進行排名。
您網站的排名越高，其知名度就越高。 隨著頁面體驗成為一個重要的排名元素，你不可避免地要關注它。 要檢查您網站的 Core Web Vitals 數據，請查找您的 Google Search Console 帳戶的“增強功能”部分。
為什麼 Core Web Vitals 很重要？
Core Web Vitals 是排名信號，是 Google 的“頁面體驗”分數的一部分。 這很重要，因為谷歌正在將頁面體驗作為谷歌的官方排名因素。 
圖片來源：backlinko.com
以下是核心 Web Vitals 很重要以及它對您很重要的一些原因：
- 對於即將推出的網站來說，這是一個巨大的排名機會，可以在早期充分利用谷歌排名評估的這一新變化。
- 在兩個具有相似內容質量和網站排名的網站之間的戰爭中，頁面體驗可以發揮重要作用。
- 核心網絡生命力現在變得越來越重要，因為如果網站不符合新的頁面體驗標準，在谷歌的 SERP 上享有無與倫比的排名的網站現在面臨著失去當前排名的風險，而這些網站的排名則輸給了同樣具有競爭力的網站。
考慮到所有因素，請務必記住，您的頁面體驗分數只是 Google 用於對網站進行排名的大約200 個排名因素之一。
為了保持領先地位並享有與其他人相比的競爭排名優勢，您應該繼續優化現有的頁內和頁外 SEO 策略，同時優化您網站的核心網絡生命力。 雖然您不會在一夜之間失去排名，但您肯定可以通過提前優化網絡核心生命力來提高排名機會。
核心網絡生命力的三個信號：
圖片來源：web.dev
Google 在其核心 Web Vitals 評估中考慮的前三個頁面速度和用戶交互測量包括：
- 最大含量塗料 (LCP)
- 首次輸入延遲 (FID)
- 累積版式偏移 (CLS)
信號 1：最大內容塗料 (LCP)：檢查加載性能
LCP 是 Google 用來計算您的頁面體驗分數的第一個核心網絡重要指標。 它測量您的網頁的加載性能。
最大內容繪製或 LCP 可以定義為從實際用戶的角度加載您網站上的頁面所需的持續時間。 簡單來說，您的用戶從點擊鏈接到在屏幕上看到您網站的大部分內容所花費的時間稱為 LCP。
LCP 關注頁面速度方面真正重要的事情，即用戶能夠無障礙地查看您的頁面並與之交互。
要檢查您的 LCP 分數，請使用 Google 的 Page Speed Insights。 你所要做的就是：
- 訪問Google 的 Page Speed Insights工具。
- 在搜索框中輸入您的網站。
- 單擊分析。
點擊“分析”後，Google 會向您顯示當前頁面的綜合報告。 通過它了解您網站中的差距。 結果還將讓您根據 chrome 瀏覽器數據深入了解您的網頁在現實世界中的性能。
您還可以直接在 Google 的 Search Console (GSC) 上查看您的 LCP 數據。 我們建議不要使用 Google 的 Page Speed Insights，原因如下：
- 在 PageSpeed Insights 上，您將獲得一份關於您在搜索欄上輸入的單個網頁的報告以供分析。 在搜索控制台上，您將看到整個網站的 LCP 數據。
- 通過 Google 的 Search Console，您將獲得網站上好、壞或介於兩者之間的 URL 的完整列表。
- Google 的 LCP 指南將您網站的 LCP 分類為“好”、“差”和“需要改進”。
理想的 LCP 測量時間為 2.5 秒或更快。 您頁面的主要內容加載速度越快，您的 LCP 分數就越高。 如果您有一個包含大頁面和多種功能的大型網站，這對您來說可能具有挑戰性。
信號 2：第一個輸入延遲 (FID)：檢查交互性/響應性
第一次輸入延遲是谷歌的第二個核心網絡。 它衡量交互性。
簡單來說，首次輸入延遲 (FID) 是指頁面變為交互式所需的時間。 您可以說它測量頁面上發生活動所需的持續時間。 更具體地說，它衡量用戶在您的頁面上實際執行某些操作所需的時間。
理想的 FID 測量時間小於 100 毫秒。
以下是為 FID 評分計算的一些頁面交互示例：
- 用戶從菜單中選擇選項所需的時間。
- 用戶在字段中輸入您的電子郵件所需的時間。
- 用戶單擊站點導航中的鏈接所花費的時間。
對於收集用戶數據或要求登錄詳細信息的商業網站，FID 評分非常重要。
信號 3：累積佈局偏移 (CLS)：檢查視覺穩定性
累積佈局偏移 (CLS) 是衡量視覺穩定性的核心網絡至關重要。 它是一個度量所有不是由用戶交互引起的佈局更改的指標。 換句話說，我們可以說這個指標考慮了頁面加載時的視覺穩定性。
如果頁面加載時頁面上移動的元素越多，則 CLS 就越高。 如果網頁加載時移動的元素較少，則 CLS 越低。
您的 CLS 越低，您的頁面得分性能就越好。
小於 0.1 的 CLS 分數被認為是網頁的理想選擇，因此請確保在優化您的網站以獲得最佳頁面體驗的同時將其作為目標。
如何優化三個 Web Vitals（LCP、FID、CLS）
優化三個 Web 核心生命力對於提高頁面性能和網頁的整體頁面體驗非常重要。 以下是一些可以改進它們的方法。
如何優化最大內容繪製 (LCP)：
以下列出了您可以採取哪些措施來改善您網站的 LCP：
- 縮小CSS：CSS越小，LCP 越快。
- 刪除大頁面元素：幸運的是，Google 的 Page Speed Insights 會向您顯示您的網站上是否存在減慢頁面 LCP 的元素。 一旦你確定它是什麼，你就可以快速解決它。 例如，在 Google 的 Page Speed Insights 上對 Techmagnate 的 LCP 分數的分析顯示此元素是錯誤的：
- 升級您的網絡主機：更好的主機帶來更快的加載速度（包括 LCP）。
- 刪除不必要的第三方腳本：盡可能避免使用第三方腳本。
- 設置延遲加載：延遲加載意味著僅當用戶到達您的網頁上具有圖像的那個點時才會加載圖像。 通過設置延遲加載，可以更快地實現 LCP。
執行上述提示可以幫助您提高獲得良好 LCP 分數所需的 LCP 完美度。 您的 LCP 得分越高，您的頁面體驗得分和排名機會就越大。 因此，如果您還沒有，請立即優化您的 LCP。
如何優化首次輸入延遲 (FID)：
以下是您可以採取的一些步驟來提高您網站的 FID 分數：
- 最小化（或延遲）Javascript：最小化或延遲頁面上的 JS 可以幫助您提高網頁的 FID 速度，因為您的瀏覽器加載 JS 的需求減少或消除。
- 刪除非關鍵的第三方腳本：谷歌分析和熱圖等第三方腳本會對 FID 和內容加載速度產生負面影響。 確定對您的網站不重要的內容，如果它們對您的網頁不重要，則將其刪除。
- 保持較低的請求計數和較小的傳輸大小：優化代碼以限制請求計數並最小化 HTML 文件、媒體、圖像等的傳輸大小。
如何優化累積佈局移位 (CLS)：
以下是您可以採取的一些簡單措施來改進您的 CLS：
- 在您的網頁上為廣告元素分配保留空間：執行此簡單任務將確保您的內容保持在應有的位置。 沒有指定廣告空間的網頁往往會弄亂內容結構和定位，有時會在頁面上下推動它，從而導致高 CLS 和糟糕的頁面體驗分數。
- 在首屏下添加新的 UI 元素：當用戶瀏覽您網站上的頁面時，他們希望元素保持在原處。 通過添加 UI 元素，您可以確保發生這種情況並且頁面內容結構不受影響。
- 對媒體使用設置大小屬性維度：對視頻、圖像、GIF、信息圖表或其他媒體元素等媒體使用設置大小屬性維度很重要。 這樣做將向您顯示該元素將在該頁面上佔用多少空間，從而幫助您保護您的網頁免受前所未有的內容錯位。
我們的網站設計和開發服務有助於優化 Core Web Vitals 分數。
如何衡量 Web Vitals 分數：
既然您知道了三個核心網絡生命力是什麼，這裡有一些工具可以幫助您衡量它。
- Google 的 Search Console：另一個用於分析您的核心網絡生命力的強大且極其方便的工具是 Google Search Console。 它在增強部分下帶有獨特的核心網絡生命力報告，您可以在每次進行網站審核時檢查該報告。 最好的部分：搜索控制台不是展示單個網頁的頁面性能，而是一次性顯示所有網頁性能數據。
- PageSpeed Insight： Google 的 PageSpeed Insight 是一個強大的工具，它可以向您展示您網頁的核心網絡生命力以及您可以改進的寶貴建議。
- Lighthouse： Lighthouse 是另一個 Google 工具，您可以使用它來衡量您的核心網絡生命力。 它以前設計用於審計 PWA，現在已轉變為監控性能的有效工具。 憑藉額外的功能和 SEO 檢查，燈塔可以恰當地描述為分析網頁速度和頁面體驗數據的有效工具。
- GT Metrix： GT Metrix 是一個網站性能測試和監控網站。 它是一個免費工具，您可以使用它來評估您的 LCP、TBT 和 CLS 性能。
如何使用 Screaming Frog 審計 Core Web Vitals：
審計核心網絡生命體徵的概念相對較新。 對於那些想要保持準備並優化您網站的核心網絡生命力的人來說，使用像 Screaming Frog 這樣的工具會有所幫助，特別是如果您已經訂閱了其高級會員資格。
這是您需要的：
- Screaming Frog 的付費版本。
- PageSpeed Insights API 密鑰。
- 您要審核的網站的域。
讓我們開始。
第 1 步：將 PageSpeed Insights API 密鑰連接到 Screaming Frog
使用 Screaming Frog 優化您的核心 Web Vitals 的第 1 步包括將您的 PageSpeed Insights API 密鑰與其連接。 連接它們後，您可以在 Screaming Frog 儀表板上逐頁訪問 PageSpeed Insights 數據和建議。
以下是您應該遵循的步驟：
- 打開 Screaming Frog → 配置 → API 訪問 → PageSpeed Insights。
- 將 PageSpeed Insights 中的 API 密鑰分頁到“密鑰”框中。
- 點擊“連接”。
- 單擊“連接”後，單擊“指標”。
- 選擇您要審核的指標，然後單擊“確定”。
第 2 步：抓取網站。
下一步包括抓取您的網站。
您所要做的就是將您要抓取的網站域名輸入顯示為“輸入蜘蛛的 URL”的框中。 輸入後，等待“抓取”和“API”進度條加載。
一旦它們加載到 100%，您就可以分析您的數據。
第 3 步：向有關當局報告問題。
該工具加載您的數據後，您將獲得網站上所有網頁的彙編。 在這裡，您需要根據百分比數字分析未達到最低核心 Web 生命值閾值的網頁數量。
以下是您可以遵循的一些步驟：
- 單擊頂部導航欄。
- 單擊分頁。
- 從下拉菜單中單擊頁面速度。
- 單擊導出。
導出數據後，填寫以下列：
- 最大內容繪製時間（毫秒）：放置一個過濾器以查找具有 4000 毫秒或更多 LCP 的頁面。
- 總阻塞時間（毫秒）：放置過濾器以查找具有 300 毫秒 TBT 或更多的頁面。
- Cumulative Layout Shift：放置過濾器以查找具有 0.25 CLS 或更多的頁面。
基於此數據，您可以創建報告並將其發送給客戶。 如果您針對內部頁面體驗優化要求進行此審核，您可以將此數據發送給相關團隊，他們可以相應地執行頁面優化。
第 4 步：使用建議報告分頁問題。
現在，這是有趣的一步。 您現在知道您網站上未達到最低核心 Google Web Vitals 標準的網頁的百分比。 接下來是什麼？
根據您要定位的指標，對相關問題進行簡潔的編譯。 以下是您可以執行的操作：
- 在“概覽”選項卡的右側，向下滾動到 PageSpeed。
- 在這裡，您將找到與您網站的頁面速度相關的問題和建議，包括改善您的核心網絡生命力的潛在解決方案。
- 頁面速度的下拉菜單將包括各種指標，例如：
- 消除渲染阻塞資源（影響 LCP）
- 縮小 CSS（影響 LCP）
- 縮小 JavaScript（影響 FID）
- 刪除未使用的 CSS（影響 LCP）
- 刪除了未使用的 Javascript（影響 FID）
- （還有很多）
- 單擊問題以查看受影響頁面的數量並將此數據導出到您的工作表中。 這樣做將幫助您導出所有具有相關問題的 URL。
- 根據這些數據，您可以就從您的網頁中刪除或推遲這些元素做出判斷。
附加閱讀：什麼是頁面速度 SEO
第五步：後期審核優化，再次爬取網站並進行對比。
確定影響核心 google web Vitals 的因素後，您可以進行優化。 優化後，您的工作是再次抓取您的網站以評估結果。
將優化後不滿足最低核心 Web Vitals 要求的網頁百分比與優化前的數字進行比較。
您應該考慮的其他頁面體驗因素：
以下是 Google 認為對用戶體驗必不可少的主要附加因素列表：
- 安全瀏覽：如果您的網站不允許安全瀏覽，將被視為違反頁面體驗標準，您將獲得較低的頁面體驗分數。 因此，請確保您的網站不包含惡意或欺騙性內容，例如惡意軟件。 您可以在 Google 的安全問題報告中查看您網站的安全合規標準。
- HTTPS：以 HTTPS 開頭的網站更有可能擁有安全的站點連接。 如果您沒有以 HTTPS 開頭的網站，請在此處了解如何使用 HTTPS 保護您的網站。
- 移動設備友好性：使用 Google 的移動設備友好性測試檢查您的網頁是否適合移動設備。 如果您的網頁在此快速評估中未顯示為“適合移動設備”，請執行策略以針對手機和平板電腦優化您的網站。 除其他外，改進 UX 和 UI 以及完善畫布外導航會有所幫助。
- 無侵入性插頁式廣告：您網頁上的內容應該易於用戶訪問。 缺少它會使您的頁面體驗得分較低。 以下是您應該避免的最重要的事情，以使您的用戶更容易訪問網頁內容：
- 避免使用阻止大部分網站內容的彈出窗口。
- 避免顯示覆蓋整個屏幕的獨立插頁式廣告。 這是侵入性的，因為用戶必須在訪問主要內容之前將其關閉。
結論：
Google 已準備好在 2021 年 5 月推出核心 Web Vitals 作為關鍵排名信號。公司需要提前針對這一關鍵排名標準優化其網站。
在此博客中，我們說明了您可以採取的急需的步驟來改善您的網絡核心生命力。 我們已經討論了什麼是核心網絡生命力、核心網絡生命力的前三個指標，以及您可以做些什麼來優化您的網頁以獲得良好的核心網絡生命力 SEO 分數。
我們還為使用 Screaming Frog 進行網站審計的用戶概述了一個快速的分析頁面體驗的技巧。 我們希望我們在這裡提供的信息有所幫助。 在您的網站優化策略中實施它們以保持您的 Google 排名。
如果您有任何疑問或疑問，請在評論部分告訴我們。
我們很想听到您的聲音。