累積布局偏移 (CLS) 衡量頁(yè)面加載時(shí)的視覺(jué)穩(wěn)定性。它通過(guò)查看元素有多大以及它們移動(dòng)的距離來(lái)做到這一點(diǎn)。它是 Google 用于衡量頁(yè)面體驗(yàn)的三個(gè)Core Web Vitals 指標(biāo)之一。

? ? ? ? ?

CLS 是在發(fā)生最多偏移窗口的五秒內(nèi)計(jì)算的。

? ? ? ? ?

邊注:

預(yù)期的布局變化（例如用戶操作后）是正常且符合預(yù)期的。用戶交互后 500 毫秒內(nèi)的變化被排除在計(jì)算之外。

? ? ? ? ?

測(cè)量方法如下：

布局偏移分?jǐn)?shù) = 影響分?jǐn)?shù) x 距離分?jǐn)?shù)

? ? ? ? ?

或者用更容易理解的方式來(lái)說(shuō)，就是：

布局移動(dòng)分?jǐn)?shù) = 已更改的視口百分比 x 不穩(wěn)定元素移動(dòng)的距離

? ? ? ? ?

CLS 之所以重要，是因?yàn)楫?dāng)您嘗試單擊頁(yè)面上移動(dòng)的某些內(nèi)容，然后最終單擊了您不想要的內(nèi)容時(shí)，這會(huì)很煩人。?

? ? ? ? ?

這種事經(jīng)常發(fā)生在我身上。我點(diǎn)擊了一件事，突然間，我發(fā)現(xiàn)自己點(diǎn)擊了一個(gè)廣告，甚至不在同一個(gè)網(wǎng)站上。作為一名用戶，我覺(jué)得這很令人沮喪。

? ? ? ? ?

CLS 的常見(jiàn)原因包括：

• 沒(méi)有尺寸的圖像。

• 沒(méi)有尺寸的廣告、嵌入內(nèi)容和 iframe。

• 使用 JavaScript 注入內(nèi)容。

• 在加載后期應(yīng)用字體或樣式。

讓我們看看您的 CLS 分?jǐn)?shù)應(yīng)該是多少以及如何提高它。

? ? ? ? ?

什么是好的 CLS 分?jǐn)?shù)？ ?

良好的 CLS 分?jǐn)?shù)小于或等于 0.1，并且應(yīng)基于 Chrome 用戶體驗(yàn)報(bào)告 (CrUX) 數(shù)據(jù)。這是來(lái)自您網(wǎng)站上并選擇共享此信息的 Chrome 實(shí)際用戶的數(shù)據(jù)。您需要 75% 的頁(yè)面加載才能獲得 0.1 或更低的 CLS 分?jǐn)?shù)。

? ? ? ? ?

您的頁(yè)面可能會(huì)被歸類為以下類別之一：

• 良好：<=0.1

• 需要改進(jìn)：>0.1 且 <=0.25

• 較差：>0.25

? ? ? ? ?

CLS數(shù)據(jù) ?

截至 2023 年 4 月，72.8% 的網(wǎng)站具有良好的 CLS 分?jǐn)?shù)。這是整個(gè)網(wǎng)站的平均分?jǐn)?shù)。正如我們提到的，您需要 75% 的頁(yè)面加載才能獲得 0.1 或更低的 CLS 分?jǐn)?shù)才能被歸類為良好。

? ? ? ? ?

? ? ? ? ?

自 Google 推動(dòng)更快的網(wǎng)站以來(lái)，CLS 是最能促進(jìn) Core Web Vital。?

? ? ? ? ?

當(dāng)我們使用站點(diǎn)審核數(shù)據(jù)在頁(yè)面級(jí)別進(jìn)行研究時(shí)，我們發(fā)現(xiàn) CLS 在桌面和移動(dòng)設(shè)備上是相似的。

我們還注意到許多網(wǎng)站在 CLS 方面遇到困難，尤其是在連接速度較慢的情況下。

? ? ? ? ?

? ? ? ? ?

