Cumulative Layout Shift，累計版面配置轉移：
頁面完全讀取完畢為止，元件位移的情況總計後，位移越嚴重此項分數越低。
本文將針對本站改善CLS的歷程進行說明。

計算方式是位移元件在畫面上移動的比例(占畫面總長的比例) * 影響面積比例(位移前後合計的範圍，占畫面的大小)，
評分最佳是0，完全沒有位移；越大代表位移越嚴重。

改善前 Before (2024/7/31) 🔗

CLS應該算是是肉眼最容易看出來的效能評分項目，以本站最初的情況：

從最初畫面渲染出來後，到渲染完畢總共經過兩次變化，
可以明顯看到，網頁底部的內容被文章列表的部分推到畫面下面去了，這導致了嚴重的元件位移，
這時候的CLS為0.315，主要來自於頁面底部(Footer)的位移。

改善方案 🔗

改善CLS有幾個大方向：

1. 圖片、元件設置固定寬高
   避免讀取期間因為元件高度改變，造成版面配置的位移
2. 首次渲染後讀取的元件，為其設置佔位元素
   先使用容器把元素所需要使用的空間佔下來，這樣就算元件讀取，他也只是在他應該在的地方呈現，不會去位移其他板塊。
3. 若用網路字型，樣式設定font-display: swap
   若有使用Google Fonts匯入字型，或是@font-face匯入字型檔，記得設置font-display: swap，
   會讓瀏覽器讀入字型前，先使用預設字型，讀取完畢後會再轉換成匯入的字型，避免字型初期無法呈現導致後續讀入時的版面位移。
4. 取巧手段
   有些情況，上面的做法仍然無法避免CLS，
   像是本站伺服器端渲染(CRS)的情況下，由於文章列表示在初次渲染以後才出現，所以導致在其下面的內容會被位移，
   這種情況就可能需要一些投機的手段進行處理。

於是在上面1-3點處理完畢後，由於目前的情況就是文章列表的推移是最大的問題主因，於是有了以下手法：

把頁面FOOTER 移動到首次渲染看不到的地方 🔗

在三欄式布局(HEADER-MAIN-FOOTER)，原本MAIN的高度設定是最小為min-height: calc(100vh - header高度 - footer高度)，
造成初次渲染會有FOOTER在畫面上，
於是改成min-height: calc(100vh - header高度 )。

強制讓FOOTER初始就不在頁面上，就不會有位移了 (X

這邊提到一下取巧的方式，元件由高處往低處(上->下)會扣分，但是反之則不會，
所以可以先做一個超級超級大的佔位符，等內容準備好再替換掉，這樣元件從下面跑回畫面，是不會扣分的。

改善後 After 🔗

經過取巧方式

從最初畫面渲染出來就已經看不到FOOTER了，
在文章列表讀取時也使用佔位符先放在畫面上，
這時候的CLS為0，基本上這項就是滿分了。