Google Core Web Vitals 是什麼？網站速度優化實戰，提升使用者體驗與排名

想像一下，您走進一家裝潢精美、菜單誘人的餐廳，但點餐後等了 40 分鐘主菜才上桌，服務生對您的呼喚反應遲鈍，而且剛想用餐，桌子還突然晃動了一下，飲料差點打翻。您還會想再來嗎？

您的網站也是如此。即使內容再有價值（菜色再美味），如果使用者在瀏覽過程中感到等待、遲鈍、不穩定，他們也會毫不猶豫地離開。

為了解決這個問題，並量化「使用者體驗」，Google Search Console 推出了 Core Web Vitals（網站核心指標）。這不僅僅是一組技術數據，更是 Google 用來衡量您網站是否「待客友善」的關鍵標準，並已正式成為影響 SEO 排名的重要因素之一。

本篇指南將深入淺出地為您解析 Core Web Vitals 的三大核心指標，解釋它們為何至關重要，並提供具體可行的優化建議，助您打造一個使用者與搜尋引擎都喜愛的網站。

為何 Core Web Vitals 對 SEO 與使用者體驗至關重要？

在探討技術細節前，我們必須先理解其背後的「為什麼」。

從使用者角度： Core Web Vitals 直接對應了使用者瀏覽網頁時最直觀的三種感受：
1. 載入速度感： 「這個頁面看起來要多久才能用？」 (對應 LCP)
2. 互動流暢度： 「我點擊按鈕或輸入內容時，網站有反應嗎？」 (對應 INP)
3. 視覺穩定性： 「頁面上的元素會不會在我閱讀或點擊時突然跳動？」 (對應 CLS)
  一個在這些指標上表現良好的網站，能給予使用者流暢、愉悅且無挫折感的體驗，從而增加他們停留、互動與轉換的意願。
從 SEO 角度： Google 的終極目標是提供使用者滿意的搜尋結果。因此，在 2021 年推出的「網頁體驗更新 (Page Experience Update)」中，Google 已明確將 Core Web Vitals 作為排名訊號之一。這意味著，在內容品質相當的情況下，擁有更佳使用者體驗（即更好 CWV 分數）的網站，將有機會獲得更高的搜尋排名。

深入解析：Core Web Vitals 三大核心指標

自 2024 年 3 月起，INP 已正式取代 FID，成為衡量互動性的新指標。

1. LCP (Largest Contentful Paint) – 最大內容繪製

它測量什麼？ 頁面載入速度感。具體來說，是從使用者請求網址開始，到可視範圍內「最大」的圖片或文字區塊被完整呈現在螢幕上所需的時間。
為何重要？ LCP 直接反映了使用者感知到的「主要內容」出現速度。一個快速的 LCP 能讓使用者迅速感覺到「這個網頁是有效的」，從而降低跳出率。
評分標準：
- 良好： ≤ 2.5 秒
- 需要改善： > 2.5 秒且 ≤ 4.0 秒
- 差： > 4.0 秒
常見元兇： 伺服器回應緩慢、未經優化的巨大圖片檔、阻塞渲染的 JavaScript 和 CSS。

2. INP (Interaction to Next Paint) – 互動至下一次繪製

它測量什麼？ 網站的互動流暢度與即時回應能力。它會觀察使用者在頁面上的所有互動（點擊、輕觸、鍵盤輸入），並測量從互動發生到螢幕上出現視覺回饋（例如，選單展開、商品加入購物車）所需的時間。INP 會取用整個頁面生命週期中，最長的那次互動延遲時間作為代表值（忽略極端離群值）。
為何重要？ INP 取代了只測量「首次」互動延遲的 FID (First Input Delay)，能更全面地反映整個使用過程中的流暢度。一個低的 INP 代表網站反應靈敏，使用者每次操作都能得到即時反饋。
評分標準：
- 良好： ≤ 200 毫秒
- 需要改善： > 200 毫秒且 ≤ 500 毫秒
- 差： > 500 毫秒
常見元兇： 主執行緒被過於繁重的 JavaScript 任務長時間佔用、複雜的 CSS 選擇器、過於龐大的 DOM 結構。