CLS 在頁(yè)面級(jí)數(shù)據(jù)中比原始數(shù)據(jù)更差。人們很可能正在改進(jìn)他們的主頁(yè)，從而獲得更多流量，同時(shí)留下許多其他頁(yè)面的分?jǐn)?shù)不及格。

如何測(cè)量 CLS ?

測(cè)量 CLS 的方法有多種：現(xiàn)場(chǎng)數(shù)據(jù)和實(shí)驗(yàn)室數(shù)據(jù)。?

? ? ? ? ?

現(xiàn)場(chǎng)數(shù)據(jù)來(lái)自Chrome 用戶體驗(yàn)報(bào)告 (CrUX)，這是來(lái)自選擇共享數(shù)據(jù)的 Chrome 真實(shí)用戶的數(shù)據(jù)。這可以讓您更好地了解現(xiàn)實(shí)世界的 CLS 性能。這也是 Google 實(shí)際衡量Core Web Vitals的標(biāo)準(zhǔn)。?

? ? ? ? ?

實(shí)驗(yàn)室數(shù)據(jù)基于相同條件下的測(cè)試，以使測(cè)試具有可重復(fù)性。Google 不會(huì)將其用于 Core Web Vitals。但它對(duì)于測(cè)試很有用，因?yàn)?CrUX/現(xiàn)場(chǎng)數(shù)據(jù)是 28 天的滾動(dòng)平均值，因此需要一段時(shí)間才能看到變化的影響。

? ? ? ? ?

測(cè)量 CLS 的最佳工具取決于您想要的數(shù)據(jù)類型（實(shí)驗(yàn)室/現(xiàn)場(chǎng)）以及您是否想要將其用于一個(gè)或多個(gè) URL。

測(cè)量單個(gè) URL 的 CLS ?

Pagespeed Insights會(huì)提取您無(wú)法在 CrUX 數(shù)據(jù)集中查詢的頁(yè)面級(jí)字段數(shù)據(jù)。它還基于 Google Lighthouse為您運(yùn)行實(shí)驗(yàn)室測(cè)試，并為您提供原始數(shù)據(jù)，以便您可以將頁(yè)面性能與整個(gè)網(wǎng)站進(jìn)行比較。

測(cè)量多個(gè) URL 或整個(gè)網(wǎng)站的 CLS ?

您可以在 Google Search Console 中獲取 CrUX 數(shù)據(jù)，這些數(shù)據(jù)分為良好、需要改進(jìn)和較差的類別。

? ? ? ? ?

? ? ? ? ?

單擊其中一個(gè)問(wèn)題即可查看受影響的頁(yè)面組的詳細(xì)信息。這些組是具有相似值且可能使用相同模板的頁(yè)面。您在模板中進(jìn)行一次更改，該更改將在組中的各個(gè)頁(yè)面上得到修復(fù)。

? ? ? ? ?

? ? ? ? ?

如果您想要大規(guī)模的實(shí)驗(yàn)室數(shù)據(jù)和現(xiàn)場(chǎng)數(shù)據(jù)，獲得這些數(shù)據(jù)的唯一方法是通過(guò) PageSpeed Insights API。您可以通過(guò) Ahrefs 的站點(diǎn)審核輕松連接到它，并獲取詳細(xì)說(shuō)明您的績(jī)效的報(bào)告。對(duì)于擁有Ahrefs 網(wǎng)站管理員工具(AWT) 帳戶的經(jīng)過(guò)驗(yàn)證的網(wǎng)站來(lái)說(shuō)，這是免費(fèi)的。

? ? ? ? ?

? ? ? ? ?

請(qǐng)注意，顯示的 Core Web Vitals 數(shù)據(jù)將由您在設(shè)置期間為爬網(wǎng)選擇的用戶代理確定。如果您從移動(dòng)設(shè)備抓取，您將從 API 獲取移動(dòng) CWV 值。

如何提高CLS ?

在PageSpeed Insights中，如果您在“診斷”部分選擇 CLS，您可以看到所有相關(guān)問(wèn)題，例如“避免較大的布局變化”。這些是您想要解決的問(wèn)題。

