如何針對 Google Core Web Vitals 進行優化

如何為 Core Web Vitals 推出做準備

2021 年 15 月 10 日更新

修復企業網站上糟糕的用戶體驗已成為許多優先事項列表的首位。

我們已經知道的一件事是，谷歌計劃使用並建立在其新的谷歌搜索控制台核心網絡生命力報告的基礎上。 它旨在幫助企業做更多的事情，只是讓他們的頁面被抓取和索引，更多的是讓它們對用戶更有價值。

什麼是 Google Core Web Vitals？

Google Core Web Vitals 是 2019 年添加到 Google Search Console 的一組報告，其中包含一小組圍繞加載速度的核心指標。 它們幫助搜索營銷人員和開發團隊了解網站交付其網頁的好壞。 谷歌根據每個網頁在為網站訪問者提供令人愉快的體驗方面的表現對其進行評分。 Core Web Vitals 報告詳細說明了網頁如何根據實際使用數據（也稱為現場數據）執行。

這些新的排名因素正在迅速接近。 雖然每個站點都從添加基本模式標記類型中受益，但使用嵌套並堅持更重要的內容以避免代碼膨脹。

2021 年 10 月 5 日，Google 在 YouTube 演示文稿中上傳了有用的提示，標題為如何改進最大內容的繪畫以獲得更好的頁面體驗。

Google 關於如何獲得更好的最大內容繪製 (LCP) 分數的提示：

圖像通常是最大內容繪製問題的原因。 節省的每一口都可以加快頁面加載速度。 使用現代圖像格式，如 AVIF 和 WebP。 有很多邊緣情況與您的 LCP 分數的計算方式有關。

什麼是 Google 頁面體驗？

頁面體驗是用戶體驗的一個子集。

頁面體驗集中在最常影響用戶體驗的網絡產品的技術方面。 雖然它沒有衡量和反映內容質量或視覺設計等 UX 設計方面，但所有頁面體驗信號基本上都在創建網站的開發團隊的控制之下。 這些信號對整體用戶體驗有直接影響。

Google 有意推廣頁面體驗的舉措旨在對網絡產生積極影響。 把它想成是積極的。 擁有這些與業務指標相關的額外性能指標有助於更輕鬆地獲得非技術團隊成員的認可。

讓我們後退一點，回顧一下我們是如何到達這裡的。

網站速度和 Google Core Web Vitals 的歷史

Google Page Experience 的推出時間是什麼時候？

2020 年 11 月 10 日，谷歌宣布，“排名中的頁面體驗信號將於 2021 年 5 月推出。新的頁面體驗信號將 Core Web Vitals 與我們現有的搜索信號相結合，包括移動友好性、安全瀏覽、HTTPS 安全性、和侵入性的插頁式指南”。

讓我們備份並獲得清晰的概述。 2010 年，Google 首次開始使用網頁在台式計算機上的加載速度作為排名信號。

從 2015 年開始，Google 一直將移動友好度作為排名信號。到 2018 年，移動優先索引流程正式啟動。 當 Google 確定網站已準備好進行移動優先索引時，網站管理員和網站所有者會在 Search Console 中收到通知。 這發生在 Google 在為搜索目的進行評估的過程中評估您網站的移動版本； 你不能觸發它。

2020 年初，谷歌在其穀歌搜索控制台中引入了一套新的工具，稱為 Core Web Vitals。 它明確表示，這些報告中的指標將在 2021 年成為排名信號。Core Web Vitals 擴展了之前的網站速度指標，以幫助企業解決某些網頁移動廣告和支持文件加載的問題。

Web Core Vitals 的引入提醒任何不關心移動友好性的散亂的網站所有者，這顯然很重要。 雖然 Mobilegeddon 更新推出緩慢，但現在必須正視讓網站為移動用戶提供更好體驗的重要性。

谷歌在網站速度和移動方面的工具和報告方面的投資向網站所有者發出了信號，即他們需要讓他們的網站更易於使用，或者希望只是一張在線電話卡。 今天我們宣布，排名中的頁面體驗信號將於 2021 年 5 月推出。

Google 搜索頁面體驗由哪些基本指標構成？

排名前三的 Google 搜索頁面體驗指標說明：

• 加載： LCP 評估特定網頁上最大的內容元素（例如特色圖片、英雄圖片或 H1 標題文本）需要多長時間才能在訪問者的視口中顯示。 尋求獲得 1.2 秒或更短的 LCP。
• 交互性： FID（首次輸入延遲）：時鐘從用戶第一次與您的頁面交互（如單擊鏈接、觸發按鈕等）到瀏覽器響應該交互的時間運行。 這個測量值來自人們第一次點擊的任何交互元素。 這在訪問者需要做某事的頁面上很重要，因為這是頁面變得可交互的時候。 也稱為 TBT 報告（在 GTmetrix 中）； 它表示頁面加載過程中調用的腳本阻塞了多少時間。 尋求獲得 150 毫秒或更短的 TBT。
• 視覺穩定性： CLS 指示在頁面加載時訪問者體驗到的頁面佈局有多少變化。 尋求 0.1 或更低的 CLS 分數。

