Core Web Vitals 是什麼？2025年網站優化的3大核心指標與10+實戰技巧

為什麼 Core Web Vitals 是您網站的成敗關鍵？

在 2025 年，網站速度不再只是加分項，而是決定您在 Google 搜尋結果中排名的核心要素。Google 推出的 Core Web Vitals (網站核心指標) 是一組明確的指標，用於衡量真實世界中的使用者體驗。一個在這些指標上表現不佳的網站，不僅會流失訪客，更會在 SEO 競賽中被對手超越。

Core Web Vitals 的重要性

SEO 排名影響：

• Google 已將 Core Web Vitals 納入搜尋排名因素
• 表現良好的網站在 SERP 中獲得優先展示
• 行動端搜尋排名受影響更明顯

商業價值影響：

• 載入速度每慢 1 秒，轉換率下降 7%
• 53% 的使用者會離開載入超過 3 秒的網站
• 良好的 Core Web Vitals 可提升 24% 的轉換率

拆解三大核心指標：LCP, INP, CLS

Core Web Vitals 由三個主要指標組成，分別衡量載入速度、互動性和視覺穩定性。每個指標都有明確的評分標準和優化重點。

專業效能檢測工具完整指南

準確的檢測是優化的第一步。以下工具各有專長，建議搭配使用以獲得最全面的效能分析。

LCP 優化：高優先級策略

最大內容繪製 (LCP) 直接影響使用者對網站速度的第一印象。以下是影響最大的優化策略：

1. 圖片優化 - 效果最顯著

• 現代格式：使用 WebP、AVIF 格式，可減少 25-50% 檔案大小
• 響應式圖片：使用 srcset 屬性為不同螢幕提供合適尺寸
• 壓縮工具：TinyPNG、ImageOptim、Squoosh 等
• 延遲載入：非關鍵圖片使用 loading="lazy" 屬性

<!-- 優化前 -->
<img src="hero.jpg" alt="Hero image">

<!-- 優化後 -->
<img src="hero.webp"
     srcset="hero-320.webp 320w, hero-640.webp 640w, hero-1024.webp 1024w"
     sizes="(max-width: 320px) 280px, (max-width: 640px) 600px, 1024px"
     alt="Hero image"
     loading="eager">

2. 伺服器優化 - 基礎建設

• 升級主機：選擇 SSD 硬碟、充足記憶體的主機
• CDN 部署：Cloudflare、AWS CloudFront、Azure CDN
• 快取策略：設定 Browser Cache、Server Cache
• Gzip 壓縮：啟用文字資源壓縮

LCP 優化：中低優先級策略

CSS 優化

• 關鍵 CSS 內聯：將首屏 CSS 直接嵌入 HTML
• 移除未使用的 CSS：使用 PurgeCSS、UnCSS 工具
• CSS 壓縮：移除空格、註釋、簡化選擇器

字型優化

• 字型預載：<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
• 字型顯示策略：font-display: swap 避免 FOIT
• 減少字型數量：限制字重和樣式種類

JavaScript 優化

• 代碼分割：按路由分割 JavaScript 包
• Tree Shaking：移除未使用的代碼
• 壓縮混淆：使用 Terser、UglifyJS

INP 優化：JavaScript 效能優化

互動至下一次繪製 (INP) 反映網站的回應性。優化重點在於減少 JavaScript 執行時間和提升渲染效率。

1. 長任務分割

• 時間分片：將超過 50ms 的任務分割成小片段
• 使用 setTimeout：讓瀏覽器有機會處理其他任務
• Web Workers：將計算密集型任務移到背景執行

// 優化前 - 長任務阻塞主線程
function processLargeArray(items) {
  items.forEach(item => {
    // 複雜處理...
  });
}

