LCP 最大內容繪製
圖片與字體是兩大元兇
LCP 像上菜速度——客人坐下後主菜多久端出來。前菜（skeleton、背景）再快，主菜 5 秒不來，體感就是慢。
03為什麼是現在學
LCP（最大內容繪製）是 Core Web Vitals 三指標之首，門檻 2.5 秒（p75 實地）。主圖與網頁字體是兩大元兇，通常也最好修。
04白話理解（對客戶簡報可直接引用）
LCP 量「畫面上最大那塊內容」出現的時間——通常是主圖或大標題。修法固定套路：主圖不 lazy、加 priority/preload、用現代格式（AVIF/WebP）壓尺寸；字體 preload＋font-display: swap；TTFB 墊底要好（見 f02）。目標：行動版 p75 ≤ 2.5s。
05工具箱
- ▸PageSpeed Insights（實地 CrUX 優先） — lab 只拿來除錯
- ▸DevTools Performance 面板 — LCP 元素是哪塊、卡在哪一段
06怎麼做 · SOP 4 步（每步標產出物）
- 1確認 LCP 元素（每頁型）→ LCP 元素清單
- 2主圖優化四件套：格式/尺寸/priority/不 lazy→ 圖片修復紀錄
- 3字體 preload＋swap＋subset→ 字體策略落地
- 4改後對照實地資料（等 28 天 CrUX 更新）→ 前後對照
07場景應用（實戰經驗）
- ◆首圖 4MB 的 PNG 從設計稿直接上線是最常見案例——轉 WebP＋壓到 200KB，LCP 從 4.8s 掉到 2.1s，一張圖的事。
08⚠️ 常見誤區
- ✕把首屏主圖 lazy load——lazy 是給首屏外的圖用的，主圖 lazy 等於自己拖慢主菜。
口訣
「主菜（主圖）先上：不 lazy、要 preload、格式新。」
10里程碑 · 完成標準（可驗證）
- ☐行動版 LCP p75 ≤ 2.5s
- ☐各頁型 LCP 元素已知且已優化
學習者勾自己的進度；顧問勾客戶專案的交付——同一份標準，兩種用法。
12檢核方式與依據出處
程式自動判定：輸入網址，掃描引擎自己爬、自己打 API、自己判定。
- 🟢 官方明文web.dev：LCP 定義與優化 ↗
依據等級決定計分權重（🟢×3／🔵×2／⚠️×1）——權重量的是「依據有多硬」， 不是「我們覺得多重要」。查無權威文件的判準，誠實標「業界慣例」。