LighthouseCore Web Vitals效能優化LCPINPCLS2026

Lighthouse 改革：從傳統 audits 到 Performance Insights

Lighthouse 12.6.0 Performance Insights 完整教學！Core Web Vitals 跨瀏覽器支援、LCP/INP/CLS 優化攻略。2026 年工程師必看的效能測量指南！

· 5 分鐘閱讀
📋 目錄

2026 年，Core Web Vitals 的最後一塊補丁落定了：Safari 26.2 終於支援 LCP 和 INP，Firefox 144 早一步支援了 INP。從此，Largest Contentful Paint（LCP）、Interaction to Next Paint（INP）、Cumulative Layout Shift（CLS）這三個指標，終於在所有主流瀏覽器都可以測量。同時，Lighthouse 12.6.0 帶來了 Performance Insights——一個比傳統 audits 更有價值的效能診斷工具。如果你是前端工程師或 SEO 從業人員，這些變化直接影響你怎麼測量和優化你的網站效能。

前端工程師為什麼要關心這些變化

Core Web Vitals 是 Google 用來衡量「使用者體驗」的一組標準化指標。這組指標會直接影響搜尋排名（頁面體驗訊號），所以前端工程師長期以來都有關注的必要。

但問題在於：Safari 和 Firefox 的 Core Web Vitals 支援長期以來都有缺口，導致很多團隊只測量 Chrome 上的資料，忽略了 Safari 和 Firefox 用戶的真實體驗。

2026 年，這個缺口終於關閉了。同時 Lighthouse 的改革，讓效能診斷從「給你一堆審計結果」變成「直接告訴你問題在哪裡以及怎麼修」。

Core Web Vitals 2026：三個指標全面跨瀏覽器支援

三個指標的意義

指標測量什麼良好的標準
LCP（Largest Contentful Paint）主要內容載入速度< 2.5 秒
INP（Interaction to Next Paint）互動響應速度（取代 FID）< 200 毫秒
CLS（Cumulative Layout Shift）視覺穩定性< 0.1

INP：為什麼它取代了 FID

INP 在 2024 年取代了 FID（First Input Delay）成為 Core Web Vitals 的一員。FID 只測量「第一次互動」的延遲，INP 測量的是「整個頁面生命週期內，所有互動中最慢的那一次」。

FID 的問題：
頁面載入後 3 秒，用戶點了一下按鈕
但那個按鈕在點擊後 500ms 才響應
→ FID = 500ms（不好）

INP 的改進：
追蹤用戶在頁面上的所有互動（點擊、鍵盤輸入等）
記錄每個互動從觸發到視覺回饋的時間
取最慢的那個作為 INP 分數
→ INP 能更全面地反映頁面的互動品質

2026 年瀏覽器支援地圖

瀏覽器LCPINPCLS
Chrome✅ 早已支援✅ 早已支援✅ 早已支援
Safari✅ 26.2+（2025/12）✅ 26.2+（2025/12）✅ 早已支援
Firefox✅ 早已支援✅ 144+（2025/10）✅ 早已支援

2025 年的數據參考

  • 77% 的行動版頁面達到了良好 INP 分數（< 200ms）
  • 這個數字相比前一年有顯著提升，反映了開發者對 INP 的重視

Lighthouse 12.6.0：Performance Insights

傳統 audits 的問題

過去的 Lighthouse 給你一堆「audits」結果，每個 audit 結果像是一份檢查清單：某個圖片沒有壓縮、某個 JS 太大、某個字體沒有 preload⋯⋯

這些資訊有價值，但沒有優先順序。一個新手面對 50 個 audit warnings，不知道從哪裡開始修。

Performance Insights 的做法

Performance Insights 把 audit 結果轉換成三個可操作的維度：

  1. What to fix（修什麼）：直接告訴你瓶頸在哪裡
  2. Why it matters（為什麼重要）：這個問題影響什麼指標
  3. How to fix（怎麼修）：具體的優化建議
// Performance Insights 的 JSON 輸出結構（12.6.0+）
{
  "categories": {
    "performance": {
      "score": 0.87,
      "insights": [
        {
          "title": " render-blocking resources",
          "description": "Network payloads are 1,240ms behind LCP.",
          "savings": 1240,
          "metric": "LCP"
        },
        {
          "title": "Unused JavaScript",
          "description": "53% of all JS is unused on page load.",
          "savings": 420,
          "metric": "INP"
        }
      ]
    }
  }
}

