Cumulative Layout Shift (CLS) 累計版面配置轉移的定義

CLS是網頁正處於Loading時，網頁上的元素卻意外的造成移動，而容易產生位移的元素包括：字體、圖像、影片、聯繫表單或是按鈕等。

CLS所顯示的數字越小越好，因為頁面的移動會導致不良的使用者體驗，而較差的CLS分數都可以利用編碼進行解決。

如果想查詢CLS，可以到Google的Page Speed Insight網頁速度測試工具內的測試結果找到這項指標。

為什麼會發生CLS？

根據Google官方說法，發生累計版面配置轉移的原因有五個：

1. 沒有圖框包圍的圖像
2. 沒有尺寸的廣告或嵌入式iframe
3. 動態注入的內容
4. 加載的網頁字體導致FOIT或FOUT(FOIT是指網頁加載時當字型加載太慢，字跑不出，當加載完成後跳出的字型會閃一下。FOUT是指非預期樣式的文字閃爍出現，同樣發生在字型加載太慢時瀏覽器先套用了其他字型當作替代，而在加載完成後跳回原先所設定的文字發生一閃的狀況。)
5. 在更新DOM之前等待網路回應

圖片與影片必須具有寬跟高，而對於響應式圖像和影片，要確保在不同螢幕尺寸下寬與高需要有等比的尺寸設定。

Google甚至建議使用AspectRatioCalculator.com來計算寬高比。

CLS範例

以下是Google官方提供的範例影片，我們有時候會碰到，＂你想點擊網頁上的特定物件，但是當你要點擊的時候，該物件因為讀取過慢而發生位移，導致點到錯誤的物件，產生不好的使用者體驗

動態注入的內容

舉例來說，在WordPress你可以連結YouTube的影片或者Tweet，而在WordPress上會顯示影片或Tweet視為個嵌入式項目

網路字體

下載的網路字體可能會導致FOIT(Flash of Invisible Text)字面直譯「閃爍」、「看不見的文字」和FOUT(Flash of Unstyled Text) 非預期樣式的文字閃爍。同樣字型加載太慢時，瀏覽器先套用了其他字型當作代替，例如系統字型或預先下載好的替代字型，造成套用正確字型的樣式前後改變一閃的狀況。 為防止這種情況發生的方法是在連結中使用rel=”preload”來下載該網路字體。

CLS可能淺在開發過程中

在網頁開發階段，可能會發生累計版面配置轉移的情況。可能發生的原因是，呈現頁面所需的許多資源都已經加載到瀏覽器的暫存中，因此當開發者人員或發布者來到開發階段的頁面時，他們不會注意到版式的更改，因為頁面元素已經先下載過了。因此使用無痕網頁或者多找幾個人共同測試是非常有用的。

如何計算累計版面配置轉移

每一次的元件移位都會有個分數，這個分數的計算是元件移位分數(layout shift score) = 影響範圍(impact fraction) * 移動距離(distance fraction)，以下圖為例，影響的範圍佔了整個畫面(viewport)的75%，元件的移動距離為畫面高度的25%，因此這次移位的分數為0.75*0.25=0.1875。

累計版面配置轉移(CLS)就是在使用者瀏覽網頁時，每次非預期性的元件移位分數加總。

了解累計版面配置轉移

了解CLS是很重要的，不必了解該怎麼計算，只要知道他及其重要意義，因為該指標計畫在2021年將為不可或缺的重要影響因素。

文章出處： https://www.searchenginejournal.com/cumulative-layout-shift/371946/