什么是 CLS？怎么解決CLS 谷歌優(yōu)化
新聞 2023-12-05編輯：深圳網(wǎng)站建設(shè)閱讀（）標簽：
CLS
谷歌優(yōu)化
ＣLS（累積布局偏移）是 Google 衡量網(wǎng)頁加載和交互時發(fā)生的布局偏移總量，即意外移動網(wǎng)頁主要內(nèi)容的布局偏移數(shù)量。這些變化會影響用戶正確閱讀內(nèi)容和與頁面交互的能力。Google 建議 CLS 分數(shù)為 0.1 或更低。 這個因素和其他兩個核心 Web 要素，即首次輸入延遲(FID) 和最大內(nèi)容繪制(LCP)一起判斷整體頁面體驗。
CLS簡點的的理解就是位移錯位．這樣更容易理解，就是網(wǎng)頁錯位了，一般圖片沒有指定大小，無尺寸的廣告、嵌入和 iFrame容易引起，良好的 CLS：低于 0.1,需要改進 CLS：介于 0.10 和 0.25 之間差 CLS：高于 0.25
什么是 CLS？
在一頁上進行多次內(nèi)容轉(zhuǎn)換會導(dǎo)致 CLS 分數(shù)更差。理想的頁面體驗是具有最少 CLS 的頁面。
布局轉(zhuǎn)換或內(nèi)容轉(zhuǎn)換是指頁面上的某些內(nèi)容在框架內(nèi)的位置發(fā)生明顯變化的任何時候。
這可以是文本字體更改、圖像加載緩慢以及在頁面加載時移動頁面的彈出窗口等任何內(nèi)容。
以下是 CLS 數(shù)量不足的示例：
2021 年夏季，Google 確認三個核心 Web 要素現(xiàn)在是頁面體驗排名因素的一部分。
因此，重要的是要確保您的網(wǎng)頁的核心網(wǎng)絡(luò)要素都在以下 Google 認為“良好”的范圍內(nèi)。
好 需要改進 差
LCP ≤2.5s ≤4s >4s
外國投資署 ≤100ms ≤300ms >300ms
CLS ≤0.1 ≤0.25 >0.25
如果您的生命體征衡量在需求改善或較差的范圍內(nèi)，您的排名可能會受到影響，建議您解決該問題。
如何檢查累積布局偏移
有很多方法可以檢查頁面的累積布局偏移 CLS。您可以使用 Google 的工具，例如Lighthouse或 Google Search Console 中的 Core Web Vitals 報告。
定義好的或差的 CLS
Google 官方將 CLS 分數(shù)定義為以下范圍：
良好的 CLS：低于 0.10
需要改進 CLS：介于 0.10 和 0.25 之間
差 CLS：高于 0.25
什么導(dǎo)致 CLS 不佳？
如上所述，布局變化可能由很多原因引起。最常見的罪魁禍首是：
怎么解決CLS
沒有尺寸的圖像
無尺寸的廣告、嵌入和 iFrame
動態(tài)注入的內(nèi)容
導(dǎo)致FOIT/FOUT 的Web 字體（不可見文本閃爍和無樣式文本閃爍）
什么導(dǎo)致了差的 CLS
所有這些原因都存在于您頁面的代碼中，只需幾分鐘的檢查即可確定。
對于沒有尺寸的圖像和嵌入，只需識別這些圖像，然后將已知尺寸添加到您的代碼中將有助于避免布局偏移。如果你不知道
如何修復(fù)和避免布局偏移
要修復(fù)累積布局偏移，您首先需要確定導(dǎo)致偏移的元素。
然后，您的開發(fā)人員可以采取多種措施來解決問題并優(yōu)化頁面速度。
如何修復(fù)和避免布局偏移
Lighthouse 有一些建議可以幫助您和/或您的開發(fā)團隊應(yīng)對變化，例如：
避免非合成動畫
確保文本在 webfont 加載期間保持可見
修復(fù)沒有明確寬度和高度的圖像元素
如何檢查CLS
要優(yōu)化 CLS，您需要了解導(dǎo)致轉(zhuǎn)變的原因。
有兩種方法可以查看確切的變化：
在 Lighthouse 的性能審計中使用名為“避免大的布局偏移”的特別建議
使用跟蹤
在這兩種變體中，如果您通過 Lighthouse 啟動性能審計會很容易。
要打開 Lighthouse，請右鍵單擊網(wǎng)頁上的任意位置并選擇“檢查”。
避免大的布局變化
找到并打開建議“避免大的布局變化”。如果在加載過程中至少有一個任務(wù)轉(zhuǎn)移，它在 Lighthouse Performance 審計中可用。只需向下滾動即可找到它。
如果您展開該項目，您可以檢查每個元素的“CLS 貢獻”。
例如，如果您看到一個元素的 CLS 貢獻為 0.001，請不要擔心，因為它不會真正損害用戶體驗。
我們知道，Google 會將總移動量高達 0.010 的頁面標記為“好”頁面。
查看原始軌跡
要找出時間線中頁面的哪個部分發(fā)生了變化，您可以在 Lighthouse 中查看原始軌跡。
首先，單擊 Lighthouse 報告中的 View Original Trace。這將打開性能選項卡。
查看體驗跟蹤或 Web Vitals 跟蹤，了解這些轉(zhuǎn)變發(fā)生的時間。
放大并查找布局偏移 (LS) 以查看頁面的哪個部分在加載期間進行了這些偏移。
