LCP
LCP 衡量首屏最大內容元素渲染完成的時間。偏慢會影響體驗與 Core Web Vitals 表現。
定義
LCP（Largest Contentful Paint）是 Core Web Vitals 指標之一，衡量首屏最大內容元素完成渲染的時間。常見瓶頸是首屏大圖、字體、阻塞資源與 TTFB。改善 LCP 的核心是：更快的回應、更少阻塞、更快載入關鍵資源。
為什麼重要
- 直接影響首屏載入體感與使用者轉換率
- 是 Core Web Vitals 三大指標之一，Google 用它評估體驗
- LCP 偏慢會拖累 SEO 競爭力（體驗訊號是排名因素）
- LCP 元素通常是首屏主圖或大標題，直接影響第一印象
- 行動裝置 LCP 通常比桌面慢，需特別優化
- LCP 受 TTFB 直接影響——伺服器慢 LCP 就慢
- 良好的 LCP 能降低跳出率、提升停留時間
怎麼做（實作重點）
- 降低 TTFB：使用 CDN、邊緣快取、SSG/prerender
- 優化首屏主圖：正確尺寸、WebP/AVIF 格式、預載入
- 使用 fetchpriority="high" 讓瀏覽器優先載入 LCP 元素
- 移除 render-blocking：延後非必要 JS/CSS 或 async/defer
- 內聯關鍵 CSS，避免 FOUC（Flash of Unstyled Content）
- 預載入 LCP 圖片：<link rel="preload" as="image">
- 監控 LCP：用 Lighthouse、CrUX、RUM 持續追蹤
範例
html
<!-- 在 <head> 預載入首屏主圖 -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<!-- 圖片本身也加上 fetchpriority -->
<img src="/hero.webp" alt="主視覺" fetchpriority="high" width="1200" height="600">html
// 監控真實 LCP 數值
new PerformanceObserver((list) => {
const entries = list.getEntries();
const lastEntry = entries[entries.length - 1];
console.log('LCP:', lastEntry.startTime.toFixed(0), 'ms');
console.log('LCP element:', lastEntry.element);
}).observe({ type: 'largest-contentful-paint', buffered: true });相關連結
常見問題
關於這個詞彙的常見問答。