? ? ? ? ?

? ? ? ? ?

在大多數(shù)情況下，為了優(yōu)化 CLS，您將解決與圖像、字體或可能的注入內(nèi)容相關(guān)的問(wèn)題。讓我們看看每個(gè)案例。

1. 為圖像、視頻、iframe 預(yù)留空間?

對(duì)于圖像，您需要做的是保留空間，這樣就不會(huì)發(fā)生移位，并且圖像只是填充該空間。這可能意味著通過(guò)在 ?標(biāo)記中指定圖像的高度和寬度來(lái)設(shè)置圖像，如下所示：

<img src=“cat.jpg" width="640" height="360" alt=“cat with string" />

對(duì)于響應(yīng)式圖像，您需要使用如下所示的 srcset：

? ? ? ? ?

<img
width="1000"
height="1000"
src="puppy-1000.jpg"
srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
alt="Puppy with balloons" />

您還需要預(yù)留視頻和 iframe 等所需的空間。對(duì)于廣告等動(dòng)態(tài)內(nèi)容，您需要保留所需的最大空間。

還有一個(gè)相對(duì)較新的 CSS 屬性，稱為寬高比，它允許您根據(jù)屏幕尺寸設(shè)置動(dòng)態(tài)寬度，瀏覽器將為您計(jì)算合適的高度。

2.優(yōu)化字體

對(duì)于字體，目標(biāo)是盡可能快地將字體顯示在屏幕上，并且不與其他字體交換。加載或更改字體時(shí)，最終會(huì)出現(xiàn)明顯的變化，例如不可見(jiàn)文本閃爍 (FOIT) 或無(wú)樣式文本閃爍 (FOUT)。

如果您可以使用系統(tǒng)字體，請(qǐng)這樣做。無(wú)需加載任何內(nèi)容，因此不會(huì)出現(xiàn)導(dǎo)致替換的延遲或更改。

如果您必須使用自定義字體，當(dāng)前最小化 CLS 的最佳方法是結(jié)合<link rel=”preload”>（這將嘗試盡快獲取您的字體）和 font-display: optional（這將為您的字體提供一小段加載時(shí)間）。?

如果字體沒(méi)有及時(shí)加載，初始頁(yè)面加載將僅顯示默認(rèn)字體。然后，您的自定義字體將被緩存并顯示在后續(xù)頁(yè)面加載中。

3.使用不觸發(fā)布局變化的動(dòng)畫

有一些 CSS 屬性值會(huì)觸發(fā)布局轉(zhuǎn)換，例如“box-shadow”、“box-sizing”、“top”、“l(fā)eft”等不應(yīng)設(shè)置動(dòng)畫的值。相反，您需要使用“transform”動(dòng)畫來(lái)避免布局變化。?

4. 確保您的頁(yè)面符合 緩存條件

后退/前進(jìn)緩存將頁(yè)面保留在瀏覽器緩存中。它允許立即加載已加載的頁(yè)面，這意味著不會(huì)發(fā)生布局變化。

這一優(yōu)化工作相當(dāng)可觀。下面列出了主要策略，

主要策略：

• 切勿使用卸載事件

• 盡量減少使用 Cache-Control：無(wú)存儲(chǔ)

• bfcache 恢復(fù)后更新陳舊或敏感數(shù)據(jù)

• 避免 window.opener 引用

• 在用戶離開(kāi)之前始終關(guān)閉打開(kāi)的連接

• 進(jìn)行測(cè)試以確保您的頁(yè)面可緩存

最后的想法

自從引入 CLS 以來(lái)，我們已經(jīng)看到了緩存和 CSS 縱橫比等創(chuàng)新技術(shù)來(lái)幫助解決這個(gè)問(wèn)題。我預(yù)計(jì)未來(lái)我們會(huì)看到更多創(chuàng)新和更多新方法來(lái)防止布局變化。

翻譯作品，原作者：Patrick Stox

更多文章：

Google SEO: 如何使用 PageSpeed Insights

Core Web Vitals ：頁(yè)面速度現(xiàn)在對(duì) SEO 更為重要