結論先講
Core Web Vitals 有三個指標，常被整包丟給工程師。但實際上其中兩個的根因在設計稿：
| 指標 | 白話 | 標準 | 根因在哪 |
|---|---|---|---|
| LCP | 主要內容多久才出現 | 低於 2.5 秒 | 設計 ＋ 工程 |
| CLS | 版面會不會亂跳 | 低於 0.1 | 主要在設計 |
| INP | 點下去多久才有反應 | 低於 200 毫秒 | 主要在工程 |
以下是三個指標的白話解釋，以及在設計階段就能做完的防範。
CLS：版面位移——最該由設計端解決的一個
症狀
你正在讀一段文字，上方的圖片突然載入完成，把整段文字往下推——你的視線瞬間失去位置。或者更糟：你正要點按鈕，版面一跳，你點到了旁邊的廣告。
根因
元素沒有預留空間。 瀏覽器在圖片載入完成前不知道它多高，於是先當成 0，載完才撐開，把下方所有東西推走。
設計端解法
為每一個會後載入的區塊鎖定尺寸或長寬比。
具體到設計工具裡：
- 圖片容器設定固定長寬比（例如 16:9），而不是讓高度隨內容自動撐開
- 使用 Auto Layout 並把圖片的縮放行為設為填滿容器
- 廣告版位、嵌入式內容、動態載入的區塊，一律給一個固定尺寸的佔位框
一個可以直接做的對照練習
在設計檔裡放兩個版本並排：
| 錯誤版 | 正確版 | |
|---|---|---|
| 圖片高度 | 自動（隨內容） | 鎖定長寬比 16:9 |
| 下方文字 | 圖片載入時被推開 | 位置固定不動 |
| 廣告版位 | 沒有佔位 | 固定尺寸佔位框 |
把兩版並排給工程師看，比寫十行說明有效。
LCP：主要內容多久出現——一個最常見的反直覺錯誤
症狀
打開頁面，版面骨架出來了，但最重要的那張主視覺還是一片空白，過了三四秒才浮現。
最常見的錯誤：把首屏大圖設成延遲載入
延遲載入（lazy loading）是好東西——它讓還沒滑到的圖片先不要下載，省流量也加快初始載入。
但它不該套用在首屏那張圖上。
首屏主圖通常就是 LCP 元素本身，也就是「主要內容」。把它設成延遲載入，等於告訴瀏覽器「這張不急」——而它其實是最急的那張。
| 錯誤 | 正確 | |
|---|---|---|
| 首屏主圖 | 延遲載入 | 優先載入 |
| 其餘圖片 | 優先載入 | 延遲載入 |
| 圖片格式 | 未壓縮的 JPG/PNG | WebP 或同級的現代格式 |
設計端能做的三件事
- 標出哪一張是首屏主圖，並在交付說明寫明「這張要優先載入」
- 控制首屏圖片的尺寸與複雜度——一張 4MB 的滿版去背圖，怎麼優化都快不了
- 考慮首屏是否真的需要大圖——有時候一段清楚的標題比一張慢半拍的照片體驗更好
INP：互動反應——設計端能幫上的一件事
症狀
點下按鈕，畫面什麼都沒發生，你以為沒點到，再點一次。
這一項主要在工程端
INP 量的是從使用者互動到畫面產生反應之間的延遲。造成延遲的通常是主執行緒被大量運算佔住，那是工程議題。
但設計端有一件事很關鍵：即時的視覺回饋
互動元件必須在被觸發的瞬間就有視覺反應，不能等資料回來才有反應。
設計稿要明確定義：
- 按鈕的按下狀態（pressed）
- 送出後的載入狀態（loading，例如轉圈或骨架屏）
- 完成與失敗狀態
沒有定義這些狀態，工程師就只會做「成功」那一種，於是使用者在等待期間看不到任何回饋。
這不會讓 INP 的數值變好，但會讓使用者不覺得卡。 而後者才是這個指標真正在意的事。
一份設計交付前的三題檢查
不需要工具，看設計稿就能檢查：
- 所有圖片區塊都鎖定了長寬比或固定高度嗎？（防 CLS）
- 首屏主圖有標明「優先載入」嗎？（防 LCP 惡化）
- 互動元件有定義按下、載入、完成、失敗四種狀態嗎？（防 INP 體感問題）
這三題做到，實測時通常不會掉進紅燈區。
分數該追到什麼程度
PageSpeed Insights 的分數分三段：
| 分數 | 意義 | 該怎麼辦 |
|---|---|---|
| 0–49（紅） | 使用者真的感覺得到卡 | 必須處理 |
| 50–89（黃） | 可以更好 | 有餘力再優化 |
| 90–100（綠） | 良好 | 不必追滿分 |
務實的目標是脫離紅燈，不是追滿分。 為了最後幾分犧牲設計品質或內容深度，通常划不來——搜尋排名的主要因素仍然是內容相關性，體驗指標比較像是同分時的比較基準。
但紅燈要處理。紅燈代表的不只是分數，是使用者真的在等。
常見問題
Core Web Vitals 分數不好，真的會影響搜尋排名嗎？
會，但它是加分項不是決定項。內容相關性仍然是主要因素，體驗指標比較像是同分時的比較基準。務實的看法是：不要為了追滿分犧牲內容，但也不要讓分數掉到紅燈區——紅燈通常代表使用者真的感覺得到卡頓，那個損失比排名更直接。
CLS 是什麼？為什麼設計師需要管？
CLS 是版面位移量，白話說就是「內容載入到一半，畫面突然跳動」。最常見原因是圖片或廣告沒有預留空間，載入完成的瞬間把下方內容推開。這是設計決定：只要在設計稿就為圖片鎖定長寬比、為廣告版位預留固定尺寸，這個問題大部分會消失。
所有圖片都設成延遲載入不是比較快嗎？
首屏那張不行。延遲載入的意思是「滑到才載」，但首屏大圖是使用者一進來就要看到的東西，設成延遲載入等於刻意延後它出現，反而讓 LCP 變差。正確做法是首屏主圖優先載入，其餘圖片才延遲載入。
INP 和舊的 FID 有什麼不同？
FID 只量「第一次互動」的延遲，INP 量的是整個瀏覽過程中所有互動的反應速度，取接近最差的值。這代表以前只要開頭順就好，現在整段體驗都要順。對設計端的影響是：互動元件要有立即的視覺回饋，不能等資料回來才有反應。
設計稿階段就能測 Core Web Vitals 嗎？
測不了實際數值，但可以檢查結構性風險，這才是重點。三個檢查：所有圖片區塊有沒有鎖定長寬比、首屏主圖有沒有被標為優先載入、有沒有為廣告或動態內容預留固定空間。這三項做到，實測時通常不會出現紅燈。