Core Web Vitals 是什麼？台灣品牌網站速度優化完整指南（2026）
重點摘要
- Core Web Vitals 是 Google 自 2021 年起納入搜尋排名的三個使用體驗指標：LCP（最大內容繪製，衡量載入速度）、CLS（累積版面位移，衡量視覺穩定性）、INP（互動到下一頁繪製，衡量互動反應）。注意：FID 已在 2024 年 3 月被 INP 正式取代（Google Search Central，2024）。
- Google 的行為研究顯示，頁面載入時間每延遲 0.1 秒，轉換率平均下降 7%（Google Research，2020）。速度不只是排名問題，更直接影響訂單與詢問。
- 根據 HTTP Archive（Web Almanac，2024），全球仍有超過 75% 的網站在至少一項 Core Web Vitals 指標上未達標。這是大多數品牌網站仍待改善的現實。
- 台灣品牌網站最常見的問題是：未壓縮的大型圖片（拖慢 LCP）、浮窗與廣告移位（造成 CLS）、過多第三方追蹤腳本（影響 INP）。
---
為什麼品牌主也要懂 Core Web Vitals
Core Web Vitals 聽起來像技術術語，但對台灣品牌主來說，它的實際影響很具體。
Google 於 2021 年 6 月正式將 Core Web Vitals 納入搜尋排名因素（Google Search Central，2021）。這代表：如果你的網站速度慢、元素亂跳、點了沒反應，不只用戶體驗差，搜尋排名也會受影響。
對服務業品牌（診所、餐廳、設計師、婚紗工坊）來說，這個影響路徑是： 搜尋排名下降 → 有機流量減少 → 詢問率降低
更直接的影響：Google 的研究指出，頁面載入時間每多 1 秒，行動裝置用戶的跳出率增加 32%（Google/SOASTA Research，2017）。你的潛在客戶可能等不到你的頁面載完就離開了。
如果你也在做 AEO（答案引擎優化）讓 AI 引用你的內容，網站速度與穩定性更是基礎——AI 爬蟲同樣偏好技術品質更好的頁面。關於 AEO 與 SEO 的差異，可以進一步了解。
---
三個核心指標：一次看懂
Core Web Vitals 目前由三個指標組成，每個指標都有明確的「良好」「需改進」「不及格」門檻。
LCP（最大內容繪製）：頁面開得快不快
LCP 衡量的是：從用戶開啟頁面到「最大的可見元素」完全顯示所需的時間。最大元素通常是 Hero 圖片、Banner 大圖、或主標題文字。
| 評分 | 門檻 |
|---|---|
| ✅ 良好 | ≤ 2.5 秒 |
| ⚠️ 需改進 | 2.5–4 秒 |
| ❌ 不及格 | > 4 秒 |
台灣品牌網站 LCP 最常見的問題：Hero 大圖沒有壓縮、用了 PNG 而非 WebP 格式、圖片沒有設定 loading 優先順序。
CLS（累積版面位移）：元素會不會亂跳
CLS 衡量的是：頁面載入過程中，元素意外移動的程度。你一定有過這種體驗——要點某個連結，頁面突然跳動，結果點到廣告或其他地方。這就是高 CLS 的症狀。
| 評分 | 門檻 |
|---|---|
| ✅ 良好 | ≤ 0.1 |
| ⚠️ 需改進 | 0.1–0.25 |
| ❌ 不及格 | > 0.25 |
Google 的用戶體驗研究顯示，CLS 超過 0.25 時，用戶的誤點率（意外點到非預期位置）增加約 3 倍（Google UX Research，2023）。台灣常見問題：浮窗 popup、Cookie 同意條、廣告動態插入都是高 CLS 的元兇。
INP（互動到下一頁繪製）：點了有沒有反應
INP 是 2024 年 3 月才正式生效的新指標，取代了原本的 FID（首次輸入延遲）。INP 衡量的是：用戶點擊按鈕、選單、表單後，頁面實際開始回應的速度。
| 評分 | 門檻 |
|---|---|
| ✅ 良好 | ≤ 200 毫秒 |
| ⚠️ 需改進 | 200–500 毫秒 |
| ❌ 不及格 | > 500 毫秒 |
INP 比 FID 更嚴格，因為它追蹤整個造訪過程的所有互動，不只是第一次點擊。網站上累積了太多 JavaScript（追蹤腳本、聊天機器人、第三方小工具）是 INP 高的主要原因（Google Search Central，2024）。
---
台灣品牌網站的 6 個常見 CWV 問題
台灣中小品牌網站在 Core Web Vitals 上的常見問題，與歐美網站有些不同，主要集中在這幾個地方：
1. Hero 圖片沒有優化：首頁大圖直接用原始 JPG 或 PNG，沒有壓縮、沒有轉 WebP 格式，是最普遍的 LCP 殺手。一張 5MB 的全頁 Banner 圖，在行動網路上可能需要 4–6 秒才能載完。
2. 主機沒有 CDN：台灣許多品牌網站仍用共享主機（無 CDN 加速），導致 TTFB（伺服器回應時間）偏高。伺服器回應慢，後面所有的載入都會被拖慢。
3. 浮窗與動態廣告：LINE 浮動按鈕、優惠 popup、訂閱提示——多個動態插入的元素讓 CLS 很容易失控，尤其在行動裝置上更明顯。
4. 第三方腳本堆疊：GA4、Meta Pixel、LINE Conversion API、Hotjar、Intercom、LINE Chat……每多一個第三方腳本，INP 就多一層負擔。許多台灣電商網站堆了 10 個以上的追蹤腳本。
5. 中文字體載入未優化：Google Fonts 的中文字體非常大（繁體中文字體集動輒 10MB 以上），如果整套下載而非按需子集化，會嚴重拖慢 LCP。
6. 圖片沒有設定寬高：HTML 中圖片沒有設定 width 和 height 屬性，瀏覽器不知道要預留空間，等圖片載完後版面就會跳動，直接造成 CLS。
---
6 個快速改善方法（不需要工程師也能做的）
這 6 個方法按照「速效程度」排序，前三個幾乎所有品牌主（或熟悉網頁的設計師）都能自己執行：
① 壓縮並轉換圖片格式（1–3 天，效果最大）
把網站上所有圖片轉成 WebP 格式、壓縮到合理大小（Hero 圖建議 300KB 以下）。免費工具：Squoosh.app（線上壓縮）。這一步通常能讓 LCP 改善 30–50%。
② 移除非必要浮窗
檢查首頁載入後 5 秒內出現的所有彈窗與浮動元素，問自己：「這個元素真的提升了轉換，還是只是添亂？」LINE 浮動按鈕應固定尺寸並避免在頁面載入時「插入」，改為靜態定位。
③ 審查第三方腳本
打開 Chrome DevTools → Performance 面板，看哪些腳本花了最多時間。如果某個追蹤腳本你 3 個月沒用到過數據，就直接移除。每移除一個腳本，INP 都能輕微改善。
④ 啟用快取與 CDN（需要主機商配合）
如果你的網站架在 Vercel、Cloudflare、或支援 CDN 的主機上，確認靜態資源（圖片、CSS、JS）都設了適當的快取時間。這能減少 TTFB，間接改善 LCP。
⑤ 為圖片設定寬高（請設計師處理）
所有 <img> 標籤都應該有 width 和 height 屬性，讓瀏覽器提前預留空間，避免版面在圖片載入後跳動。這是解決 CLS 最直接的方法之一。
⑥ 預設 Hero 圖不做 Lazy Loading
loading="lazy" 屬性讓圖片延遲到快顯示時才載入——這對「不在首屏」的圖片很好，但 Hero 大圖不應該加 Lazy Loading，否則 LCP 會直接變差。
---
怎麼測量你現在的 CWV 分數
測量 Core Web Vitals 有幾個工具，各有優缺點：
PageSpeed Insights（建議第一個用）：Google 官方提供，輸入網址即可看到 LCP、CLS、INP 的分數，還會列出具體的改善建議。免費，不需要帳號。
Google Search Console（長期追蹤必備）：如果你有設定 Google Search Console，「Core Web Vitals 報告」可以看到你的實際用戶數據（而不是模擬數據），這是最準確的參考來源。
Chrome DevTools Lighthouse：適合工程師深入分析，一般品牌主用 PageSpeed Insights 就夠了。
測量時要注意：PageSpeed Insights 有「實驗室數據」（模擬）和「實際數據」（真實用戶），兩者可能差很多。改善的目標應以「實際數據」為準，也就是 Search Console 上看到的數字。
如果你有在使用結構化資料（Schema Markup）來增強 AEO，技術品質（包括 CWV）同樣是影響 AI 是否引用你頁面的隱性因素——結構化資料的完整說明有更多這方面的解釋。
---
一個判斷的基準
壓縮並轉換 Hero 圖片，是台灣品牌網站改善 Core Web Vitals 最快、CP 值最高的單一動作。
台灣品牌網站 80% 以上的 LCP 問題都來自未優化的大圖。一張圖片從 5MB 壓縮到 200KB、轉成 WebP，LCP 從 5 秒降到 1.5 秒是完全有可能的。
更重要的是，這不需要工程師——拿到 WebP 壓縮後的圖，上傳到你的 CMS 或請設計師替換就完成了。
改善 Core Web Vitals 不是一次性任務，而是持續監測的習慣。建議每季查一次 Google Search Console 的 CWV 報告，確認分數沒有因為新加的功能或廣告而退步。