為什麼你的網站這麼慢？Core Web Vitals 優化完全指南

2021 年，Google 正式將 Core Web Vitals 納入搜尋排名因素。這意味著：網站速度不只影響使用者體驗，還直接影響你的 SEO。

這篇文章會帶你理解 Core Web Vitals 的三個核心指標，以及如何優化它們。

Core Web Vitals 是什麼？

Core Web Vitals 是 Google 定義的三個關鍵使用者體驗指標：

1. LCP（Largest Contentful Paint）最大內容繪製

測量什麼：頁面主要內容載入完成的時間

目標：2.5 秒以內

LCP 衡量的是使用者「感覺」頁面載入完成的時間。通常是頁面上最大的圖片或文字區塊完成渲染的時間。

2. FID（First Input Delay）首次輸入延遲

測量什麼：使用者第一次互動到瀏覽器回應的時間

目標：100 毫秒以內

當使用者點擊按鈕或連結，如果 JavaScript 還在執行，瀏覽器會來不及回應。這個「卡頓」就是 FID。

注意：2024 年 3 月起，FID 將被 INP（Interaction to Next Paint）取代，標準更嚴格。

3. CLS（Cumulative Layout Shift）累積布局偏移

測量什麼：頁面載入過程中，元素意外移動的程度

目標：0.1 以內

你一定遇過這種情況：正要點一個按鈕，突然一張廣告載入，按鈕往下跳，你點到了別的東西。這就是 CLS 要解決的問題。

如何檢測你的 Core Web Vitals

工具推薦

• PageSpeed Insights：Google 官方工具，最直接
• Lighthouse：Chrome DevTools 內建
• Web Vitals Extension：Chrome 擴充，即時顯示指標
• Search Console：查看整個網站的 CWV 報告

實驗室數據 vs 實際數據

有兩種數據來源：

• Lab Data：在標準化環境測試（Lighthouse）
• Field Data：真實用戶的數據（Chrome UX Report）

Google 排名看的是 Field Data，但優化時兩種都要參考。

LCP 優化策略

1. 優化圖片

圖片通常是 LCP 的元兇。

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

<!-- ✅ 正確 -->
<img 
  src="hero.webp" 
  srcset="hero-400.webp 400w, hero-800.webp 800w"
  sizes="100vw"
  loading="eager"
  fetchpriority="high"
  width="1200" 
  height="600"
  alt="Hero image"
>

重點：

• 使用 WebP/AVIF 格式
• 提供響應式圖片（srcset）
• 對 LCP 圖片使用 fetchpriority="high"
• 明確指定 width/height 避免 CLS

2. 預載入關鍵資源

<link rel="preload" href="hero.webp" as="image">
<link rel="preload" href="font.woff2" as="font" crossorigin>

3. 優化伺服器回應時間（TTFB）

• 使用 CDN
• 啟用 HTTP/2 或 HTTP/3
• 優化資料庫查詢
• 使用快取

4. 避免渲染阻塞

<!-- ❌ 阻塞渲染 -->
<script src="app.js"></script>

<!-- ✅ 非阻塞 -->
<script src="app.js" defer></script>

FID/INP 優化策略

1. 減少 JavaScript 執行時間

• 移除未使用的 JavaScript
• 延遲載入非關鍵 JS
• 避免長時間執行的任務（Long Tasks）

2. 拆分長任務

// ❌ 長任務
function processData(data) {
  for (let i = 0; i < 100000; i++) {
    // 處理資料
  }
}

// ✅ 拆分成小任務
async function processData(data) {
  for (let i = 0; i < 100000; i++) {
    // 處理資料
    if (i % 1000 === 0) {
      await new Promise(r => setTimeout(r, 0));
    }
  }
}

3. 使用 Web Workers

把繁重的計算移到背景執行緒，不阻塞主執行緒。

4. 優化第三方腳本

Google Analytics、廣告、聊天插件...這些第三方腳本常常是效能殺手。

• 延遲載入
• 使用 Partytown 在 Web Worker 中執行
• 評估是否真的需要

CLS 優化策略

1. 為圖片和影片指定尺寸

<!-- ❌ 會導致 CLS -->
<img src="photo.jpg">

<!-- ✅ 預留空間 -->
<img src="photo.jpg" width="800" height="600">

2. 為廣告預留空間

.ad-container {
  min-height: 250px;
}

3. 避免在現有內容上方插入內容

最常見的錯誤：在頁面頂部動態插入 banner。

4. 使用 CSS transform 做動畫

/* ❌ 會觸發布局 */
.element {
  animation: move 1s;
}
@keyframes move {
  to { top: 100px; }
}

/* ✅ 不會觸發布局 */
.element {
  animation: move 1s;
}
@keyframes move {
  to { transform: translateY(100px); }
}

5. 字型載入優化

/* 避免 FOIT/FOUT */
@font-face {
  font-family: "MyFont";
  src: url("font.woff2") format("woff2");
  font-display: swap;
}

快速優化清單

實際案例

一個電商網站的優化前後對比：

主要做了什麼：

1. 圖片轉 WebP，節省 60% 檔案大小
2. 使用 CDN 加速靜態資源
3. 延遲載入非關鍵 JavaScript
4. 為所有圖片加上尺寸屬性
5. 移除一個效能很差的第三方聊天插件

結果：搜尋排名上升，跳出率下降 25%，轉換率提升 15%。

結語

Core Web Vitals 不只是 SEO 指標，它代表了真實的使用者體驗。

優化的順序建議：

1. 先修 CLS（通常最容易修）
2. 再處理 LCP（影響最大）
3. 最後優化 FID/INP（最複雜）

記住：效能優化是持續的過程，不是一次性的任務。每次新增功能，都要注意對 Core Web Vitals 的影響。

你的網站速度，決定了使用者是留下還是離開。現在就開始優化吧。