Core Web Vitals：累積佈局轉變——它是什麼以及如何為 SEO 改進它

隨著谷歌頁面體驗更新的推出，經過微調的網站有了一些新的排名機會。

特別是，網站可以根據谷歌稱之為“核心網絡生命力”的幾個新性能指標獲得排名提升。

核心 Web Vitals 是一組影響用戶體驗的核心網頁功能。 他們現在在戰略 SEO 中發揮作用，可以影響網站在 Google 中的排名。

谷歌定義了三個核心網絡生命力：

• 最大含量塗料 (LCP)
• 首次輸入延遲 (FID)
• 累積版式偏移 (CLS)

本文是我們關於 Google 頁面體驗更新系列的一部分，我正在更新它以反映 Google 的最新變化。 在這裡，我將討論累積佈局偏移或 CLS：

• 什麼是 CLS？
• 您如何測量 CLS？
• CLS 如何影響 SEO？
• 如何提高我的 CLS 分數？

什麼是累積佈局偏移 (CLS)？

CLS 測量在瀏覽器中初始呈現後網頁的格式更改，通常通過在已顯示內容之上動態插入內容。

單擊鏈接並讓該鏈接“移動”通常很煩人，從而導致單擊到意外位置。 網頁內容的這種不穩定性會造成糟糕的用戶體驗。

谷歌在這裡討論 CLS：

累積佈局偏移 (CLS) 是衡量視覺穩定性的一個重要的、以用戶為中心的指標，因為它有助於量化用戶體驗意外佈局偏移的頻率——較低的 CLS 有助於確保頁面令人愉悅。

意外的頁面佈局變化會損害用戶體驗。 一個例子是當一個按鈕或鏈接在網頁上移動時，導致人們點擊其他東西。 如果這意味著他們不小心進行了購買，這可能會非常糟糕，正如您在 Google 的演示中看到的那樣：

重要的是，谷歌澄清並不是所有的佈局變化都被認為是不好的：

只有在用戶沒有預料到的情況下，佈局轉換才是糟糕的。 另一方面，響應用戶交互（單擊鏈接、按下按鈕、在搜索框中鍵入等）而發生的佈局轉換通常是可以的，只要轉換發生在足夠接近關係的交互處即可。對用戶清楚。

用戶輸入後 500 毫秒內發生的佈局變化將設置 hadRecentInput 標誌，因此可以將它們排除在計算之外。

如何測量累積佈局偏移 (CLS)？

CLS 是通過在瀏覽量最差的“會話窗口”期間發生的每個意外佈局偏移的所有單獨佈局偏移得分的總和來衡量的。

會話窗口是用戶訪問頁面時發生的任何 5 秒的變化。 Google 會查找 5 秒間隔中的班次處罰最多，這就是該網頁瀏覽的得分。

為了計算佈局偏移分數，Google 將影響分數和距離分數相乘。 我會分解這些。

影響分數是不穩定元素在兩幀之間佔用的視口面積。

在下面的示例中，您可以看到元素佔據了原始視口的 50%，但隨後向下移動了 25%。 在兩幀之間，元素佔據了 50% 加上 25% 的視口，導致影響比例為 75%。

兩個框架之間的佈局轉換示例，Google Developers

距離分數是不穩定元素移動的距離。 下面的示例顯示元素移動了視口高度的 25%。

視口中距離偏移的示例，Google Developers

所以總結一下：CLS是通過layout shift score來衡量的，計算方式是這樣的：

影響分數 * 距離分數 = 佈局偏移分數

以上面的例子，計算如下：0.75 * 0.25 = 0.1875。 谷歌表示，一個網頁應在您網站上的所有頁面或頁面瀏覽量中保持小於 0.1 的 CLS。 這個例子會超過那個目標，所以得分會很差。

一個插圖讓您更清楚地了解 CLS 的評分方式：如果視口內的所有內容在單個幀中移出視口，則佈局得分為 1.0。 （參見 GitHub 上的其他示例。）

您的頁面上在視口中移動的元素越多，您的分數可能就越差。

Google 的 CLS 分數目標

