CLS 版面位移
圖片尺寸、廣告、字體交換
CLS 像正要坐下時被抽走的椅子——按鈕明明在這裡，廣告一載入整排位移，手指按到的是別的東西。
03為什麼是現在學
CLS（累積版面位移）門檻 0.1。它是「使用者憤怒指數」：亂跳的版面讓人誤點，也讓 Google 對頁面體驗扣分。
04白話理解（對客戶簡報可直接引用）
三大元兇與解法：①圖片沒寫尺寸→ img 一律給 width/height（或 aspect-ratio），瀏覽器先留好位子 ②動態插入的廣告/橫幅→ 預留固定空間 ③網頁字體交換造成文字重排→ font-display: swap＋調整 fallback 字體大小。
05工具箱
- ▸PSI 實地 CLS — p75 ≤ 0.1
- ▸DevTools Performance 的 Layout Shift 紀錄 — 每次位移哪個元素造成，逐筆列出
06怎麼做 · SOP 3 步（每步標產出物）
- 1找出位移元素 Top 5→ 位移元兇清單
- 2圖片尺寸屬性全站補齊（模板層解決）→ 模板修復
- 3動態區塊預留空間→ 版面修復紀錄
07場景應用（實戰經驗）
- ◆文章頁頂部的動態公告列沒預留高度——每篇文章開頭都跳一下。預留 48px 固定高，CLS 從 0.24 直接歸零級。
08⚠️ 常見誤區
- ✕cookie 同意橫幅用「推開內容」的方式出現——改成覆蓋式（overlay）就不位移。
口訣
「每個會出現的東西，先把位子留好。」
10里程碑 · 完成標準（可驗證）
- ☐行動版 CLS p75 ≤ 0.1
- ☐圖片皆有尺寸屬性
學習者勾自己的進度；顧問勾客戶專案的交付——同一份標準，兩種用法。
12檢核方式與依據出處
程式自動判定：輸入網址，掃描引擎自己爬、自己打 API、自己判定。
- 🟢 官方明文web.dev：CLS 定義與優化 ↗
依據等級決定計分權重（🟢×3／🔵×2／⚠️×1）——權重量的是「依據有多硬」， 不是「我們覺得多重要」。查無權威文件的判準，誠實標「業界慣例」。