累積佈局轉變：提高 Google CLS 分數

當您嘗試下訂單時，您是否遇到過結帳按鈕消失的情況？

是的！ 這令人沮喪。

事實是，它發生得太頻繁了，而且發生在我們太多人身上。

值得慶幸的是，谷歌一如既往地把用戶體驗放在首位。

這就是為什麼從 2021 年開始，它將推出三個新的性能指標作為其核心 Web Vitals 的一部分。

Core Web Vitals 旨在測量頁面的加載速度、交互性和視覺穩定性。

三個指標代表這些：

1.最大的內容塗料（LCP）

2. 首次輸入延遲 (FIP)

3. 累積佈局移位（CLS）

讓我們從用戶和網站管理員 (SEO) 的角度來了解 CLS。

什麼是累積佈局移位？

累積佈局偏移 (CLS) 代表網站的視覺穩定性。

它測量頁面上微不足道的佈局變化量。

意外的佈局變化是網頁在沒有用戶輸入的情況下自行移動的結果。

Google CLS 是一種指示器（信號），您可以通過測量頁面元素的意外移動影響用戶體驗的頻率來解決問題。

當可見元素的位置從一個渲染幀更改為下一幀時，佈局中的任何時候都可能發生變化。

讓我們試著理解一下常見的含義，用簡單的話來定義“Cumulative Layout Shift”：

累積是數量的增加。

佈局是框架

轉變是位置的變化

簡而言之，Cumulative Layout Shift 是網站設計位置中所有單個框架變化的總和。

圖片來自 web.dev

標準 CLS 分數應低於 0.1。

衡量這一點的一個很好的閾值是移動和桌面設備上頁面加載的 75%。

在上圖中，很明顯，根據 Google：

1、如果CLS分數小於0.1，就是一個好信號。 這意味著您的網站沒有任何佈局變化的問題。

2. 如果 CLS 分數在 0.1 到 0.25 之間，則表示您的網站在視覺佈局上需要一定的改進。

3.如果CLS分數大於0.25，則為信號差，也意味著視覺元素的運動發生非常頻繁。

累積版式偏移如何計算？

Google 通過計算每次意外佈局偏移的影響分數和距離分數來計算頁面的 CLS。

CLS的影響分數

它測量不穩定元素在兩幀之間的視口區域中佔用的空間量。

計算 CLS 影響分數的公式

要計算佈局移位分數，我們需要影響分數。

如何計算 CLS 的影響分數？

圖形表示將幫助您更好地理解影響分數。

 Impact Fraction = [Area of​​ Impact Region] / [Area of​​ Viewport] Impact Fraction = [330 x 490] / [375 x 667] Impact Fraction = [161700] / [250125] Impact Fraction = 0.645

CLS的距離分數

它是頁面元素從原始位置移動到最終位置的空間量的度量，該位置基本上在佈局中發生了變化。

為避免過度懲罰情況，通過引入距離分數將大元素移動少量。

計算 CLS 距離分數的公式

如何計算 CLS 的距離分數？

圖形表示將幫助您更好地理解距離分數。

距離分數 = [最大。 移動距離] / [視口高度]距離分數 = [120] / [667]距離分數 = 0.179

計算 Google CLS 分數的公式

累積佈局分數是通過將影響分數乘以距離分數來計算的：

 累積佈局偏移 (CLS) = 影響分數 x 距離分數

CLS = 0.645 x 0.179 CLS = 0.1154 。

隨著衝擊力和距離分數的增加，CLS 分數不斷上升。

用一個簡單的例子來累積佈局移位。

您訪問了一個站點並看到了一些有趣的內容。

你繼續點擊鏈接。

但就在您要點擊鏈接時，它在網頁中向下移動了半英寸，您最終點擊了位於其上方的廣告。

來源：nitropack.io

聽起來不公平，對吧？

這是一個意想不到的佈局轉變。

這僅意味著您將被重定向到一些不需要的登錄頁面，您必須從該頁面返回原始網頁。

我們還有一些被稱為預期佈局轉變的東西。

當您單擊網頁上的某些內容時會發生這種情況，它會更改頁面的當前佈局。

例如，您去博客尋找特定的信息。

只要您在搜索欄中輸入主題名稱，它就會檢索特定的博客文章，您可以在其中找到所需的信息或提出與該主題相關的幾篇博客文章。

資料來源：nitropack.io

這是網頁的預期結果，可以認為是預期的佈局轉變。

是什麼導致 CLS 問題？

根據搜索引擎巨頭 Google 的說法，Cumulative Layout Shift 有 5 個可能的原因：

沒有尺寸的圖像和視頻

建議始終指定圖像和視頻的寬度和高度。

您還可以利用 CSS 縱橫比框來允許瀏覽器在加載圖像時在網頁上分配適量的空間。

沒有尺寸的廣告、嵌入和 iframe

廣告尺寸可以通過高點擊率增加收入。

但是，這可能會通過將內容下推到頁面下方而損害用戶體驗的質量。

可以通過為廣告位保留空間、通過為廣告位保留盡可能大的尺寸來消除偏移或根據歷史數據選擇廣告位的最佳尺寸來減輕這種佈局變化。

