如何令到網站更快更吸引?(三) | 文章 – 滙豐機滙

你是否試過在開始閱讀一篇有趣的新聞文章時,因為所有文字突然向下移動,而令你要重新找回剛才看到的部分?這種情況就是因為Cumulative Layout Shift做得不夠好。

科技  ·    ·  3 mins read

之前我們已經介紹兩個今年Google 新提出的網站性能基準, Largest Contentful Paint 最大內容繪製,和 First Input Delay 首次輸入延遲。這次就看看 Cumulative Layout Shift 累計版面配置轉移。

你是否試過在開始閱讀一篇有趣的新聞文章時,因為所有文字突然向下移動而令你要重新找回剛才看到的部分?這種情況經常發生在不少網站,而這主要是因為那些內容周圍加載了不少廣告。

當用戶看到一個網站時,會自動把它分為各個視覺元素的部分。根據它們在頁面上的排列,用戶就能夠感知到它們之間的關係。這就是用戶如何確定相關內容的位置。而如果這些內容突然移動,例如在網站排版中加入新的元素,那麼用戶很有可能會因為要重新找回剛才理解中的內容而感到氣餒,甚至放棄再閱讀下去。或者更糟糕的是:用戶正要點擊一個鏈結或按鈕,但在手指按下前的一瞬間鏈結就移動了,最終點擊的其他不想按的部分。


網頁排版不穩定如何對用戶產生負面影響?(來源 : https://web.dev/cls/)

網頁排版不穩定如何對用戶產生負面影響?(來源 : https://web.dev/cls/



大多數情況下,這類體驗只是令人討厭,但在某些情況下,它們會造成真正的傷害,而以往又難以用量化的方式來衡量優劣。不過,今次Google所提出的 Cumulative Layout Shift 就能夠解決這個問題。

什麼是Cumulative Layout Shift?

累計版面配置轉移是測量在頁面的整個生命週期中,發生的每個意外版面配置轉移其所有單個佈局轉移分數的總和。每當可見元素將其位置從一個渲染幀更改為下一幀時,都會發生版面配置偏移。這些元素包括:字體、圖像、影片、聯繫表單或是按鈕等,而CLS所顯示的數字自然越小越好。

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

  1. 缺少尺寸的圖片/影片;
  2. 缺少尺寸的廣告、內嵌元件(embed)以及 iframe 元件;
  3. 動態置入內容;
  4. 造成 FOIT (Flash Out Invisible Text) / FOUT (Flash Out of Style)的網站字體;
  5. 更新 DOM 前等待網路回應的動作;

如何改善累積版面配置轉移

對於大多數網站而言,跟從以下指引,就可以避免非預期的版面轉移:

  1. 確保在所有的圖片、影片元件上使用尺寸屬性,預留該元件所需要的空間這個方式能夠確保當圖片、影片還在下載時,瀏覽器可以預先分配正確的空間大小;
  2. 不要在既有內容上再置入內容,除非那是為了回應使用者的互動這可以確保版面配置轉移是在預期之內發生的;
  3. 盡量避免將廣告放置在頁面頂部附近,以免絕大部分的網頁內容會因為廣告的大小改變導致移位;

並非所有的版面轉移都是壞的,如果源自使用者互動(點擊連結、按下按鈕、打字進搜尋欄位),這是反而是正常不過的網頁特性。唯獨是非使用者預期的轉移,才會歸類在不好的頁面體驗。只要網頁設計者非常清楚在轉移發生是與使用者的互動有關,CLS的部分就能做好。

可以檢測實際環境和測試環境CLS的工具,有以下幾個:

Field tools

Lab tools

Ref:

https://web.dev/cls/

https://web.dev/optimize-cls/

ONEs Software Limited
ONEs Software Limited