MO design studio logo
MO design studio
← 返回生活雜記

LIFE JOURNAL

網站核心體驗指標 (Core Web Vitals) 2025 指南：LCP, INP, CLS 優化全攻略

2025年12月31日2 分鐘閱讀
#WordPress

Google 已將 INP 取代 FID。這篇指南教你如何優化 2025 年最重要的三個使用者體驗指標，提升排名與轉換率。

網站核心體驗指標 (Core Web Vitals) 2025 指南：LCP, INP, CLS 優化全攻略

先說結論

速度不只是為了 SEO，更是為了留住使用者。

2025 年 Google Core Web Vitals (CWV) 的三大支柱：

  1. LCP (載入速度) — 看到最大內容及其速度 (< 2.5 秒)
  2. INP (互動反應) — 點擊後多久有反應 (< 200 毫秒) [2024 新指標]
  3. CLS (視覺穩定) — 畫面是否會亂跳 (< 0.1)

網站每慢 1 秒，轉換率平均下降 7%。優化 CWV 是 ROI 最高的技術投資之一。

LCP (Largest Contentful Paint) 最大內容繪製

這是什麼？

計算使用者打開網頁後，看到「最大區塊內容」（通常是首圖或大標題）所需的時間。

標準

  • 🟢 良好：< 2.5 秒
  • 🟡 需要改善：2.5 - 4.0 秒
  • 🔴 不佳：> 4.0 秒

優化策略

  1. 升級主機：這是最快見效的方法。從共享主機升級到 Cloudways/VPS，TTFB (Time to First Byte) 瞬間縮短。

  2. 圖檔優化：

    • 使用 WebP / AVIF 格式 (比 JPEG 小 30-50%)。
    • 針對手機提供適當尺寸 (srcset)。

  3. 預先載入 (Preload)：在 <head> 加上：

    <link rel="preload" as="image" href="banner.webp">

  4. 使用 CDN：讓全球使用者都能從最近的節點下載圖片。

INP (Interaction to Next Paint) 互動至下次繪製

這是什麼？

取代了舊的 FID 指標。它測量使用者「每一次互動」（點擊、打字、按鍵）到瀏覽器顯示「視覺回饋」的延遲時間。

簡單來說：我點了按鈕，網站卡了多久才動？

標準

  • 🟢 良好：< 200 毫秒
  • 🟡 需要改善：200 - 500 毫秒
  • 🔴 不佳：> 500 毫秒

優化策略

這是工程師的主戰場。

  1. 減少主執行緒 (Main Thread) 負擔：JavaScript 執行太久會卡住介面。
  2. 延遲載入第三方腳本：Google Tag Manager, FB Pixel 等非即時腳本，使用 defer 或 async。
  3. 優化事件監聽器 (Event Listeners)：避免在 scroll 或 resize 事件中執行複雜運算。
  4. 視覺回饋優先：點擊按鈕後，先用 CSS 顯示按壓狀態 (Loading Spinner)，再執行後端運算。

CLS (Cumulative Layout Shift) 累計版面配置位移

這是什麼？

測量網頁元素是否會「突然移動」。 例如：你想點文章連結，結果廣告突然載入，把文章擠下去，害你點到廣告。這就是 CLS 很高。

標準

  • 🟢 良好：< 0.1
  • 🟡 需要改善：0.1 - 0.25
  • 🔴 不佳：> 0.25

優化策略

  1. 預留圖片空間：一定要設定 width 和 height 屬性。

    <!-- ❌ 錯誤 -->
<img src="ad.jpg">

<!-- ✅ 正確：瀏覽器會預留 300x250 的空間 -->
<img src="ad.jpg" width="300" height="250">

  2. 字體優化：使用 font-display: swap，避免字體載入前後寬度不同導致排版跳動。

  3. 動態插入內容：若要插入廣告或橫幅，請預先用 CSS 撐開固定高度的容器 (Container)。

常見問題 FAQ

Q: PageSpeed Insights 測出 100 分，SEO 就會第一名嗎？

不會。CWV 只是排名因素之一 (Ranking Factor)，內容品質 (Content Quality) 權重更高。但如果兩個網站內容差不多，速度快的會贏。

Q: 手機版和電腦版分數不同，要看哪個？

看手機版。Google 採行 Mobile-First Indexing（行動優先索引），手機版體驗決定你的排名。

Q: 為什麼我的 Lab Data 分數很高，Field Data 卻不及格？

  • Lab Data (實驗室數據)：模擬環境測的，受你自己網速影響。
  • Field Data (真實使用者數據)：來自真實訪客的 Chrome 紀錄。這是 Google 評分依據。 如果 Field Data 差，表示你的真實訪客（可能用 4G 網路或舊手機）體驗不好。

總結

優化 Core Web Vitals 的核心思維：尊重使用者的時間與注意力。

  • LCP：別讓使用者等。
  • INP：別讓使用者卡。
  • CLS：別讓使用者點錯。

做好這三點，你的網站體驗就贏過 90% 的對手。

下一步行動

  1. 🔍 前往 PageSpeed Insights 輸入你的網址
  2. 📊 查看 "此 URL 的實際使用者體驗" (Field Data) 是否全綠
  3. 🛠️ 優先修正 LCP 問題（通常最容易改善且影響最大）

👉 延伸閱讀：反向連結 (Backlinks) 建立策略：2026 AI 時代的數位公關戰

資料來源

瘦桑

Editor

瘦桑

MO Design Studio 共同創辦人。關注設計 × 工程的平衡協作，擅長以簡潔語言說故事。

InstagramThreadsYouTube

延伸閱讀