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）。這代表：如果你的網站速度慢、元素亂跳、點了沒反應，不只用戶體驗差，搜尋排名也會受影響。
「Core Web Vitals 是衡量真實使用者在頁面上的體驗的關鍵指標，包含載入速度、互動反應與視覺穩定性，是 Google 搜尋排名訊號之一。」——Google Search Central 官方文件指出（2023）
對服務業品牌（診所、餐廳、設計師、婚紗工坊）來說，這個影響路徑是： 搜尋排名下降 → 有機流量減少 → 詢問率降低
更直接的影響：Deloitte 的行動速度研究（2020）發現，電商網站每提升 0.1 秒載入速度，轉換率平均提升 8.4%、每次工作階段消費增加 9.2%（Deloitte Insights，2020）。這個邏輯對台灣服務業品牌同樣成立——速度差的頁面，詢問表單填到一半就跳掉的機率更高。
如果你同時有在跑 Google Ads 或 Meta 廣告，Landing Page 的 CWV 分數更直接影響廣告品質分數（Quality Score）——速度差的頁面不只有機排名差，廣告費也更貴。關於 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）。
---
台灣品牌網站為什麼 CWV 特別難過關？
台灣中小品牌網站在 Core Web Vitals 上的挑戰，有幾個歐美市場少見的結構性原因：
LINE 生態系依賴：台灣品牌高度仰賴 LINE——LINE 浮動按鈕、LINE LIFF 預約表單、LINE 官方帳號嵌入——每個都是額外的第三方 JavaScript。單一 LINE 相關腳本就可能讓 INP 增加 50–200 毫秒。
共享主機文化：台灣中小品牌對主機成本敏感，大量使用月費數百元的共享主機，TTFB 動輒超過 500 毫秒（遠超 Google 建議的 200 毫秒以下），LCP 起跑就落後。
繁體中文字體體積問題：簡體中文有多年字體子集化工具積累，繁體中文的工具支援相對少，許多設計師習慣整包載入 Google Fonts 繁體中文字體，動輒 10MB 以上，是台灣網站 LCP 的隱性殺手。
WordPress 繁中主題遺產：台灣有大量網站建置在「功能全包」的中文 WordPress 主題上，這類主題預設載入 20–30 個外掛的 JavaScript，即使那些功能根本沒用到。
常見問題仍集中在以下幾個地方：
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。
各產業的高頻問題
不同產業的網站在 CWV 的痛點略有不同，有助對症下藥：
| 產業 | 最常見問題 | 主要指標 |
|---|---|---|
| 診所／醫美 | 預約表單第三方嵌入（Calendly、LINE 表單）拖慢 INP | INP |
| 攝影師／設計工作室 | Portfolio Gallery 大量原始檔圖片，雙重打擊 LCP 與 CLS | LCP + CLS |
| 餐廳 | 菜單 PDF 嵌入或 Facebook 貼文嵌入，跨域腳本影響 INP | INP |
| 婚紗工坊 | 高解析禮服展示圖未壓縮，LCP 輕易破 4 秒 | LCP |
| 電商 | 追蹤腳本堆疊（10 個以上），加上動態商品圖 CLS | INP + CLS |
如需了解台灣中小企業官網最常在三個指標上失分的具體成因與修復方向，可以延伸閱讀Core Web Vitals 實戰：台灣中小企業官網速度最容易掉分的 5 個地方。
---
怎麼快速改善 CWV？6 個方法從不需工程師到需要工程師
6 個改善方法依「速效程度」排序，前三個幾乎所有品牌主（或熟悉網頁的設計師）都能自己執行：
改善路徑速查表
| 方法 | 所需工時 | 負責角色 | 主攻指標 | 優先度 |
|---|---|---|---|---|
| 壓縮圖片、轉 WebP | 半天 | 品牌主或設計師 | LCP | ⭐ 最高 |
| 移除非必要浮窗 | 2–4 小時 | 品牌主 | CLS | ⭐ 最高 |
| 刪除閒置追蹤腳本 | 1 小時 | 品牌主 | INP | ⭐ 高 |
| 啟用 CDN 快取 | 半天（需主機商） | 開發者 | LCP | ★ 中 |
| 為圖片設定寬高 | 2–8 小時（依頁數） | 設計師或工程師 | CLS | ★ 中 |
| 調整 Hero 圖 Lazy Loading | 30 分鐘 | 工程師 | LCP | ★ 中 |
① 壓縮並轉換圖片格式（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 是否引用你頁面的隱性因素——結構化資料的完整說明有更多這方面的解釋。
---
常見問題
Q：CWV 分數要達到多少才算「夠用」？
A：Google 的「良好」門檻（LCP ≤ 2.5 秒、CLS ≤ 0.1、INP ≤ 200 毫秒）是最低基準。對品牌主來說，更務實的目標是「讓你的競業對手先修好之前，你已經比他們快」——CWV 是相對競爭優勢，不是絕對完美主義。
Q：PageSpeed Insights 分數低，一定要修到滿分嗎？
A：不一定。PageSpeed Insights 的「實驗室數據」（Lighthouse 模擬）和「實際數據」（Chrome UX Report，CrUX）可能差很多。優先修的是 Search Console 裡標為「不及格」的 URL，那些是真實用戶反映的問題。
Q：台灣品牌網站的 CWV 現況如何？
A：根據 Chrome UX Report 的公開數據，行動裝置上的 LCP 未達標比例遠高於桌機，台灣中小品牌網站使用共享主機、未啟用 CDN 的情形仍普遍，使得 TTFB 偏高。若你的網站架在無 CDN 的共享主機，光是搬到 Vercel 或 Cloudflare Pages 就能讓 LCP 改善 30–50%（來源：Web Almanac 2024 基礎設施分析）。
Q：新增第三方腳本（如 LINE Chat、Hotjar）一定會影響 CWV 嗎？
A：幾乎必然。第三方腳本的影響程度取決於「載入時機」——把非必要腳本改為 async 或延遲到頁面互動後再載入，可有效降低對 INP 的衝擊。如果腳本來自 Google、Facebook 這類有 CDN 加速的域，影響相對較小；若來自陌生第三方，則風險更高。
Q：改善 CWV 需要工程師嗎？
A：前三個動作（圖片壓縮、移除浮窗、審查腳本）品牌主或設計師就能做。第四步（CDN、快取）需要主機商配合或更換主機。第五、六步（設定圖片寬高、調整 Lazy Loading）則需要具備網頁基礎的設計師或工程師。
---
判斷的基準：60 分夠嗎？
壓縮並轉換 Hero 圖片，是台灣品牌網站改善 Core Web Vitals 最快、CP 值最高的單一動作。
職人選擇工具的邏輯是：先確認問題在哪，再精準修。一張圖片從 5MB 壓縮到 200KB、轉成 WebP，LCP 從 5 秒降到 1.5 秒是完全有可能的結果——但前提是你先用 PageSpeed Insights 確認「那張圖真的是 LCP 元素」，而不是亂槍打鳥什麼都改。
對台灣中小服務業品牌，更務實的問題不是「能不能做到 100 分」，而是「在你的同業競爭中，你是不是最快的那個」。CWV 是相對優勢——PageSpeed Insights 60 分的診所官網，若在同區診所裡已是最快，搜尋排名效益就已足夠。追求 100 分是好事，但花在前 3 個改善動作的時間，比追求最後 20 分的邊際效益高得多。
真正的持續優化習慣是：每次上線新功能或廣告腳本前，先在暫存環境跑一次 Lighthouse，確認沒有因新增元素讓 CWV 退步。等到 Search Console 報告紅燈亮了才修，流量損失早已發生。