3. CLS (Cumulative Layout Shift) – 累計版面配置位移

它測量什麼？ 頁面的視覺穩定性。它計算在頁面載入過程中，所有非使用者預期的版面配置位移分數的總和。簡單來說，就是頁面上的元素（如圖片、廣告、按鈕）是否會在使用者觀看時意外地跳動。
為何重要？ 突如其來的版面位移會帶來極差的使用者體驗，使用者可能正要點擊一個按鈕，卻因為上方突然載入的廣告而點到別的地方。這極具干擾性且令人沮喪。
評分標準：
- 良好： ≤ 0.1
- 需要改善： > 0.1 且 ≤ 0.25
- 差： > 0.25
常見元兇： 沒有設定尺寸屬性（width/height）的圖片或影片、動態插入的廣告或 iframe、導致字體閃爍或變形的網頁字型 (Web Fonts)。

基礎優化實戰建議

了解了指標後，我們該如何動手改善？

優化 LCP 的建議：

優化圖片： 這是最立竿見影的方法。使用工具壓縮圖片大小、轉換為現代格式（如 WebP 或 AVIF），並根據使用者裝置提供不同尺寸的響應式圖片。
升級主機或使用 CDN： 確保您的伺服器能快速回應（縮短 TTFB – Time to First Byte）。使用內容分發網路 (CDN) 可以讓全球使用者從最近的節點載入資源。
延遲載入非關鍵 CSS/JS： 將非首屏渲染所必需的 CSS 和 JavaScript 設為延遲 (defer) 或非同步 (async) 載入，避免它們阻塞主要內容的繪製。

優化 INP 的建議：

審核並優化 JavaScript： 使用 Chrome 開發者工具的 Performance 面板，找出執行時間過長的 JS 任務。將這些長任務分解成多個小任務，讓瀏覽器有空檔回應使用者互動。
減少主執行緒工作： 對於非緊急的計算任務，可以考慮使用 Web Workers 在背景執行緒中處理，避免佔用主執行緒。
避免過於複雜的 DOM： 一個頁面中過多的元素會增加渲染和計算的複雜度，盡量保持 HTML 結構的簡潔。

優化 CLS 的建議：

為圖片和影片設定尺寸： 在 <img> 和 <video> 標籤中，務必加入 width 和 height 屬性。這樣瀏覽器在載入媒體前，就能預留出正確的空間。
為廣告和嵌入內容預留空間： 如果您有動態載入的廣告或 iframe，請使用 CSS 為其設定一個固定尺寸的容器（例如，min-height），防止它們載入後將下方內容推開。
管理網頁字型載入： 使用 font-display: swap; 屬性，讓瀏覽器先用系統字體顯示文字，待網頁字型下載完畢後再替換，避免因字體載入造成的空白或版面位移。

結論：將使用者體驗內化為開發文化

Core Web Vitals 不是一個可以「完成」後就置之不理的任務清單。它是一種思維模式的轉變，要求我們在網站開發的每一個環節，都將使用者的真實感受放在首位。

您可以透過 PageSpeed Insights 等工具進行單次檢測，但要獲得基於真實使用者數據的長期監控，Google Search Console 是您唯一且最權威的工具。它能為您展示網站整體的 CWV 表現趨勢，並指出哪些 URL 群組需要優先改善。

透過持續監控並優化這三大核心指標，您不僅是在討好 Google 的演算法，更是在打造一個真正尊重使用者時間、提升品牌信任度的優質網站。這份對體驗的堅持，最終將回報在您的使用者滿意度和搜尋排名之上。

深入了解：想精通這個必備的官方診斷工具嗎？請閱讀我們的《如何使用 Google Search Console？技術 SEO 必備的免費診斷工具》。