Brand-new UX factor — CLS

11 min readApr 28, 2020

Introduction

Web 的發展一直令人深深感到著迷，從早期的純文字、圖片的呈現，一直到今日確切地和人們生活有著密不可分的情愫，除了帶來更豐富且多元的視覺饗宴，更因應人們的需求不斷發展出各式新奇有趣的 Web API，近些年來更因為 mobile device 的普及，讓使用者從早期的 desktop 遷徙到 mobile 來，「 mobile first」的口號也因此成為了眾多服務的首要目標。

在滿足了基本需求之後，人們也漸漸的開始重視最基本的瀏覽體驗，任何再怎麼新奇有趣的效果，如果帶來的瀏覽體驗很差的話，理所當然的不會受到使用者親睞。

「如何衡量界定 User Experience 的好與壞？」

使用者體驗 User Experience﹙以下簡稱 UX﹚隨著時空背景以及當前使用者的 know-how 差異往往總會帶來不同感受，很難有一套標準可以依循。雖是如此，Google 依然藉由眾多體驗的回饋，有效整理出一些困擾著人們的「設計」，藉由 Lighthouse 的檢測中，便可以有效地判定當前 web page 可以調整以及改進的項目。

檢測的項目很多，筆者今日比較著於 mobile 使用上的「瀏覽」以及「操作」上，基本上可以有三個準則︰

字級大小，如果頁面上 60% 上的字級小於 12px，會造成使用者閱讀上的困擾，應有效調整讓使用者在瀏覽時可以很清楚且無礙的進行閱讀。
可按元件﹙按鈕或是連結﹚的感應區域，早期的訓練，為了有效節省圖片的 size，所以會儘量的裁切圖片的大小，也因為這樣無形的縮減了元件的感應區域，造成使用者在點擊的時候可能只能投過指尖小心翼翼地進行點擊，深怕一個不小心就點到旁邊的連結，因此可按元件的感應區域設計應該要好好的省思。

元件的顏色對比，顏色對比對於閱讀舒適度有著很大的影響，如果對比過淺，便會造成閱讀上的障礙，因此在草創整體頁面設計時，便應該優先考考量，不該以「因為覺得好看」就想搪塞過去。

以上便是三個頁面設計應該注意的基本準則。

Cumulative Layout Shift

Cumulative Layout Shift﹙以下簡稱 CLS﹚，這是一個全新的 UX 測量準則。為了有效節省 web page 所需 request 數，讓使用者可以在最短的時間便可以看到部分頁面呈現﹙有研究指出等待時間的長短會決定使用者是否願意繼續瀏覽的意願﹚，也因為這緣故，越來越多的 web developers 採用了 lazy load 搭配 JavaScript rendering 的方式來做頁面模組的呈現。

雖然可以解決上述問題，不過卻可能因為 JavaScript rendering 的關係造成頁面突然被「撐開」，讓瀏覽的過程中，因為這不經意地跳動而感到不安以及憤怒，畢竟這突兀的行為是徒然的、無禮的亂入，使用者甚至還得往前、往後回捲才能找到剛剛正在閱讀的片段。

個人私心將 CLS 稱之為「蠻橫的版塊飄移 」，它確確實實對 UX 造成極大的影響，會造成這樣的原因大概可以分成下列幾類

Lazy load + JavaScript rendering。
<img /> 完成外部資源讀取，有了實體高度，撐開後續元件。
<video /> 完成外部資源讀取，有了實體高度，撐開後續元件。
<iframe /> 完成外部資源讀取，有了實體高度，撐開後續元件。
字型完成外部資源讀取，置換相對應元件的字型，由於字型的 line-height 以及每個字所需寬度的差異，亦會造成板塊飄移。
使用了外部 widget，比方說 Google AdSense，它便會如同 lazy load + JavaScript renering 去撐開版位。

因為不悅的 UX 越來越多，也因此 Google Lighthouse 決定將 CLS 納入檢測的標準之一，讓 web developers 能夠正視這項惱人的問題。

這項檢測標準將會跟著新版的 lighthouse 的一起釋出，以「影響範圍」以及造成的「位移差異」兩個變進行相乘所得出分數便是衡量的標準。

layout shift score = impact fraction * distance fraction

如上圖所示，灰色文字區塊原本佔當前 viewport height 50% 的範圍，因為 CLS 它往下滑動 25% viewport height，所以它的影響範圍值﹙紅色虛線即為影響範圍﹚為

0.5 + 0.25 = 0.75

位移差異就是發生 CLS 後造成既有 module 的高度變化，即上述的 25% 。

所以我們可以得出版塊飄移分數為

layout shift score = 0.75 * 0.25 = 0.1875

以上便是基本的量測方法，尚有其他量測的範例解釋，有興趣的朋友可以點擊下方網址進行一覽