要審核您的內容以確定其是否符合使用“快速頁面”徽章標記的 Core Web Vitals 閾值，請使用 Google 的開發人員工具來評估加載速度。 為了協助完成這些優化任務，GTmetrix 變得更加複雜。 GTmetrix Reports 添加了一種新的評分方法。 以前的 PageSpeed 和 YSlow 報告已更新為整體 GTmetrix 等級。 在 Lighthouse 的支持下，GTmetrix 用戶現在可以獲得性能和結構分數。

什麼是首次輸入延遲 (FID)？

FID 是一個分數，用於評估瀏覽器在處理用戶執行點擊或點擊等操作之前需要多長時間來管理其他任務。 這表明了 UI 體驗對用戶的響應程度，並衡量了 CPU 對 JavaScript 處理的負擔。

頁面在頁面加載和頁面生命週期中執行 JavaScript 的方式直接影響 FID。 如果訪問者在應用程序完全準備好之前嘗試完成操作，那麼 JavaScript 完全執行所需的時間很重要。

改善首次輸入延遲的方法：

• 延遲或消除第三方文件或跟踪像素。
• 推遲所有非必要的腳本。
• 改進 JavaScript 執行。

GTmetric 和其他瀑布可以很好地跟踪性能，以揭示過度消耗加載時間的位置。 一旦確定，就可以對其進行調查和解決。

什麼是新的 Google 頁面體驗指標？

谷歌將通過其新的頁面體驗指標向用戶展示網頁核心網絡生命力的質量。 這已經顯示在一些 SERPS 中。 它的大小和形狀類似於指示 Accelerated Mobile Page 狀態的 AMP 圖標。 由於谷歌擅長測試和製作交互，這可能看起來會有所不同，因為它被更廣泛地採用。

雖然 Core Web Vitals 指標提供了比我們以前在 Google Search Console 報告中獲得的更詳細的信息，但在全面推出後，很可能會出現許多誤報。

如何確定最重要的核心 Web 重要任務

在進行更深入的網站性能優化之前，首先關注最具影響力的加載速度指標。

1.首先解決所有標記為“差”的問題。

2. 接下來優先考慮哪些問題會對 URL 產生負面影響，或者哪些問題會損害您的創收最多的 URL。

3. “需要改進”的問題現在是優先級列表中的下一個。

大幅改進佈局內容轉換的需求讓我感到非常驚訝，但它顯然是獲得最佳 SEO 結果的因素。 該頁面在內容上方沒有延遲加載廣告，沒有侵入性插頁式廣告，並且所有圖像的寬度和高度都已正確定義。 但是，原始特色圖像的大小為 1280 x 860 像素。 這導致了圖像大小調整問題； 當瀏覽器加載它時，他們將其調整為 1200 x 800 像素。 這會導致佈局偏移和隨之而來的加載延遲。 確保您的圖像大小適合 JASON-LD Schema 標記。

當您修復了所有 URL 中的特定問題後，您可以確認您是否修復了所有 URL 的問題。 單擊開始跟踪以開始為期 28 天的監控會話，以檢查您的站點中是否存在此問題的實例。 如果在 28 天期限內您網站上的任何 URL 中均未出現此問題，則認為該問題已解決。 任何 URL 中存在該問題足以將該問題標記為未修復； 但是，無論問題狀態如何，各個 URL 的狀態都會在整整 28 天內處於評估狀態。

關於 CVW 的常見問題

學習、排除故障和測試/調整許多選項以提高 CWV 分數可能需要花費大量時間。 以下是答案：

如何計算 CLS 分數？

頁面的 CLS 分數是通過將加載時意外移動的用戶屏幕的比例乘以它經過的距離來計算的。 網站有時甚至會面臨一半的屏幕受到內容轉移的影響。 這讓觀眾很惱火。 同時，內容必須在屏幕上移動的距離也會考慮在內。因此，要計算 CLS 分數，請將受影響的屏幕區域 (0.5) 乘以經過的距離 (0.15)，您可以獲得一個有用的分數。

造成內容佈局移位問題的常見原因有哪些？

