寫在前面的話

在當今數字時代，網頁的視覺穩定性對于提供良好的使用者體驗至關重要。其中一個衡量視覺穩定性的關鍵名額就是累積布局偏移（Cumulative Layout Shift，簡稱 CLS）。CLS 作為 Web Vitals 名額之一，它衡量的是網頁内容在加載過程中發生的意外布局偏移的頻率和程度，進而確定使用者在浏覽網頁時的舒适度和滿意度。在本介紹中，我們将深入探讨 CLS 的概念、評價标準、資料收集與展示，以及如何針對 CLS 進行優化，進而提升使用者的網頁體驗。

介紹

Cumulative Layout Shift (CLS) 是一項穩定的 Core Web Vitals 名額。這是以使用者為中心的一項重要名額，用于衡量視覺穩定性，因為它有助于量化使用者遇到意外布局偏移的頻率。較低的 CLS 有助于確定網頁具有令人愉悅的體驗。

布局偏移可能會在很多方面幹擾使用者體驗，包括在文本突然移動導緻使用者在閱讀時丢失位置，以及讓使用者點選錯誤的連結或按鈕。在某些情況下，這可能會造成嚴重損害。

評價标準

為了提供良好的使用者體驗，網站的 CLS 得分必須不超過 0.1。為確定大多數使用者都能達到此目标，我們建議衡量網頁加載的第 75 個百分位（按移動裝置和桌面裝置細分）。

Good，≤0.1
poor,>0.25

探索

資料收集

在觀測雲使用 js 的 performanceObserver 衡量 CLS ，即如下代碼：

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

資料展示

時序圖展示

時序圖作為一種強大的資料可視化工具，它能夠形象地展示出不同應用程式在時間次元上的累積布局偏移（CLS）變化趨勢。通過這種圖形化的表示，我們可以清晰地觀察到 CLS 名額随時間推移的波動情況，以及各個應用在不同時間段的穩定性表現。這種動态的視角使我們能夠更好地了解應用在使用者體驗方面的潛在問題，并針對性地制定優化政策。例如，如果時序圖顯示出某個應用在特定事件發生後 CLS 值顯著上升，我們可以迅速定位到問題所在，采取措施如調整頁面元素位置、優化圖檔加載政策或改進内容動态加載機制，以減少意外的布局偏移，進而提升整體的視覺穩定性并改善使用者體驗。

可以根據不同的頁面組來檢視不同頁面之間的 CLS 的名額情況，來對進行優化：

排行榜展示

通過排行榜能夠展示不同螢幕尺寸的 CLS 的情況，根據應用的名額表現來有針對的優化 CLS ：

通過排行榜能夠展示不同頁面組 CLS 的情況，根據頁面組的名額表現來有針對的優化 CLS ：

影響元素的展示

針對 CLS 的性能情況，可以通過時序圖展示哪個元素影響了 CLS 的性能，來對 CLS 進行有針對的優化：

針對 CLS 的性能情況，可以通過排行榜展示哪個元素影響了 CLS 的性能，來對 CLS 進行有針對的優化：

CLS 優化

導緻 CLS 不佳的最常見原因包括：

沒有尺寸的圖檔。
廣告、嵌入和沒有尺寸的 iframe。
動态注入的内容，如廣告、嵌入式内容。

根據收集到的 appid、頁面組、CLS 影響元素，配合上面的内容，可以有針對性的對這幾個次元優化提高 CLS。

示例：

以某應用某路徑下較高的 CLS 為例子，通過檢視該裝置的真實情況，可以做相對應的優化：

通過結合具體的影響元素，也可以更有針對性的對特定螢幕尺寸下的特定元素做優化，來提高視覺穩定性。

比如，向 <img> 标記添加了 width 和 height 屬性，以確定在浏覽器開始提取圖檔之前在網頁上配置設定足夠的空間。這會最大限度地減少自動重排和重新布局，在增加屬性的同時也可以根據螢幕裝置比有針對性的自适應。

對于寬高或螢幕裝置比等不是非常精細的情況，可以通過設定 min-height ，min-width 來降低布局偏移，在一定程度上能夠提高使用者體驗。

結語

總結來說，CLS 的優化是提升網頁使用者體驗的關鍵環節，通過有針對性地對影響 CLS 的元素進行優化，我們可以有效地提高網頁的視覺穩定性，為使用者提供更加愉悅的浏覽體驗。在未來的網頁設計和開發中，我們應該重視 CLS 的優化，確定網頁在各種裝置和螢幕尺寸下都能表現出良好的視覺穩定性。這将有助于提升網站的使用者滿意度，增加使用者的忠誠度，進而為網站的發展帶來更多的機會和挑戰。

RUM 最佳實踐-視覺穩定性的探索與實踐