// 優化後 - 時間分片
function processLargeArrayAsync(items, callback) {
  let index = 0;
  const batchSize = 100;

  function processBatch() {
    const endIndex = Math.min(index + batchSize, items.length);

    for (let i = index; i < endIndex; i++) {
      // 處理 items[i]
    }

    index = endIndex;

    if (index < items.length) {
      setTimeout(processBatch, 0); // 讓出控制權
    } else {
      callback(); // 完成
    }
  }

  processBatch();
}

INP 優化：腳本管理與事件處理

第三方腳本管理

• 延遲載入：非關鍵腳本使用 async 或 defer
• 腳本優先級：Critical > Important > Nice-to-have
• 效能監控：定期檢查第三方腳本的影響

事件處理優化

• 事件委託：減少事件監聽器數量
• 防抖節流：控制高頻事件的執行頻率
• 被動監聽：使用 passive: true 選項

// 優化前 - 每個按鈕都有監聽器
document.querySelectorAll('.btn').forEach(btn => {
  btn.addEventListener('click', handleClick);
});

// 優化後 - 事件委託
document.addEventListener('click', (e) => {
  if (e.target.matches('.btn')) {
    handleClick(e);
  }
});

CLS 優化：基礎版面穩定策略

累計版面配置位移 (CLS) 影響使用者操作的準確性。優化重點在於為所有內容預留適當的空間。

圖片尺寸設定

<!-- 優化前 - 無尺寸設定 -->
<img src="image.jpg" alt="Sample">

<!-- 優化後 - 明確尺寸 -->
<img src="image.jpg"
     width="640"
     height="360"
     alt="Sample"
     style="aspect-ratio: 16/9;">

廣告空間預留

/* 為廣告預留固定空間 */
.ad-container {
  width: 100%;
  height: 250px; /* 固定高度 */
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ad-container::before {
  content: "廣告載入中...";
  color: #999;
}

CLS 優化：字型與動畫處理

字型載入優化

/* 字型顯示策略 */
@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: swap; /* 避免 FOIT */
}

/* 字型尺寸匹配 */
body {
  font-family: 'CustomFont', Arial, sans-serif;
  /* 確保後備字型尺寸相近 */
}

動態內容處理

• 最小高度設定：為動態載入的內容設定 min-height
• 骨架畫面：使用 Skeleton Loading 保持版面結構
• 漸進式載入：分階段載入內容，避免突然出現

CSS 動畫優化

/* 避免影響版面的屬性 */
.element {
  /* ❌ 會觸發 Layout */
  transition: width 0.3s, height 0.3s;

  /* ✅ 只觸發 Composite */
  transition: transform 0.3s, opacity 0.3s;
}

