Web Vitals進階
什麼是 LCP?如何優化以達到 Core Web Vitals 標準?
什麼是 LCP?
Largest Contentful Paint(最大內容繪製) 測量頁面主要內容載入完成的時間。Google Core Web Vitals 標準:
| 分數 | LCP 時間 |
|---|---|
| 良好 | ≤ 2.5s |
| 需改善 | 2.5s – 4.0s |
| 差 | > 4.0s |
LCP 的觸發元素
<img>圖片<video>封面圖- 含背景圖的區塊元素
- 大型文字區塊
優化策略
1. 預載關鍵資源
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
2. 使用 WebP / AVIF 格式
<picture>
<source type="image/avif" srcset="/hero.avif">
<source type="image/webp" srcset="/hero.webp">
<img src="/hero.jpg" alt="Hero" width="1200" height="600">
</picture>
3. 避免 render-blocking 資源
- CSS:Critical CSS inline,非關鍵 CSS
media="print" - 字體:
font-display: swap
✦ AI 模擬面試
輸入你的答案,AI 即時分析精準度與改進空間
登入後即可使用 AI 評分