• 刪除特色圖片上的邊距：在一個網站上運行 Lighthouse 工具和 Chrome 開發工具，圖形類 =“featured-media”代碼被證明是一個問題。 通過添加這個額外的 CSS 代碼.featured-media { img display: none; } .featured-media { img display: none; } ，桌面的性能得分立刻提升了兩個滿分。
• 解決字體加載方式的任何問題：一些網頁設計師喜歡花哨的標題網頁字體的外觀； 但是，它們的加載方式通常會導致佈局偏移。 測試以發現是否存在需要解決的緩存稀釋的潛在問題以及字體的整體大小是如何交付的。 我們發現，通過指定 fallback font-display，通過添加{ font-display: fallback;} ，我們可以使用 font face 指令改善元素的渲染行為。
• 動態注入內容：這通常發生在將橫幅或表單動態添加到頁面時。 此外，無法看到“x”以退出彈出窗口的用戶可能會感到沮喪。 此外，當頁面元素可用時，它們仍然是頁面被重新排列和“移動”的罪魁禍首。
• 缺乏圖像規範：當頁面的圖像有錯誤、較差或沒有指定圖像尺寸時，瀏覽器會在沒有這些信息的情況下增加工作和時間來加載頁面，然後需要稍後轉移來計算它。
• 沒有尺寸的頁面嵌入、廣告和 iframe ：通過通知瀏覽器這些視覺頁面元素所需的佈局空間，您可以避免瀏覽器需要在每個視覺就位後移動。

遵循上述 CLS 改進策略後，同一站點的 Cumulative Layout Shift 得分現在為 0.01。 這對於幫助改善網站的移動搜索結果大有幫助。

加載 CSS Async 可以改進哪些核心 Web Vitals 指標？

因為這是人們首先看到的，所以在首屏部分計算的指標意味著確保用戶可以快速看到關鍵內容。 一些內容和支持文件可以在後台加載，直到您達到“完全加載時間”。

Holistic SEO 的所有者 Koray Tugberk GUBUR 表示，“在將 CSS 文件作為異步加載和提前為用戶打開網頁之間的關係中，一些 Pagespeed 指標比其他指標受到更積極的影響。 更快的 CSS 文件加載尤其改善了 First Paint、First Contentful Paint、Largest Contentful Paint 和 Speed Index 指標”。

將您的關鍵內容放在易於看到的位置以匹配搜索者的意圖。 不要讓網站訪問者等待尋找問題的答案。

Google 如何衡量加載速度？

PageSpeed Insights 中的改進和診斷建議來自實驗室測試； 從現場結果中收集的性能指標更加準確。 一旦您對如何提高 PageSpeed 有了大致的了解，Google 對此評分的邏輯就會對您的網絡重要結果產生積極影響。

三個新的性能指標涵蓋了這個 Web 性能世界。 它們通過 Chrome 中的 API、Android 上的 Chrome、Chromium Edge 瀏覽器得到支持。 Google 用於衡量頁面體驗的數據來自 Chrome UX 報告 (CRUX)。 它由全球 Chrome 瀏覽器中的真實頁面加載提供的匿名性能統計信息組成。

CRUX 獨立於緩存狀態，評估所有常規頁面加載，包括登陸和會話中網頁。 它在單頁應用程序中跳過軟導航，也稱為路線更改。 軟導航有可能受到懲罰。 較低的 CLS 分數和 LCP 值表明遇到意外佈局變化的用戶變化減少。

圖像壓縮對 CWV 分數有多重要？

您無需犧牲圖像質量即可獲得良好的 CWV 分數。

今天的瀏覽器可以在提供時管理高分辨率圖像。 當您仍然想壓縮它們時，只使用您需要的大小，以便在高分辨率顯示器上看起來很棒。 您可以使用 CND 並考慮從不太複雜的圖像或背景開始。 了解並遵循 Google 的圖片指南。

@Jamsession18 於 2021 年 3 月 26 日問 Google 的 John Mueller：

“你能回答我關於所用圖像質量的問題嗎？ 我在一家新聞網站工作，該網站目前正在針對 CWV 進行優化，為此，我們的技術正在以犧牲圖像質量（現在的圖像模糊）為代價將圖像壓縮到極端水平。 值得付出代價嗎？”

“這聽起來是個壞主意。 頁面體驗只是我們考慮排名的眾多因素之一，但如果用戶不喜歡您的內容，他們就不太可能轉換（無論您希望他們如何轉換），也不太可能想要回來。” -???? 約翰 ？？？？ @約翰穆

現場數據和實驗室數據有何不同？

區別之一是 Lab 數據對測試有用，Field Data 更適合排名。

實驗室數據是關於在獨特環境中發現的性能數據。 Chrome 開發工具和webpagetest.org 工具通常用於獲取實驗室數據。 字段數據包含從使用 Chrome 瀏覽器訪問您網站頁面的用戶集合中收集的數據。 字段數據是填充您的 Google Search Console 報告以及 Google Page Speed Insights（其頁面報告依賴實驗室和字段數據）的內容。

