Google 經常更新網站性能的指標和工具，務求在衡量網站方面的用戶體驗與時並進。那讓我們來看看今年Google 提出的網站性能基準其中之一：CLS — Cumulative Layout Shift 累計版面配置轉移。
之前我們已經介紹兩個今年Google 新提出的網站性能基準， Largest Contentful Paint 最大內容繪製，和 First Input Delay 首次輸入延遲。這次就看看 Cumulative Layout Shift 累計版面配置轉移。
你是否試過在開始閱讀一篇有趣的新聞文章時，因為所有文字突然向下移動而令你要重新找回剛才看到的部分？這種情況經常發生在不少網站，而這主要是因為那些內容周圍加載了不少廣告。當用戶看到一個網站時，會自動把它分為各個視覺元素的部分。根據它們在頁面上的排列，用戶就能夠感知到它們之間的關係。這就是用戶如何確定相關內容的位置。而如果這些內容突然移動，例如在網站排版中加入新的元素，那麼用戶很有可能會因為要重新找回剛才理解中的內容而感到氣餒，甚至放棄再閱讀下去。或者更糟糕的是：用戶正要點擊一個鏈結或按鈕，但在手指按下前的一瞬間鏈結就移動了，最終點擊的其他不想按的部分。
大多數情況下，這類體驗只是令人討厭，但在某些情況下，它們會造成真正的傷害，而以往又難以用量化的方式來衡量優劣。不過，今次Google所提出的 Cumulative Layout Shift 就能夠解決這個問題。
什麼是Cumulative Layout Shift？
累計版面配置轉移是測量在頁面的整個生命週期中，發生的每個意外版面配置轉移其所有單個佈局轉移分數的總和。每當可見元素將其位置從一個渲染幀更改為下一幀時，都會發生版面配置偏移。這些元素包括：字體、圖像、影片、聯繫表單或是按鈕等，而CLS所顯示的數字自然越小越好。
根據Google官方說法，發生累計版面配置轉移的原因有五個：
- 缺少尺寸的圖片/影片；
- 缺少尺寸的廣告、內嵌元件（embed）以及 iframe 元件；
- 動態置入內容；
- 造成 FOIT (Flash Out Invisible Text) / FOUT (Flash Out of Style)的網站字體；
- 更新 DOM 前等待網路回應的動作；
如何改善累積版面配置轉移
對於大多數網站而言，跟從以下指引，就可以避免非預期的版面轉移：
- 確保在所有的圖片、影片元件上使用尺寸屬性，預留該元件所需要的空間。這個方式能夠確保當圖片、影片還在下載時，瀏覽器可以預先分配正確的空間大小；
- 不要在既有內容上再置入內容，除非那是為了回應使用者的互動。這可以確保版面配置轉移是在預期之內發生的；
- 盡量避免將廣告放置在頁面頂部附近，以免絕大部分的網頁內容會因為廣告的大小改變導致移位；
並非所有的版面轉移都是壞的，如果源自使用者互動（點擊連結、按下按鈕、打字進搜尋欄位），這是反而是正常不過的網頁特性。唯獨是非使用者預期的轉移，才會歸類在不好的頁面體驗。只要網頁設計者非常清楚在轉移發生是與使用者的互動有關，CLS的部分就能做好。
可以檢測實際環境和測試環境CLS的工具，有以下幾個：
Field tools
Lab tools
Ref：
更多資訊可以留意 ONES Publication 定期發佈的文章，亦可以聯絡我們，我們的網址是： https://ones.software
ONES PublicationWe share what we have learned about app and web development. Find us in ones.software. Email: hello@ones.software