動態注入內容

避免在現有內容之上插入任何新內容，除非它是為了響應用戶交互。

這將確保始終預期發生的任何佈局變化，而不是觸發圖像或文本意外移動。

導致 FOIT/FOUT 的 Web 字體

嘗試將 font:display 值與您的自定義字體（如 auto、swap、block、fallback 和 optional）一起使用，以防止不必要的佈局變化。

要確定沒有佈局偏移，請使用 font:display 和鏈接 rel=preload。

在字體資源完全下載之前，任何使用該字體的元素都將被隱藏，稱為 FOIT（不可見文本的 Flash）。

來源： malthemilthers.com

在加載自定義字體之前，在字體堆棧中顯示後備字體稱為 FOUT（無樣式文本的 Flash）。

在更新 DOM 之前等待網絡響應的操作

總是為觸發佈局更改的屬性動畫選擇“轉換”動畫。

Google CLS 分數如何通過廣告影響？

要處理導致 CLS 的廣告，您需要設置廣告要展示的元素的樣式。

因此，如果您對 div、WordPress 中的圖像或視頻分區或任何具有特定高度和寬度測量的網站元素進行樣式設置，您的廣告將僅被限制在上述尺寸範圍內。

如果包含廣告的元素沒有顯示廣告，您可以將其設置為替代橫幅廣告或占位符圖像可以填充空白空間。

或者，對於某些佈局，廣告可能會填充頁面右側或左側裝訂線中一列頂部的整行。

如果該頁面未顯示，則不會發生變化，並且在移動設備或台式機上也不會產生任何影響。

但是，您應該注意，這取決於主題佈局，如果廣告庫存存在問題，您必須對其進行測試。

Web開發過程中CLS如何滑動？

Google CLS 可能會滑過開發階段。

這是可能發生的事情。

呈現網頁所需的許多資產都加載到瀏覽器的緩存中。

下次開發人員訪問正在開發的頁面時，他們不會注意到佈局變化，因為頁面元素已經下載。

因此，建議在現場或實驗室進行測量。

累積佈局移位測試

累積佈局轉換性能網站指標可以通過以下任何一種方式來衡量：

現場工具

在現場：在實際與頁面交互的真實用戶上。 可以使用以下現場工具進行測量：

Chrome 用戶體驗報告

它為現實世界的 Chrome 用戶如何體驗網絡上的熱門目的地提供用戶體驗指標。

PageSpeed 見解

該工具分析網頁的內容並生成建議以使該頁面比以前更快。

Search Console（Core Web Vitals 報告）

Search Console會根據實際使用情況數據（有時稱為字段數據）顯示您的網頁的執行情況。

實驗室工具

在實驗室中：使用工具在受控環境中模擬頁面加載可以使用以下實驗室工具進行測量：

Chrome 開發者工具

Chrome DevTools 可以幫助您即時編輯頁面并快速診斷問題，最終使您能夠更快地構建更好的網站。

燈塔

LightHouse是用於提高網頁質量的開源自動化工具。

您可以針對任何網頁、公共網頁或需要身份驗證的網頁運行它。

它對性能、可訪問性、漸進式 Web 應用程序、SEO 等進行審計。

網頁測試

使用真實瀏覽器以消費者連接速度在全球範圍內運行免費的網站速度測試，並提供詳細的優化建議。

根據web.dev ； 注意：實驗室工具通常在合成環境中加載頁面，並且僅在頁面加載期間測量佈局變化。

因此，實驗室工具為給定頁面報告的 CLS 值可能低於實際用戶在該領域的體驗。

檢查累積佈局偏移的快速工具

1. 來自 Chris Johnson 的 Defaced Tool 的 GIF 格式 CLS 以識別有問題的 LS。

2. 累積版面偏移計算器

CLS 計算中的缺陷

谷歌收到了關於 CLS 指標不足以衡量長時間打開的網頁的反饋，以較低的分數懲罰它們。

谷歌審查了三個更新其 CLS 得分方式的解決方案，因此無需擔心 CLS 得分會因這一變化而變差。

用於測量 CLS 的會話窗口

Google 採用會話窗口方法來衡量 CLS。

頁面元素的度量是在會話窗口中度量的，會話窗口對應於用戶在向下滾動網頁時到達的網頁的不同部分。

每個會話窗口的總分是累積的佈局偏移，即整個頁面的總偏移。

3% 具有無限滾動或用戶界面處理程序對用戶交互反應緩慢的網頁將看到他們的分數上升到良好的評級。

更新使 CLS 分數更準確

隨著新的評分系統變得更加公平，這對出版商來說是一個好處，特別是對於長時間打開或使用無限滾動並因此而被不公平評分的網頁。

隨著 Core Web Vitals 指標將在 2021 年 5 月成為排名因素，在最後一分鐘做出重要更改。

結論

了解 Cumulative Layout Shift (CLS) 將幫助您在未來幾天提供更好的用戶體驗。

由於該指標是改善用戶體驗的核心 Web Vitals 的一部分，併計劃在 2021 年成為排名信號，因此了解其重要性和對您網站的影響非常重要。