龍心數位科技|網站設計|行銷設計|網頁設計|台中網頁設計|RWD|網路行銷|SEO|關鍵字|資訊整合

【我們為什麼選擇這篇文章?】

Cumulative Layout Shift (CLS) 累計版面配置轉移,是一種Google指標,用於衡量使用者體驗,據說該指標將成為2021年SEO主要的排名因素,這意味著了解CLS是什麼以及如何對他進行優化十分重要。

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官方提供的範例影片,我們有時候會碰到,"你想點擊網頁上的特定物件,但是當你要點擊的時候,該物件因為讀取過慢而發生位移,導致點到錯誤的物件,產生不好的使用者體驗

註:影片來源為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/