可以通過 BigQuery 使用自動化來獲取字段數據。 對於沒有獲得大量自然流量的較新站點或頁面，您可能會發現沒有可用的字段數據。

為什麼改進所有三個 Web Core Vitals 指標很重要？

所有三個 Core Web Vitals (CWV) 基準測試都表明了提供良好用戶體驗所需的關鍵組成部分。 必須滿足 3 個指標中的每一個，才能獲得 2021 年 5 月推出的相關 Google 排名信號提升的資格。Google 為我們提供了 6 種方法來衡量這些核心 Web Vitals。 正如我們從 Google 的高級網站管理員趨勢分析師 John Mueller 那裡了解到的，必須滿足所有最低要求才能從即將到來的算法更新中受益。

“我的理解是，我們看看它是否處於綠色狀態，然後就可以判斷它是否正常。 所以如果它是黃色的，那麼它就不會是綠色的，但我不知道最終的方法是什麼。

有許多因素結合在一起，我認為一般的想法是，如果我們能夠識別出一個頁面符合所有這些標準，那麼我們希望在搜索排名中適當地使用它。

我不知道會採用什麼方法，有些事情可以，有些事情不完全可以，比如如何平衡。” ——約翰·穆勒

這使得快速加載頁面與慢速加載的感知變得非常重要。 滿足所有三個指標是一個機會； 小企業可以提升他們的 SEO 並獲得競爭優勢，幫助他們贏得新業務。 每個網站的重點都應該放在改善移動搜索結果而不是桌面體驗上，因為這對最大數量的搜索者來說最重要。

像很多搜索營銷一樣，整體方法是最好的。 很容易過度關注網站性能的一個領域而忽視其他需要關注的領域。 這方面的一個例子是添加所有你能想到的模式標記，當它可能只是添加價值不大的代碼時。 閱讀我們的電子商務模式標記綜合指南，以最好地放大您的產品在 SERP 中的可見性。

進行搜索的人是否能夠分辨出哪些網站通過了 Core Web Vitals 測試？

想要在點擊進入頁面之前發出頁面速度、頁面響應能力和頁面視覺穩定性因素已被企業考慮的信號的人將看到一個徽章。

約翰·穆勒 (John Mueller) 表示，谷歌可能會在通過谷歌 Core Web Vitals 的頁面的搜索結果中引入徽章。 徽章將充當各種過濾器。 它向使用 Google 搜索的人確認，如果他們點擊進入帶有此 CWV 徽章的網頁，他們可以獲得積極的體驗。

核心 Web Vitals 測試工具

測試您的 Core Web Vitals 時，使用隱身窗口繞過不需要的問題。

現在有幾種工具可用； 我們更喜歡燈塔。 通過使用許多，您可以獲得更多的整體觀點。 但是，它們在應用程序、技術熟練程度所需的技能水平和報告方面存在很大差異。 Search Console 作為每個網站的核心 Web Vitals 儀表板非常有用。 根據谷歌的說法，獲得整個網站的鳥瞰圖對於成功至關重要。 Chrome 擴展程序和 PageSpeed Insights 更適合那些快速的頁面評估。 隨著時間的推移，我們會在這裡添加更多內容。

一旦這項工作到位，我們將親自報導您的搜索營銷進度報告。 我們希望您了解並享受這些好處。

改進技術 SEO 方面始終需要必要的支持和開發人員資源才能完成。 與各種規模的企業合作的搜索營銷人員一直在為預算批准而苦苦掙扎。 今天，每個網站的性能現在都有一個明確的重要性分數。 如果過去有人沒有認真對待這一點，那麼現在它就是一個嚴峻的現實。 為什麼要等到你在排名中受到懲罰？

多年來，谷歌見證了這些鬥爭，並聽取了 SEO 詢問如何獲得支持。 這家科技巨頭通過在其 Google Search Console 報告中透明化並將其確立為額外的排名信號，巧妙地強調了性能的重要性。 最好將 Google 頁面體驗描述為一組衡量一個人與網頁交互的滿意度的因素。 專注於您的客戶和網站訪問者，以及如何讓他們在您的網站上獲得最佳體驗。

概括

根據谷歌在 CRUX 中衡量的 Core Web Vital 性能指標的優化，可能會在未來產生巨大的推動作用。 但即使在這些網絡生命力成為排名因素之前，它也會對您網站的用戶體驗產生積極影響。 消費者想要更快的體驗。 提高加載速度問題會導致跳出率降低、頁面會話長度增加、用戶滿意度得分更高、轉化率更高、SEO 流量增加。 最終，所有這些都會導致收入增加。

頁面性能優化的好處在於它通常通過相對較小的代碼改進來實現。

Hill Web Creations 可以通過全面的技術 SEO 審核來引導您的優化工作。