CLS (Cumulative Layout Shift)

避免突如其然的 layout 變化造成使用者體驗不佳

造成分數不佳的原因

1. 圖片缺少初始尺寸，會等載入後才會長出寬高

2. 缺少尺寸的廣告、Embed、Iframe

3. 動態加入的內容

4. 下載網站字體有機會造成頁面閃爍

5. 更新 DOM 前等待網路回應的動作

如何避免

1. 字體 preload

2. 給預設寬高