LCP（最大內容繪製）是核心網頁指標之一，用來衡量「使用者打開你的網頁後，畫面上最大的那塊主要內容多久才出現」。它代表的，就是訪客「感覺這頁載入快不快」的那個關鍵瞬間。
這篇文章會用新手角度說明：LCP 是什麼、2.5 秒的門檻怎麼來、哪些東西會被算成「最大內容」、實際上要怎麼一步步檢查與改善。
重點速覽
- LCP 是核心網頁指標之一，量的是頁面最大內容元素出現的時間，良好門檻是 2.5 秒以內。
- LCP 元素不一定是圖片，也可能是一段大標題文字，優化前要先確認自己頁面的 LCP 元素是誰。
- 主圖千萬別加延遲載入（lazy-load），那會讓 LCP 元素更晚下載，反而拖慢分數。
LCP 是什麼？
依 web.dev（Google 的開發者資源）的定義，LCP 會回報「可視範圍內最大的那塊圖片、文字或影片」畫出來的時間，計算的起點是使用者開始載入頁面的那一刻。
它是三項核心網頁指標之一，專門量「使用者感受到的載入速度」。
為什麼挑「最大的那塊」？因為頁面上最大的元素通常就是主角，例如文章的主圖或大標題。
當這塊內容出現，使用者多半就會覺得「主要內容差不多到齊了」。
官方建議的門檻整理如下表：
| 評級 | LCP 數值 | 代表意義 |
|---|---|---|
| 良好 | ≤ 2.5 秒 | 載入體驗順暢 |
| 待改善 | 2.5 – 4 秒 | 使用者有感的等待 |
| 不佳 | > 4 秒 | 訪客容易等到不耐煩而離開 |
和其他核心網頁指標一樣，Google 是用「真實使用者數據」的第 75 百分位數（p75）來判定，並把行動裝置與桌機分開看。
白話說，就是要有 75% 的造訪都在 2.5 秒內完成 LCP，這一頁才算「良好」。
用白話文怎麼說？
你可以把打開網頁，想成走進一家店。
你最在意的，通常不是角落的小招牌，而是「最大、最顯眼的那個主視覺，多久出現在你眼前」。LCP 量的，就是這段等待的時間。
再換一個場景：你坐進餐廳，最在意的往往是「主餐多久端上桌」，而不是「最後一道甜點什麼時候到」。LCP 看的就是那道主餐，不是整桌菜全部上齊。
你可以這樣記：LCP 顧的是「第一眼的主畫面快不快」。主角越快登場，使用者越覺得這個網站俐落、值得等下去。
LCP 實際上要做什麼？
第一步，先搞懂「哪些元素會被算成 LCP」。依 web.dev 文件，目前會被列入計算的，主要有這幾種：
<img>圖片元素（動態 GIF、動畫 PNG 以第一格畫面的時間為準）。<video>影片元素（取海報圖或第一格畫面，以較早者為準）。- 用
url()載入背景圖的元素（純 CSS 漸層不算）。 - 包含文字的區塊級元素，例如一段大標題。
看到這裡你會發現：LCP 不一定是圖片，也可能是一段大標題文字。先確認自己頁面的「最大內容」是誰，後面才知道要優化什麼。
第二步，認識 LCP 是由四個階段「加總」出來的。知道卡在哪一段，才不會亂槍打鳥：
- TTFB（首位元組時間）：從開始載入，到瀏覽器收到第一個位元組。伺服器太慢，這段就會拖很長。
- 資源載入延遲：從 TTFB 之後，到瀏覽器「開始」下載那張 LCP 圖。延遲常常來自太晚才被發現。
- 資源載入時間：那張圖「下載」本身花的時間，檔案越大越久。
- 元素繪製延遲：圖下載完，到真正畫到畫面上的最後一哩路。
第三步，照這個流程檢查與改善：
- STEP 1 看真實數據：到 Google Search Console 的「核心網頁指標」報表，或 PageSpeed Insights 上半部的田野數據。
- STEP 2 找出 LCP 元素：用
Lighthouse或 Chrome 開發者工具，看這頁的 LCP 到底是哪一個元素。 - STEP 3 判斷卡在哪一階段：是伺服器慢（TTFB）、圖太晚被發現，還是檔案太大。
- STEP 4 對症下藥：依下面方向處理那一段。
- STEP 5 過幾週再回頭看：田野數據以 28 天滾動更新，別期待隔天就變綠。
常見且有效的改善方向包括：
- 主圖不要延遲載入：千萬別替 LCP 圖片加
loading="lazy"，那只會讓它更晚下載，反而拖慢 LCP。 - 替主圖加高優先度：用
fetchpriority="high"提示瀏覽器優先抓這張關鍵圖片。 - 背景圖用 preload 提早發現：用
url()載入的背景圖容易被太晚發現，可用預載提早排隊。 - 壓縮圖片、選對格式：用
WebP這類較有效率的格式，並透過 CDN 加速傳輸。 - 加快伺服器、減少阻擋：縮短 TTFB，移除會擋住渲染的
JavaScript與 CSS。
關於 LCP 的常見迷思
迷思一：LCP 就是「整頁載入完成」的時間
不是。LCP 只算到「最大那塊內容出現」為止，不必等整頁所有圖片、廣告、腳本都跑完。
把它想成主角登場，而不是全劇終。
迷思二：把主圖設成 lazy-load 可以加速
剛好相反。延遲載入（lazy-load）適合用在「捲動才看得到」的下方圖片；但 LCP 主圖一開始就在畫面上，替它加延遲載入只會多出幾百毫秒的等待，讓 LCP 變慢。
主圖請務必排在最優先。
迷思三：Lighthouse 分數漂亮就代表 LCP 過關
不一定。Lighthouse 給的是「實驗室數據」，而 Google 判定排名用的是「真實使用者的田野數據（CrUX）」。
你的電腦網路很快，不代表所有訪客都這麼順，兩邊常常對不起來。
迷思四：LCP 一定是圖片
不一定。如果頁面最顯眼的是一段大標題文字，那段文字就會是 LCP 元素。
所以優化前，先確認自己這頁的「最大內容」到底是圖還是字。
總結
如果只記一句話：LCP 量的是「網頁最大、最主要的那塊內容，多久才出現在使用者眼前」，良好門檻是 2.5 秒以內。
新手可以記住三件事。
- 第一，先到 Google Search Console 看自己的 LCP 落在哪一級，再用工具找出 LCP 元素是圖還是字。
- 第二，判斷它卡在四階段裡的哪一段——伺服器慢（TTFB）、發現太晚，還是檔案太大，再對症下藥。
- 第三，主圖別延遲載入、給它高優先度，並耐心等田野數據以 28 天滾動更新後再回頭複查。