Cumulative Layout Shift (CLS)

What is a good CLS score ?

有了分數之後，自然會想知道該數值如何換算成「好」、「壞」？基本上只要版塊飄移分數小於 0.1 均算是一個好的 UX 表現，請以多次取樣以便獲得較為客觀的數據。

相信大家閱讀至此均相癢難耐都想暸解一下自己所服務的 web page CLS 是多少吧？！除了可以透過新版的 lighthouse 進行量測外，亦有一個 ONLINE Toole 可供 web developers 進行量測喔！

CLS Calculator

量測的方法很簡單︰

鍵入想要進行量測的網址
選擇環境以及網路連線
按下 GET CLS 按鈕

靜置一段時間後，便會秀出檢測出來的版塊飄移分數以及相關 web page 截圖。另外，CLS Calculator 亦支援 BOOKMARKLET，只要把「 BOOKMARKLET」直接拖曳至網址 bar 後，便可以在任何網頁進行量測。

亦可自己新增 bookmark，於網址的部分直接輸入下列 JavaScript 代碼，便會在該 bookmark 被點擊後動態進行量測。

javascript:(function()%7Bwindow.cumulativeLayoutShiftScore %3D 0%3Bconst observer %3D new PerformanceObserver((list) %3D> %7Bfor (const entry of list.getEntries()) %7Bif (!entry.hadRecentInput %26%26 entry.entryType%3D%3D%3D"layout-shift") %7Bconsole.log("New observer entry for cls%3A " %2B entry.value)%3Bconsole.log(entry)%3Bwindow.cumulativeLayoutShiftScore %2B%3D entry.value%3B%7D%7D%7D)%3Bobserver.observe(%7Btype%3A 'layout-shift'%2C buffered%3A true%7D)%3Blet fcp %3D performance.getEntriesByName("first-contentful-paint").pop().startTime%3BsetTimeout(function()%7Balert( "CLS%3A " %2B window.cumulativeLayoutShiftScore %2B " FCP%3A " %2B fcp)%3B%7D%2C 2000)%7D)()

How to improve ?

了解了量測準則後，如何在設計上有效改善這不好的 UX 便是我們所應注重的目標，在頁面設計的時候可以朝以下三個方向進行，一開始便明確定義各 module 的寬以及高，讓 web page 開始 render 的時候便能夠有效計算整體頁面的排列，自然就不會「蠻橫的版塊飄移 」現象發生。

針對 <img />、<video /> 以及 <iframe /> 可以明確定義其寬高，避免外部資源讀取完，有了實體高度，撐開後續元件。除此之外，也可以搭配 Aspect Ratio Boxes 的設置，讓 module 的寬高可以維持一定比例，不管當前 viewport 寬度為何均可以維持 web developers 想要呈現的比例。AMP 因為有著完善的 layout system ，亦撰文表示符合 CLS 的標準與期待。

/* CSS */
<style>
.aspect-ratio {
  position: relative;
  width: 100%;
  --w: 4;
  --h: 3;
}
.aspect-ratio:before {
  content: '';
  width: 100%;
  padding-top: calc(var(--h) * 100% / var(--w));
  display: block;
}
.aspect-ratio .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>/* HTML */
<div class="aspect-ratio">
  <div class="content">
    /* put your content here */
  </div>
</div>

如上所示，web developers 可以透過 CSS Variables w 以及 h 來動態調整所需的比例數值，CSS 便會自動將該顯示比例確切無誤的 render 出來了。

儘可能地不要進行動態調整 DOM Tree ﹙變更頁面呈現結構﹚的動作，除非那是使用者意識到的行為，太過突兀的行為總是會形成不好 UX，因此儘可能避免這樣的動作。筆者第一個想到的便是 infinity scroll 的效果，每每不經意的瀏覽一但觸發 infinity scroll 的發動，便要重新回憶方才瀏覽的段落在哪裡，或許可以搭配 Load more 按鈕來讓消彌這樣的不安。

Web page 難免會有一些使用者點擊後的回饋動畫效果，請儘量以 CSS transform 屬性來進行 animation 的設置，這是因為透過 transform 屬性的便更不僅可以在視覺上達到移動、放大縮小以及比例調整的漸變效果，更棒的是它不會影響到頁面元件的所佔位置和大小，自然就不會產生版塊飄移的現象發生。

Conclusion

以上，便是筆者對於這個全新的 UX 量測標準 CLS 的一點心得，做 frontend 真是辛苦，三天兩天便有新的準則冒出需要遵守，不過也因為這樣，才讓這一條路上充滿了挑戰與冒險，更讓筆者在習得新的知識與技能後，總能隱隱地聽到身後響起 Level Up 的背景音樂！分享給一同在這領域奮鬥的朋友們，希望對大家有所助益。