Core Web Vitals 是 Google 於 2020 年推出的核心網頁指標系統，用來衡量用戶在瀏覽網頁時的實際體驗品質。這套指標包含三個主要的效能指數，分別是 LCP（最大內容繪製）、INP（互動到下一次繪製）及 CLS（累積版面配置偏移）。如果你對技術 SEO 嘅完整檢查項目有興趣，可以參考我哋嘅技術 SEO 檢查清單 2026。
自 2021 年 6 月起，Google 已將 Core Web Vitals 正式納入搜尋排名演算法，與內容品質、行動裝置適配性等因素一起影響網站的搜尋排名。換句話說，擁有良好的 Core Web Vitals 分數不只能改善用戶體驗，更能直接提升 SEO 成效。
根據 Google 的研究，頁面速度每延遲 1 秒，用戶跳出率就會增加 7%。投資於 Core Web Vitals 優化實際上是投資於轉化率。
這三大指標涵蓋了使用者感知的載入速度、互動反應性和視覺穩定性，是現代 SEO 策略中不可或缺的一部分。想對 SEO 有更全面嘅理解，可以閱讀2026 年 SEO 入門完整指南。
LCP（Largest Contentful Paint）深入拆解與優化
LCP 測量的是從用戶開始導覽頁面到最大內容元素在視口中渲染完成所需的時間。通常這個最大元素是一張圖片或是一大段文字內容。
什麼是「良好」的 LCP 分數？
- 良好（綠色）： 2.5 秒以內
- 需要改進（黃色）： 2.5 秒 - 4.0 秒
- 不佳（紅色）： 4.0 秒以上
LCP 優化的實戰策略
1. 優化伺服器回應時間
使用高效能的主機、CDN 分佈式內容，並實施快取策略能顯著降低首位元組時間（TTFB）。考慮遷移到更快速的伺服器或採用內容分發網路（CDN）來加速全球用戶的連線速度。
2. 減少阻擋呈現的資源
CSS 和 JavaScript 在下載和解析時會阻止頁面呈現。將非關鍵的 CSS 和 JavaScript 延後載入，或者使用 async 和 defer 屬性來允許頁面在資源下載期間繼續呈現。
3. 實施預加載策略
在 HTML 中使用 <link rel="preload"> 來預加載關鍵資源，例如自訂字型或最大內容繪製的關鍵圖片。這可以幫助瀏覽器優先加載重要資源。
4. 優化圖片和多媒體資源
使用適當的圖片格式、縮小檔案大小、實施延遲載入（lazy loading）能有效改善 LCP。圖片通常是頁面中最大的資源，優化圖片是改善 LCP 的最直接方法。
INP（Interaction to Next Paint）取代 FID 後的新標準
INP 是 Google 在 2023 年引入的新指標，用來取代已不再使用的 First Input Delay（FID）。它測量的是從用戶與頁面互動（如點擊按鈕、輸入文字）到瀏覽器繪製下一個視覺更新的時間。
INP 的評分標準
- 良好（綠色）： 200 毫秒以內
- 需要改進（黃色）： 200 毫秒 - 500 毫秒
- 不佳（紅色）： 500 毫秒以上
改善 INP 的優化技巧
1. 最小化 JavaScript 執行時間
冗長的 JavaScript 執行會阻塞主執行緒，導致用戶互動反應延遲。應該分解大型任務為更小的區塊，使用 requestIdleCallback() 延後非關鍵的工作，並考慮使用 Web Workers 來進行複雜計算。
2. 優化事件監聽器
避免在事件監聽器中執行複雜的計算。盡量讓事件回調保持簡潔，將重型工作延後執行。使用事件委託來減少監聽器的數量。
3. 使用 Render Throttling 和 Debouncing
對於頻繁觸發的事件（如滾動、視窗改變大小），使用節流和防抖技術來減少渲染和計算的次數。這能顯著改善交互的反應速度。
4. 減少 DOM 的複雜性
複雜的 DOM 結構會增加樣式計算和版面配置重新計算的時間。簡化 DOM 結構、避免深層嵌套，並優化 CSS 選擇器的複雜性。
CLS（Cumulative Layout Shift）常見問題與修復
CLS 衡量的是頁面上所有非預期版面配置偏移的累積分數。當用戶閱讀頁面時，突然的版面配置變化（如廣告突然出現、圖片延遲載入、字型交換）會導致用戶點擊錯誤的元素或閱讀體驗中斷。
CLS 的理想分數
- 良好（綠色）： 0.1 以內
- 需要改進（黃色）： 0.1 - 0.25
- 不佳（紅色）： 0.25 以上
CLS 常見問題及解決方案
常見問題 1：圖片和影片沒有設置尺寸
當圖片或影片資源延遲載入時，若未預留空間，瀏覽器無法知道該元素的最終大小，導致頁面版面重新排列。解決方法是為所有圖片和影片設置明確的寬度和高度屬性或使用 CSS 的 aspect-ratio 屬性。
常見問題 2：動態插入的內容
通知訊息、廣告或其他動態插入的內容會推動現有元素。應該預留空間或在頁面底部插入這些元素，避免影響用戶正在閱讀的內容。
常見問題 3：字型交換導致的版面偏移
當網頁自訂字型載入完成時，若字型的寬度與系統字型不同，會導致文字重新排列。使用 font-display: swap; 和預設字型堆疊可以減少這種偏移。
常見問題 4：廣告空間未預留
若廣告區域在廣告載入前未設定固定尺寸，廣告載入時會推動頁面內容。應該為廣告區域預留固定的容器，或延遲廣告的載入時機。
PageSpeed Insights vs Chrome UX Report vs Web Vitals Extension
PageSpeed Insights
Google 官方推出的免費工具，提供基於實驗室數據和真實用戶數據（來自 Chrome UX Report）的效能評分。優點是整合了多項指標和改善建議，缺點是有時建議可能過於通用，不夠針對性。
Chrome UX Report
基於真實用戶數據的報告，來自選擇分享使用資料的 Chrome 用戶。這是最準確的用戶體驗數據，但需要網站有足夠的流量才能獲得足夠的數據樣本。在 Google Search Console 中可直接查看。
Web Vitals Extension
Google 官方推出的瀏覽器擴展程式，可在瀏覽時即時顯示當前頁面的 Core Web Vitals 分數。適合開發人員在優化過程中進行測試和驗證，但數據基於單次訪問，不如 Chrome UX Report 代表性。
最佳做法是同時使用這三個工具：PageSpeed Insights 用於快速診斷，Chrome UX Report 用於評估實際用戶體驗，Web Vitals Extension 用於開發階段的測試。
圖片優化：WebP、延遲載入及 CDN
採用現代圖片格式
WebP 格式相比 JPEG 和 PNG 能提供 25-35% 的檔案大小減少，同時保持相同的視覺品質。使用 HTML 的 <picture> 標籤提供備用方案，確保舊瀏覽器的相容性。
實施延遲載入（Lazy Loading）
使用 HTML 的原生 loading="lazy" 屬性，或 JavaScript 方案如 Intersection Observer API，只在圖片即將進入視口時才載入。這能顯著改善初始頁面載入速度。
使用 CDN 分佈式內容
CDN 將圖片和靜態資源分佈在全球多個伺服器上，確保用戶從地理位置最近的伺服器取得內容。這能大幅降低載入時間，特別是對於全球用戶基礎的網站。
圖片壓縮與響應式設計
使用工具如 TinyPNG、ImageOptim 或 Squoosh 來壓縮圖片。同時使用 srcset 屬性為不同裝置提供不同尺寸的圖片，避免在小屏幕上載入過大的圖片。
JavaScript 效能優化
JavaScript 是影響頁面效能的主要原因。優化 JavaScript 能直接改善 LCP 和 INP 指標。
代碼分割（Code Splitting）
不需要在初始載入時加載所有 JavaScript。使用動態 import 或打包工具（如 Webpack）的代碼分割功能，只加載當前頁面所需的程式碼，其他代碼延後載入。
縮小和混淆（Minification）
移除 JavaScript 中的空白和不必要的程式碼，使用 Terser 或 UglifyJS 等工具進行縮小。這能減少檔案大小，加快下載和執行速度。
第三方指令碼管理
Google Analytics、Facebook Pixel、廣告指令碼等第三方指令碼會顯著影響效能。使用 async 或 defer 屬性載入，或考慮使用 Web Workers 隔離執行，避免阻塞主執行緒。
使用現代工具鏈
採用 Vite、esbuild 或其他現代打包工具，提供快速的構建和開發體驗。這些工具通常有更好的樹搖（tree shaking）和優化能力，能減少最終的程式碼大小。
字型載入策略：font-display: swap
自訂字型是現代網頁設計的重要部分，但它們通常會導致 CLS 問題和延緩初始文字呈現。
font-display 屬性的選項
- auto： 瀏覽器預設行為，通常會隱藏文字直到字型載入完成（阻塞期）
- swap： 立即顯示備用字型，字型載入完成後交換（推薦用於重要內容）
- fallback： 短期隱藏文字（約 100ms），然後顯示備用字型
- optional： 短期隱藏文字，若字型無法及時載入則永久使用備用字型
最佳做法
對於大多數情況，font-display: swap; 是最佳選擇。它確保用戶能夠立即看到內容，同時在自訂字型載入完成後提供視覺改進。這種方法在改善 CLS 和整體用戶體驗之間取得平衡。
使用 preload 預加載關鍵字型：
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>伺服器端優化：快取、CDN 及 HTTP/3
實施有效的快取策略
設定適當的 HTTP 快取標頭（Cache-Control、ETag）能大幅改善重複訪問的速度。靜態資源應該有較長的快取期限，動態內容應該根據更新頻率設定。
啟用 Gzip 或 Brotli 壓縮
文字檔案（HTML、CSS、JavaScript、JSON）能透過 Gzip 或 Brotli 壓縮減少 60-80% 的大小。大多數現代伺服器和 CDN 都支持這些壓縮方式。
使用 CDN 加速全球用戶
CDN（如 Cloudflare、AWS CloudFront、Akamai）將內容分佈在全球多個節點，確保用戶從最近的伺服器取得內容。這對全球受眾的網站至關重要。
遷移至 HTTP/3
HTTP/3 使用 QUIC 協議，相比 HTTP/2 提供更好的性能，特別是在高延遲或不穩定的網路環境下。許多現代 CDN 已支持 HTTP/3。隨住 AI 對 SEO 嘅影響愈嚟愈大，網站效能成為保住排名嘅基本盤。
實戰案例：從 40 分升到 95 分的完整優化
以一個電商網站為例，說明如何通過系統化的優化過程將 PageSpeed Insights 分數從 40 分提升至 95 分。
初始診斷（40 分）
- LCP：6.2 秒（未優化的主圖像）
- INP：450 毫秒（複雜的 JavaScript 事件處理）
- CLS：0.28（廣告和動態內容未預留空間）
第一階段：圖片優化（提升至 55 分）
措施：
- 將主圖像轉換為 WebP 格式，檔案大小從 850KB 減少至 280KB
- 實施響應式圖片，為不同設備提供適當大小
- 配置 CDN，從全球最近的節點提供內容
- 為產品圖像實施延遲載入
結果： LCP 改善至 4.1 秒，初始頁面載入時間減少 35%
第二階段：JavaScript 優化（提升至 75 分）
措施：
- 分析並移除未使用的 JavaScript
- 使用代碼分割延後載入購物車、追蹤等非關鍵功能
- 配置第三方指令碼（Google Analytics、Facebook Pixel）為 async
- 實施 requestIdleCallback() 延後搜尋建議的計算
結果： INP 改善至 240 毫秒，主 JavaScript 檔案大小減少 45%
第三階段：版面穩定性優化（達成 95 分）
措施：
- 為廣告位置預留固定容器，設定明確的高度
- 所有圖像設定寬度和高度屬性，或使用 aspect-ratio CSS
- 移至 font-display: swap 進行自訂字型
- 將通知訊息限制在頁面頂部，避免推動主要內容
- 對動態內容使用 transform 和 opacity 而非改變位置
結果： CLS 降至 0.08，版面偏移幾乎消除
最終成效
經過三個階段的優化：
- PageSpeed Insights 分數：40 → 95
- 首頁載入時間：8.5 秒 → 2.1 秒
- 用戶跳出率：下降 18%
- 平均訂單價值：增加 12%
- 搜尋排名（目標關鍵詞）：平均上升 5 個位置
這個案例證明了投資於 Core Web Vitals 優化的直接商業價值，不僅改善 SEO 排名，更重要的是增加用戶滿意度和轉化率。如果你想了解更多關於 SEO 投資回報嘅分析，可以參考香港 SEO 收費指南 2026。
優化總結
改善 Core Web Vitals 是一個持續的過程，需要在初始優化後定期監控和調整。建議：
- 每週檢查 Chrome UX Report 的數據
- 每月運行 PageSpeed Insights 完整分析
- 設定 Web Vitals 的監控警報，在分數下降時及時通知
- 在推出新功能或重大更新後進行效能測試