Core Web Vitals：衡量與改善網頁效能

您已經建置了現代化的網頁應用程式，但使用者抱怨它感覺很慢。搜尋排名正在下滑，跳出率也在攀升。罪魁禍首可能是糟糕的 Core Web Vitals——Google 用來衡量真實使用者體驗的指標。在本指南中，您將了解它們是什麼、如何準確衡量它們，以及改善每一項的實際步驟。

什麼是 Core Web Vitals？

Core Web Vitals 是三項指標，用於量化使用者體驗的關鍵面向：

• 最大內容繪製 (LCP)：最大的內容元素（圖片或文字區塊）變為可見所需的時間。良好：≤ 2.5 秒。
• 互動至下次繪製 (INP)：衡量回應性——從使用者互動（點擊、輕觸、按鍵）到下一次視覺更新之間的時間。良好：≤ 200 毫秒。
• 累積版面位移 (CLS)：量化意外的版面位移。良好：≤ 0.1。

這些指標是 Google 頁面體驗信號的一部分，直接影響 SEO 和使用者滿意度。

如何衡量 Core Web Vitals

您需要實驗室數據和現場數據。實驗室數據有助於除錯；現場數據反映真實使用者。

實驗室工具

• Chrome DevTools 中的 Lighthouse：執行稽核以取得 LCP、CLS 和 TBT（INP 的代理指標）。
• WebPageTest：進階測試，提供膠片檢視和瀑布圖。
• PageSpeed Insights：結合實驗室和現場數據。

現場工具

• Chrome UX Report (CrUX)：真實使用者指標的公開資料集。
• web-vitals 程式庫：將指標傳送到您的分析工具。

範例：使用 web-vitals 程式庫記錄指標：

import {onLCP, onINP, onCLS} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  navigator.sendBeacon('/analytics', body);
}

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

改善 LCP

LCP 通常是最具影響力的待修復指標。常見原因：伺服器回應緩慢、阻礙轉譯的資源，以及未經優化的圖片。

1. 優化圖片：壓縮、使用現代格式（WebP/AVIF），並設定尺寸。如需快速壓縮，請試用我們的 圖片壓縮工具。
2. 預載關鍵資源：對主視覺圖片和字型使用 <link rel="preload">。
3. 減少伺服器回應時間：使用快取、CDN，並優化後端查詢。
4. 消除阻礙轉譯的資源：內嵌關鍵 CSS，延遲非關鍵 JS。

範例：預載 LCP 圖片：

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

改善 INP

INP 衡量回應性。長任務會阻塞主執行緒並延遲視覺回饋。

1. 拆分長任務：使用 setTimeout 或 scheduler.yield 讓出主執行緒。
2. 優化事件處理常式：適當使用防抖和節流；避免繁重的同步工作。
3. 減少 JavaScript：程式碼分割、樹搖，並延遲非關鍵腳本。
4. 使用 Web Worker 處理 CPU 密集型任務。

範例：使用 scheduler.yield 讓出（在支援的環境中）：

async function handleClick() {
  // Do some work
  await scheduler.yield();
  // Continue after yielding
}

改善 CLS

CLS 關乎視覺穩定性。當元素意外改變位置時，就會發生版面位移。

1. 在圖片和影片上設定尺寸屬性（寬度/高度）。
2. 為廣告和嵌入內容預留空間：使用 CSS aspect-ratio 或固定尺寸。
3. 避免在現有內容上方插入內容，除非是由使用者互動觸發。
4. 使用 transform 動畫，而非會觸發版面的屬性。

範例：使用 aspect-ratio 預留空間：

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Core Web Vitals 比較

工具與工作流程

將效能監控整合到您的 CI/CD 流程中。使用 Lighthouse CI 來捕捉回歸。對於現場數據，使用 web-vitals 和您的分析工具設定儀表板。

優化圖片時，您可以在上傳到網站之前，使用我們的 圖片壓縮工具 快速壓縮它們。

常見問題

什麼是 Core Web Vitals？

Core Web Vitals 是三項指標——LCP、INP 和 CLS——Google 用來衡量網頁上的使用者體驗。

我應該多久衡量一次 Core Web Vitals？

在現場透過分析工具持續衡量，並在每次部署時在實驗室中使用 Lighthouse CI 捕捉回歸。

我可以在不重新設計網站的情況下改善 Core Web Vitals 嗎？

可以。許多改善措施，例如圖片優化、預載和設定尺寸，都可以逐步完成，無需全面重新設計。

首先使用 Lighthouse 衡量您目前的分数，然後處理影響最大的指標。小而持續的優化會為使用者體驗和 SEO 帶來顯著提升。