MO STORIES
網站核心體驗指標 (Core Web Vitals) 2025 指南：LCP, INP, CLS 優化全攻略
先說結論 速度不只是為了 SEO，更是為了留住使用者。 2025 年 Google Core Web Vitals (CWV) 的三大支柱： LCP (載入速度) — 看到最大內容及其速度 (< 2.5 秒) INP (互動反應) — 點擊後多久有反應 (< 200 毫秒) [2024 新指標] CLS (視覺穩定) ...
先說結論
速度不只是為了 SEO，更是為了留住使用者。
2025 年 Google Core Web Vitals (CWV) 的三大支柱：
- LCP (載入速度) — 看到最大內容及其速度 (< 2.5 秒)
- INP (互動反應) — 點擊後多久有反應 (< 200 毫秒) [2024 新指標]
- CLS (視覺穩定) — 畫面是否會亂跳 (< 0.1)
網站每慢 1 秒，轉換率平均下降 7%。優化 CWV 是 ROI 最高的技術投資之一。
** LCP (Largest Contentful Paint) 最大內容繪製**
這是什麼？
計算使用者打開網頁後，看到「最大區塊內容」（通常是首圖或大標題）所需的時間。
標準
- 🟢 良好：< 2.5 秒
- 🟡 需要改善：2.5 – 4.0 秒
- 🔴 不佳：> 4.0 秒
優化策略
- 升級主機：這是最快見效的方法。從共享主機升級到 Cloudways/VPS，TTFB (Time to First Byte) 瞬間縮短。
- 圖檔優化：
- 使用 WebP / AVIF 格式 (比 JPEG 小 30-50%)。
- 針對手機提供適當尺寸 (
srcset)。
- 預先載入 (Preload)：在
<head>加上：
<link rel="preload" as="image" href="banner.webp">
- 使用 CDN：讓全球使用者都能從最近的節點下載圖片。
INP (Interaction to Next Paint) 互動至下次繪製
這是什麼？
取代了舊的 FID 指標。它測量使用者「每一次互動」（點擊、打字、按鍵）到瀏覽器顯示「視覺回饋」的延遲時間。
簡單來說：我點了按鈕，網站卡了多久才動？
標準
- 🟢 良好：< 200 毫秒
- 🟡 需要改善：200 – 500 毫秒
- 🔴 不佳：> 500 毫秒
優化策略
這是工程師的主戰場。
- 減少主執行緒 (Main Thread) 負擔：JavaScript 執行太久會卡住介面。
- 延遲載入第三方腳本：Google Tag Manager, FB Pixel 等非即時腳本，使用
defer或async。 - 優化事件監聽器 (Event Listeners)：避免在
scroll或resize事件中執行複雜運算。 - 視覺回饋優先：點擊按鈕後，先用 CSS 顯示按壓狀態 (Loading Spinner)，再執行後端運算。
CLS (Cumulative Layout Shift) 累計版面配置位移
這是什麼？
測量網頁元素是否會「突然移動」。 例如：你想點文章連結，結果廣告突然載入，把文章擠下去，害你點到廣告。這就是 CLS 很高。
標準
- 🟢 良好：< 0.1
- 🟡 需要改善：0.1 – 0.25
- 🔴 不佳：> 0.25
優化策略
- 預留圖片空間：一定要設定
width和height屬性。
<!-- ❌ 錯誤 -->
<img src="ad.jpg">
<!-- ✅ 正確：瀏覽器會預留 300x250 的空間 -->
<img src="ad.jpg" width="300" height="250">
- 字體優化：使用
font-display: swap，避免字體載入前後寬度不同導致排版跳動。 - 動態插入內容：若要插入廣告或橫幅，請預先用 CSS 撐開固定高度的容器 (Container)。
常見問題 FAQ
Q: PageSpeed Insights 測出 100 分，SEO 就會第一名嗎？
不會。CWV 只是排名因素之一 (Ranking Factor)，內容品質 (Content Quality) 權重更高。但如果兩個網站內容差不多，速度快的會贏。
Q: 手機版和電腦版分數不同，要看哪個？
看手機版。Google 採行 Mobile-First Indexing（行動優先索引），手機版體驗決定你的排名。
Q: 為什麼我的 Lab Data 分數很高，Field Data 卻不及格？
- Lab Data (實驗室數據)：模擬環境測的，受你自己網速影響。
- Field Data (真實使用者數據)：來自真實訪客的 Chrome 紀錄。這是 Google 評分依據。 如果 Field Data 差，表示你的真實訪客（可能用 4G 網路或舊手機）體驗不好。
總結
優化 Core Web Vitals 的核心思維：尊重使用者的時間與注意力。
- LCP：別讓使用者等。
- INP：別讓使用者卡。
- CLS：別讓使用者點錯。
做好這三點，你的網站體驗就贏過 90% 的對手。
下一步行動
- 🔍 前往 PageSpeed Insights 輸入你的網址
- 📊 查看 “此 URL 的實際使用者體驗” (Field Data) 是否全綠
- 🛠️ 優先修正 LCP 問題（通常最容易改善且影響最大）
👉 延伸閱讀：反向連結 (Backlinks) 建立策略：2026 AI 時代的數位公關戰
資料來源
- Google Search Central: Core Web Vitals Report
- MO design studio 效能優化專案經驗
看完教學覺得 WordPress 還是太麻煩？
瘦桑與 MO design studio 同步提供專業的網站升級服務：
前 5 名諮詢客戶享免費效能報告
關於作者 | 10+ 經驗
MO 編輯
WordPress 效能優化專家 / MO Design Studio 共同創辦人
關注設計 × 工程的平衡協作，擅長以簡潔語言說故事。專門幫已有網站的品牌做速度升級。相信好網站不用重做，只需要正確的優化。
延伸閱讀
SEO 搜尋引擎優化完整教學指南 (2026 最新版)：從 0 到 1 打造高流量網站
這篇文章尚未提供摘要。...
關鍵字規劃與研究工具推薦：2026 實戰指南
這篇文章尚未提供摘要。...
頁面 SEO (On-Page) 優化清單：10 個關鍵檢查項目
這篇文章尚未提供摘要。...
訂閱 MO Stories
獲得最新的網頁設計趨勢、Headless CMS 技術洞察與數位變現策略。