您可以在此處閱讀有關佈局轉換分數以及 Google 如何在此處定義其閾值的更多信息。

累積佈局轉換 (CLS) 如何影響 SEO？

與其他核心 Web Vitals 一樣，CLS 有助於確保您的訪問者在移動設備和桌面設備上都能獲得流暢的頁面體驗。

良好的佈局轉換分數可以幫助確保用戶不會對您的網頁感到沮喪，不會意外點擊並被帶到另一個頁面，也不會錯誤地進行購買。 良好的用戶體驗可以幫助您實現我們希望在 SEO 中看到的所有結果：排名、流量、轉化和收入。

根據 Screaming Frog 的研究，搜索結果中位置 1 的 URL 通過核心 Web Vitals 評估的可能性比位置 9 的 URL 高 10%。當然，這些數據反映了現有頁面——可能沒有經過微調在將這些因素應用於排名算法之前，請遵守核心網絡生命體徵。

從 CLS 來看，不到一半 (46%) 的移動 URL 和不到一半 (47%) 的桌面 URL 具有“良好”的 CLS 分數。 移動設備上的平均 CLS 得分為 0.29，桌面設備上為 0.25。 換句話說，大多數網站都有 CLS 改進的空間。

Screaming Frog 按位置細分通過率，發現“好” URL 的百分比隨著您在搜索結果頁面上的位置向下移動而下降。 以下示例是移動結果，但他們也繪製了桌面數據。

“有多少網站通過了核心 Web Vitals 評估？”，screamingfrog.co.uk

如何提高我的累積佈局轉換 (CLS) 分數？

Google 提供實驗室工具和現場工具來幫助您衡量並優化您的 CLS 分數。 對於 CLS，實驗室工具可能不如在野外為您的網頁捕獲的真實數據有用。

提供的工具包括：

• Chrome 用戶體驗報告（字段）
• PageSpeed Insights（實驗室和現場）
• Search Console（Core Web Vitals 報告）（字段）
• Chrome 開發者工具（實驗室）
• 燈塔（實驗室）
• 網頁測試（實驗室）
• WaterFaller.dev（實驗室）

另一種衡量 CLS 的方法是使用 web-vitals JavaScript 庫。 你可以在這裡了解更多。

佈局偏移的常見原因包括：

• 沒有尺寸的圖像
• 沒有尺寸的廣告、視頻和其他嵌入對像或 iframe
• 動態注入內容
• 加載其他項目後應用樣式的延遲加載 CSS
• 導致不可見或無樣式文本閃爍的 Web 字體
• 頁面上等待其他項目通過網絡加載後才出現的元素
• 通過“高度”和“寬度”而不是 CSS 的“transform: scale()”為元素設置動畫
• 通過“top”、“right”、“bottom”或“left”而不是 CSS 的“transform: translate()”為元素設置動畫

將改進 CLS 的基本原則包括：

1. 始終對圖像、視頻和其他嵌入項目或 iframe 使用大小屬性。 如果元素是動態加載的，請在加載內容之前使用 CSS 將任何容器元素的樣式設置為相同的大小或縱橫比。 然後，當內容加載到這些容器元素中時，頁面不會移動。
2. 切勿在現有內容之上動態插入內容。
3. 如果使用 CSS 動畫元素，更喜歡“轉換”動畫。

並查看 YouTube 上 Google Chrome 開發人員關於 CLS 的視頻：

想要更深入的信息？ 觀看我們的點播網絡研討會 3 個提高核心網絡生命力的專家提示，包括最後的擴展問答。

閱讀我們的整個頁面體驗系列，了解有關此排名更新的更多信息：

1. 什麼是頁面體驗更新？
2. 如何製作適合移動設備的網站
3. 侵入性插頁式廣告以及為什麼它們對 SEO 不利
4. 用於用戶和排名的 HTTPS
5. 核心網絡生命體徵概述
6. Core Web Vitals：LCP（最大內容繪製）
7. Core Web Vitals：FID（首次輸入延遲）
8. 核心 Web Vitals：CLS（累積佈局轉換）