如何改善CLS

本篇內容主要講解“如何改善CLS”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何改善CLS”吧!

累計布局位移(CLS)是衡量用戶視覺穩定性的一項重要的以用戶為中心的度量標準，因為它有助于量化用戶打開頁面時，頁面布局變化的頻率。目前官方建議這個指標應該小于  0.1，這樣的 CLS 有助于確保頁面的用戶體驗。

試想一下這樣的場景，你想要點擊一個鏈接或一個按鈕，但是在手指落下的瞬間(BOOM)，鏈接移動了，您最終點擊了其他東西!這樣的體驗是不是糟糕透了?比如如下例子：

頁面布局的變動通常是由于異步加載的資源或將DOM元素動態添加到現有內容上方的頁面而發生的。罪魁禍首可能是尺寸未知的圖像或視頻，或者是動態調整自身大小的第三方廣告或小部件等。

解決這個問題的難點在于，網站在開發中的功能通常與用戶的體驗有很大不同。個性化或第三方內容在開發環境中和在生產中的表現不盡相同，開發時的圖片等資源通常已經存在于開發者的瀏覽器緩存中，并且在本地的API調用通常很快，所以延遲不明顯。

而，累計布局位移(CLS)度量標準可通過測量實際用戶發生變化的頻率來幫助你發現這類問題。

什么是CLS?

CLS是測量在頁面整個生命周期中發生的每個元素布局變化的分數總和。

布局移動由Layout Instability  API定義，該API定義在視口中可見的元素在兩渲染幀之間更改其開始位置時，這些元素被認為是不穩定元素。

請注意，僅當現有元素更改其起始位置時，才會發生布局移動。如果將新元素添加到DOM或現有元素更改了大小，則只要更改不會導致其他可見元素更改其開始位置，該元素就不會算作布局偏移。

良好的CLS分數是多少?

為了提供良好的用戶體驗，網站應努力使CLS得分不超過0.1。為確保大多數用戶達到這一目標，可以用移動設備和臺式機設備有75%的頁面得分符合要求即為合格作為基本標準。

要了解有關此建議背后的研究和方法的更多信息，請參閱：定義核心Web Vitals(web.dev/defining-co…

影響分數

要計算布局變化分數，瀏覽器將查看視口大小以及兩個渲染幀之間視口中不穩定元素的移動。布局偏移分數是該運動的兩個度量的乘積：沖擊分數和距離分數。

layout shift score = impact fraction * distance fraction

沖擊分數

沖擊分數衡量的是變動元素在兩渲染幀之間對頁面視口的影響。前一幀和當前幀的所有不穩定元素的可見區域的并集(作為視口總面積的一部分)是當前幀的影響分數。

在上圖中，有一個元素在一幀中占據了視口的一半。然后，在下一幀中，元素下移視口高度的25%。紅色的虛線矩形表示兩個幀中元素的可見區域的并集，在這種情況下，其為總視口的75%，因此其影響分數為0.75。

距離分數

距離分數是不穩定元素在視口中移動的最大距離(水平或垂直)除以視口的最大尺寸(寬度或高度，取較大的)。

在上面的例子中，最大的視口尺寸是高度，不穩定元素移動了視口高度的25%，這使得距離分數為0.25。

所以，在這個例子中，影響分數是0.75，距離分數是0.25，所以布局移位分數是0.75 * 0.25 = 0.1875。

向現有元素添加內容如何影響布局移位分數

"Click Me!"按鈕被添加到帶有黑色文本的灰色框的底部，它將帶有白色文本的綠色框向下推(并部分推出視口)。

在這個例子中，灰色框改變了大小，但是它的起始位置沒有改變，所以它不是一個不穩定的元素。按鈕以前并不在DOM中，因此它的起始位置也不會改變。

然而，綠色方塊的起始位置確實會發生變化，但由于它已經部分移出了視口，所以在計算沖擊分數時，不可見區域并不會被考慮在內。兩個幀中綠色框的可視區域(用紅色虛線矩形表示)的聯合與第一個幀中50%視口的綠色框的區域相同。沖擊分數為0.5。

距離分數用紫色箭頭表示。綠框已經向下移動了大約14%的視口，所以距離分數是0.14。

布局位移得分為0.5 x 0.14 = 0.07。

多個不穩定元素

在上面的第一幀中，有一個動物的API請求的四個結果，按字母順序排序。在第二幀中，更多的結果被添加到排序列表中。

列表中的第一項("Cat")不會在幀之間改變它的起始位置，所以它是穩定的。類似地，添加到列表中的新項以前并不在DOM中，因此它們的起始位置也不會改變。但標有"狗"、"馬"和"斑馬"的物品都改變了它們的起始位置，使它們成為不穩定的元素。

紅色的虛線矩形再次代表這三個不穩定元素的前后區域的結合，在這個例子中大約是視口區域的38%(撞擊率為0.38)。

箭頭表示不穩定元素從起始位置移動的距離。用藍色箭頭表示的"斑馬"元素移動得最多，移動了視口高度的30%左右。這個例子中的距離分數是0.3。

布局位移分數是0.38 x 0.3 = 0.1172。

預期 VS 意外的布局變化

并不是所有的布局變化都是不好的。事實上，許多動態web應用程序經常改變頁面上元素的起始位置。

只有在用戶非預期的情況下，布局的改變才是糟糕的。另外，在響應用戶交互時(點擊一個鏈接，按下一個按鈕，輸入一個搜索框等等)出現的布局變化通常是好的，只要這種變化發生在距離交互足夠近的地方，用戶能夠清楚地看到這種關系。

動畫和過渡是更新頁面內容的好方法，不會讓用戶感到意外。頁面上突然移動內容幾乎總是會造成糟糕的用戶體驗。但是，從一個位置逐漸自然地移動到另一個位置的內容通常可以幫助用戶更好地理解發生了什么。

CSS transform屬性允許你在不觸發布局移位的情況下動畫元素，比如使用transform:  scale()代替改變高度和寬度屬性。要移動元素，請避免更改頂部、右側、底部或左側屬性，可以使用transform: translate()代替。

如何衡量CLS

1、可以使用lighthouse和performce檢測CLS。

2、手動測量

可以使用布局不穩定性API。創建一個PerformanceObserver，該observer偵聽意外的布局移動元素，將它們累加，并將它們記錄到控制臺。

let cls = 0;  new PerformanceObserver((entryList) => {   for (const entry of entryList.getEntries()) {     if (!entry.hadRecentInput) {       cls += entry.value;       console.log('Current CLS value:', cls, entry);     }   } }).observe({type: 'layout-shift', buffered: true});

如何改善CLS

首先，最常見的影響CLS的分數的有：

• 未指定尺寸的圖片

• 未指定尺寸的廣告、嵌入元素、iframe

• 動態插入內容

• 自定義字體(引發FOIT/FOUT)

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

因此，改善方法有：

1. 最開始就設定好圖片的尺寸，或者預留足夠空間。這樣能確保瀏覽器可以在加載圖像時在文檔中分配正確的空間量。還可以使用unsize  -media特性策略在支持特性策略的瀏覽器中強制執行此行為。

2. 除非響應用戶交互，否則切勿在現有內容上方插入內容。這樣可以確保可以預期發生任何版式移位。

3. 優先使用變換動畫屬性而不是觸發布局更改的動畫屬性。對過渡進行動畫處理，以提供狀態與狀態之間的上下文和連續性。

4. web字體盡可能早的加載，避免產生FOIT和FOUT

5. 與UI同事配合在交互上避免布局偏移

到此，相信大家對“如何改善CLS”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！