/* 使用 transform 代替改變 position */
.slide-in {
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.slide-in.active {
  transform: translateX(0);
}

部落格與內容網站優化策略

每種網站類型都有特定的效能挑戰，以下針對常見網站類型提供量身定制的優化建議。

部落格/內容網站 - 重點：LCP 優化

主要挑戰

• 大量圖片影響載入速度
• 廣告插件拖慢效能
• 第三方嵌入內容多

最佳實踐

• 圖片策略：啟用延遲載入，使用 WebP 格式
• 內容分頁：長文章分頁載入
• 廣告優化：預留廣告空間，使用異步載入
• 推薦工具：WP Rocket、Smush Pro、Cloudflare

電商與企業網站優化策略

電商網站 - 重點：INP 優化

主要挑戰

• 產品篩選功能複雜
• 購物車即時更新
• 大量產品圖片

最佳實踐

• 篩選優化：使用防抖技術，避免頻繁請求
• 圖片載入：產品列表使用縮圖，詳情頁漸進載入
• 購物車：本地儲存 + 異步同步
• 推薦工具：Redis 快取、ImageKit、AWS CloudFront

企業官網 - 重點：CLS 優化

主要挑戰

• 複雜版面設計
• 多媒體內容豐富
• 表單互動頻繁

最佳實踐

• 版面設計：固定元素尺寸，避免動態載入影響版面
• 表單優化：即時驗證使用節流，避免版面跳動
• 多媒體：影片使用海報圖，預設播放控制
• 推薦工具：Gatsby、Next.js、Vercel

單頁應用優化策略

SPA 單頁應用 - 重點：全面優化

主要挑戰

• JavaScript 包體積大
• 客戶端渲染延遲
• 路由切換卡頓

最佳實踐

• 代碼分割：按路由分割，動態載入
• SSR/SSG：關鍵頁面使用伺服器端渲染
• 預載策略：預載下一頁面資源
• 推薦工具：Webpack Bundle Analyzer、Lighthouse CI

基準測試與分析階段

建立系統性的優化流程，確保持續改善網站效能表現。

建立基準數據

# 使用 Lighthouse CI 自動化測試
npm install -g @lhci/cli
lhci autorun --upload.target=temporary-public-storage

識別問題頁面

• 使用 Google Search Console 找出表現不佳的頁面
• 分析用戶旅程中的關鍵頁面
• 優先處理高流量頁面

競爭對手分析

• 比較同業網站的 Core Web Vitals 表現
• 學習最佳實踐案例
• 設定合理的改善目標

技術實施階段

伺服器端優化

# .htaccess 設定範例
# 啟用 Gzip 壓縮
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>

# 設定快取期限
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType application/pdf "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
    ExpiresByType application/x-javascript "access plus 1 month"
    ExpiresByType application/x-shockwave-flash "access plus 1 month"
    ExpiresByType image/x-icon "access plus 1 year"
</IfModule>

前端優化

// webpack.config.js 優化範例
module.exports = {
  // 代碼分割
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },

  // 壓縮設定
  plugins: [
    new TerserPlugin({
      terserOptions: {
        compress: {
          drop_console: true,
        },
      },
    }),
  ],
};

監控與持續改善階段

建立監控儀表板

• 設定 Google Analytics 4 的 Core Web Vitals 事件
• 使用 PageSpeed Insights API 定期檢測
• 建立警報機制，當指標惡化時立即通知

A/B 測試驗證

• 測試不同優化策略的效果
• 量化改善對業務指標的影響
• 逐步推出到全站

定期檢討與優化

• 每月檢討 Core Web Vitals 表現
• 分析新增功能對效能的影響
• 保持技術棧的更新

立即可執行的行動指南

今天就開始（0-1 天）

1. 測試現況：使用 PageSpeed Insights 檢測主要頁面
2. 圖片優化：將最大的圖片轉換為 WebP 格式
3. 啟用快取：在伺服器設定基本的瀏覽器快取

本週完成（1-7 天）

4. 移除無用資源：清理未使用的 CSS、JavaScript
5. 字型優化：設定字型預載和 font-display: swap

階段性成果期望

初級優化（第 1-2 週）

• LCP 改善 20-30%
• 圖片載入速度提升
• 基礎 SEO 分數改善

中級優化（第 3-4 週）

• INP 優化，互動回應更流暢
• CLS 減少，版面更穩定
• 整體用戶體驗顯著提升

高級優化（第 5-8 週）

• 達到 Core Web Vitals 「優秀」標準
• SEO 排名開始改善
• 轉換率提升 10-15%

成功案例與延伸閱讀

成功案例期望

優化 Core Web Vitals 不僅是技術指標的改善，更是整體業務成果的提升：

具體效益

• SEO 效果：在相關關鍵字搜尋中排名上升
• 用戶體驗：跳出率降低，頁面停留時間增加
• 商業價值：轉換率提升，客戶滿意度改善
• 技術債務：程式碼品質提升，維護成本降低

延伸閱讀

• 前端效能優化指南 - 深入了解前端效能優化技巧
• 網頁設計入門指南 - 建立高效能的網站架構
• VSCode 擴充功能推薦 - 提升開發效率的必備工具

現在就開始優化您的 Core Web Vitals，讓網站在 2025 年 SEO 競賽中脫穎而出！