一、LCP 最大內容繪製
LCP（Largest Contentful Paint）衡量的是使用者看到主要內容的時間。Google 建議 LCP 應在 2.5 秒以內完成。
什麼算 LCP？
LCP 元素通常是頁面上最大的可見元素：首屏的大圖、標題文字、背景影片或大型文字區塊。常見的 LCP 元素類型：
<img>— 首屏的主要圖片<video>— 自動播放的封面圖- CSS 背景圖 — 透過
url()載入的大圖 - 區塊級元素 — 包含文字節點的大區塊
LCP 常見問題與修復
- 圖片未預載入：使用
<link rel="preload">預載入 LCP 圖片，避免瀏覽器等 CSS 解析後才發現圖片。 - 伺服器回應慢：使用 CDN、啟用 HTTP/2、壓縮資源（Brotli/Gzip）。
- CSS/JS 阻塞渲染：使用
async或defer載入 JavaScript，將關鍵 CSS 內嵌。 - 圖片格式不佳：改用 WebP/AVIF 格式，配合
srcset提供適當尺寸。 - 客戶端渲染：考慮使用 SSR 或 SSG 減少客戶端等待時間。
二、CLS 累計版面位移
CLS（Cumulative Layout Shift）衡量頁面在載入過程中視覺穩定性。好的 CLS 分數應低於 0.1。
版面位移的常見原因
- 無尺寸的圖片/影片：未設定
width和height，導致圖片載入後推擠其他元素。 - 動態注入的廣告/嵌入：廣告載入後改變頁面高度。
- 動態插入的內容：例如「更多」按鈕後面突然出現的內容。
- Web 字型導致的 FOUT/FOIT：字型載入前後的文字大小變化。
CLS 修復技巧
- 為所有圖片和影片設定明確的
width和height屬性，或使用aspect-ratioCSS 屬性。 - 廣告區塊使用固定的
min-height，即使廣告未載入也預留空間。 - 使用
content-visibility: auto減少非首屏內容的版面計算。 - 字型使用
font-display: optional或font-display: swap搭配大小調整。
三、INP 互動到下一次繪製
INP（Interaction to Next Paint）於 2024 年 3 月取代 FID，成為 Core Web Vitals 的正式指標。INP 衡量頁面對所有使用者互動的回應速度，應在 200 毫秒以內。
INP vs FID 的差異
FID 只衡量第一次互動的延遲，而 INP 衡量整個頁面生命週期中所有互動的回應時間，取最差值作為代表。這意味著即使首次互動很快，如果後續互動卡頓，INP 分數仍然會很差。
INP 優化策略
- 拆分長任務：使用
requestIdleCallback或scheduler.yield()將長時間的 JavaScript 任務拆分為小塊。 - 減少 DOM 規模：過多的 DOM 節點會增加事件處理與版面計算的時間。目標維持在 1,500 個節點以內。
- 優化事件處理器：確保事件回調函數執行時間短暫，必要時使用 Debounce/Throttle。
- 避免忙碌的主執行緒：將計算密集的任務移到 Web Worker。
四、測量工具與基準
以下工具可以幫助你測量 Core Web Vitals：
- PageSpeed Insights：結合實驗室（Lighthouse）與現場（CrUX）數據，是最全面的工具。
- Chrome DevTools → Performance：查看 LCP 標記、佈局偏移事件。
- Web Vitals Chrome 擴充套件：即時顯示當前頁面的 CWV 數據。
- Search Console → 核心網頁指標：查看全站的現場數據報告。
- Lighthouse（CLI 版）：可在 CI/CD 流程中自動化執行。
五、優化實戰步驟
建議的優化順序：
- 先在 PageSpeed Insights 查看目前的分數，記錄基準值。
- 優先處理 LCP — 通常是投入產出比最高的指標。預載入 LCP 圖片、優化圖片格式。
- 接著處理 CLS — 確認所有圖片有尺寸屬性、廣告有預留空間。
- 最後處理 INP — 檢查主執行緒的長任務，拆分 JavaScript 任務。
- 每次修改後重新測量，確保改善效果。使用 CrUX 數據追蹤長期趨勢。
六、總結
Core Web Vitals 不只是技術指標，更是使用者體驗的量化。投資在 CWV 優化上，不僅能提升搜尋排名，更能直接改善使用者滿意度與轉換率。需要專業協助？的效能優化團隊。