LCP（Largest Contentful Paint） 衡量首屏最大內容元素完成繪製的時間。PageSpeed 分數掉下來，你第一個想到的通常是「圖太大」——但有時候真正的原因是：你把主視覺圖設成 loading="lazy"，等於請瀏覽器「晚點再叫主角上台」。

這篇帶你找出真正的 LCP 元素，用決策表分清楚 lazy、fetchpriority 與 preload，並提供 Eleventy 靜態站可驗收的流程。

快速參考

項目說明
良好門檻（p75）LCP ≤ 2.5 秒
首屏 LCP 圖不要 loading="lazy"；必要時 fetchpriority="high"
內文／頁尾圖放心 loading="lazy"
CSS 背景 LCP 圖<link rel="preload" as="image">
先確認PSI 或 DevTools 標出的 LCP 元素是誰

延伸：PageSpeed Insights 與 Core Web Vitals 指南 · 11ty PSI 優化工作流

目錄

先抓到你真正的 LCP 元素

不要猜「應該是主視覺圖」。LCP 也可能是 H1、文章開頭大段文字或其他佔面積最大的元素。

  1. 開 PageSpeed Insights 或 Chrome DevTools → Performance 錄一次載入
  2. 看報告標出的 LCP 元素（圖片、文字區塊或 H1）
  3. 記下 URL 或 DOM 節點，後面改碼才有對象

先確認「誰是 LCP」，再決定要不要調圖片；不然很容易把不是主角的圖片打扮成 VIP。

決策表：lazy、fetchpriority、preload 怎麼選

情境建議做法為什麼
確認是首屏 LCP 圖片不用 loading="lazy"；加 fetchpriority="high"讓瀏覽器及早下載關鍵圖片
LCP 是 CSS 背景圖或 JS 才出現<link rel="preload" as="image" fetchpriority="high">瀏覽器不易從初始 HTML 發現
內文圖、頁尾圖、側欄縮圖loading="lazy"頻寬先留給首屏
一、兩張真正關鍵的圖只對那些圖用 fetchpriority="high"高優先級用太多會失效
Eleventy Transform 自動補 lazy主視覺圖覆寫 loading="eager"內文預設不適合 LCP 圖

心法：首屏 LCP 圖不要 lazy；確認是關鍵資源後再提高優先級；其餘圖片放心 lazy。

實作範例

首屏 LCP 圖：不 lazy + fetchpriority

<!-- ❌ 主視覺被延後 -->
<img src="/img/hero.webp" loading="lazy" alt="主視覺">

<!-- ✅ 首屏主角 -->
<img
  src="/img/hero.webp"
  alt="主視覺"
  width="1200"
  height="630"
  loading="eager"
  fetchpriority="high"
/>

別忘了 width／height 預留版面——LCP 和 CLS 常常是同一張圖一起修。見 圖片尺寸與 CLS。

CSS 背景 LCP：preload

<link rel="preload" fetchpriority="high" as="image" href="/img/hero.webp" type="image/webp">

<img
  src="/img/hero.webp"
  fetchpriority="high"
  alt="網站主視覺"
  width="1200"
  height="630"
/>

preload 讓瀏覽器更早發現資源；fetchpriority 提示相對重要性。兩者可搭配，但不是每張圖都要一起上。

Eleventy：覆寫 Transform 預設 lazy

本站 HTML Transform 會替沒設定的圖片補 loading="lazy"。主視覺圖需明確覆寫：

<img
  src="/img/hero.png"
  alt="產品主視覺"
  loading="eager"
  fetchpriority="high"
  sizes="(max-width: 800px) 100vw, 1200px"
/>

build 後檢查輸出 HTML，確認 loading、fetchpriority、srcset 與 sizes 都符合預期。

避免 render-blocking 讓首屏卡住

資源類型建議
非關鍵 JavaScriptdefer 或 async；第三方標籤延後載入
CSS避免不必要的 @import 串接
Web 字體font-display: swap；關鍵字體才 preload

GTM 延遲載入見 requestIdleCallback 降低 TBT。

框架對照

框架LCP 注意事項
Hugo主視覺模板別加 lazy
EleventyTransform 預設 lazy，hero 覆寫 eager + fetchpriority
Astro確認 <Image /> 輸出的 loading 設定

驗收清單

  1. PSI 或 DevTools 是否指出同一個 LCP 元素？
  2. LCP 圖是否在初始 HTML 中可發現？背景圖是否需要 preload？
  3. 是否誤用 loading="lazy"？fetchpriority="high" 是否只用在少數關鍵資源？
  4. build 後 HTML 與 Network 瀑布圖是否符合預期？
  5. CLS 的尺寸預留是否仍在？

結語

  • 用 PSI／DevTools 找出真正的 LCP 元素
  • 首屏 LCP 圖不要 loading="lazy"
  • 確認需要時再加 fetchpriority="high" 或 preload
  • Eleventy 管道自動 lazy 時，主視覺圖要個別覆寫

先改一個真正的瓶頸，再重新測量；不要一次把整個 <head> 塞滿 preload。

參考資料