從 audit 清單變成診斷報告

過去 Lighthouse 的audit 清單：

❌ 圖片沒有 WebP 格式
❌ JavaScript bundle 太大（820KB）
❌ 沒有 preload LCP 圖片
❌ 字體載入阻塞渲染
⚠️ 總共 47 個 warnings

Performance Insights 的診斷報告：

🔴 主要問題：LCP 被阻塞 1,240ms
   原因：render-blocking JavaScript
   節省：1,240ms（如果優化）

🟡 次要問題：INP 被長任務影響
   原因：53% 的 JS 在初始載入時不需要執行
   節省：380ms（如果 code-splitting）

🟢 已通過：CLS 分數良好（0.04）

實務：如何用新工具測量 Core Web Vitals

工具對比

工具適合場景資料類型缺點
Google Search Console了解真實用戶體驗真實用戶數據（RUM），28天平均無法做本地 debug
PageSpeed Insights快速獲得優化建議實驗室數據 + 真實用戶數據建議有時不夠具體
Chrome DevTools本地深入分析實驗室數據不反映真實用戶網路/設備
web-vitals library在自己的程式碼裡測量真實用戶數據需要自己部署測量系統

用 web-vitals library 收集真實用戶數據

// 在你的網站加入 web-vitals measurement
import { onLCP, onINP, onCLS } from 'web-vitals';

function sendToAnalytics({ name, value, id }) {
  // 發送到你的 analytics 服務
  navigator.sendBeacon('/analytics', JSON.stringify({
    metric: name,
    value: Math.round(name === 'CLS' ? value * 1000 : value),
    id,
    url: window.location.href,
  }));
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

用 PageSpeed Insights 獲得優化建議

# 使用 PSI API（Google PageSpeed Insights）
curl "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://example.com&key=YOUR_API_KEY&category=performance"

2026 年效能優化的重點方向

1. INP 優化是現在的核心

INP 取代 FID 成為 Google 排名的直接因素。優化 INP 的重點：

// ❌ 造成長任務（Long Task）的寫法
function handleClick() {
  // 同步的大量計算
  const result = expensiveComputation();
  // 同步的 DOM 操作
  updateUI(result);
}

// ✅ 改善 INP 的寫法
async function handleClick() {
  // 使用 scheduler.yield() 讓出主線程
  await scheduler.yield();
  const result = await computeAsync();
  updateUI(result);
}

scheduler.yield() 是 Navigator Scheduler API 的一部分，允許長時間執行的任務讓出主線程，讓瀏覽器能夠處理其他緊迫的任務（如用戶輸入）。

2. AVIF 圖片格式即將廣泛可用

AVIF（AV1 Image File Format）是一個新興的圖片格式，壓縮率比 WebP 高 30-50%。根據研究，AVIF 將在 2026/07 成為「廣泛可用」狀態。

<!-- 用 picture 標籤提供 Progressive Enhancement -->
<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="描述" loading="lazy" />
</picture>

3. 減少 Render-Blocking Resources

<!-- ❌ render-blocking：阻塞渲染 -->
<link rel="stylesheet" href="styles.css" />
<script src="analytics.js"></script>

<!-- ✅ non-render-blocking -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
<script src="analytics.js" defer></script>

結語：效能測量正在變得更好

Lighthouse 的 Performance Insights 和 Core Web Vitals 的全面跨瀏覽器支援，代表的趨勢是：效能測量正在從「一堆數字」變成「可以直接採取行動的建議」。

對前端工程師來說，這是好事。你不需要變成效能專家，也能看懂 Lighthouse 告訴你的問題和建議。

對 SEO 從業人員來說，Core Web Vitals 全面跨瀏覽器支援，意味著你終於可以用同一套標準，去測量所有瀏覽器用戶的體驗。

2026 年的效能優化重點很清楚：先把 INP 做好，再把 LCP 做好，最後注意 CLS。工具已經準備好了，剩下的就是執行的問題。

延伸閱讀

本文是「2026 前端效能優化」系列文章之一。