Core Web Vitals 2026｜INP取代FID實戰優化案例

2024 年 3 月 12 日，Google 正式將 FID（First Input Delay）由 Core Web Vitals 移除，由 INP（Interaction to Next Paint）取代。呢個係 Core Web Vitals 自 2020 年推出以嚟最大嘅 metric 變更，影響全球 95% 嘅網站。香港 90% 以上嘅企業網站喺 INP 嘅 threshold（< 200ms）下都fail，原因係 INP 比 FID 嚴格 2 – 5 倍。EC Shop City 服務 18,000 間香港企業，過去 18 個月優化過超過 200 個網站嘅 Core Web Vitals，數據顯示：當 LCP < 2.5s + INP < 200ms + CLS < 0.1 三項全綠時，Google organic 排名平均提升 14 位、bounce rate 跌 28%、conversion rate 升 18%。今日將完整 2026 攻略攤開：3 大 metric 詳解、INP 嘅 9 大殺手、實戰 code fix 範例、真實案例 PageSpeed 數據前後對比、WordPress / Shopify / 自建平台特定優化。跟住做 30 日內可以由紅變綠。

一、Core Web Vitals 2026 完整定義
二、INP 取代 FID：點解 + 影響
三、LCP（Largest Contentful Paint）優化實戰
四、INP（Interaction to Next Paint）優化實戰
五、CLS（Cumulative Layout Shift）優化實戰
六、必備測試工具同 lab vs field data
七、WordPress / WooCommerce 優化清單
八、Shopify 優化清單
九、自建 / PHP / Custom 優化清單
十、真實案例：服飾網店 PageSpeed 32 → 96
十一、常見問題 FAQ

一、Core Web Vitals 2026 完整定義

3 大指標

指標	全名	測量	Good	Need Improvement	Poor
LCP	Largest Contentful Paint	最大內容繪製時間	≤ 2.5s	2.5 – 4.0s	> 4.0s
INP	Interaction to Next Paint	互動到下一次繪製	≤ 200ms	200 – 500ms	> 500ms
CLS	Cumulative Layout Shift	累積版面位移	≤ 0.1	0.1 – 0.25	> 0.25

Pass 嘅條件

網站 Core Web Vitals 「pass」需要：3 大指標嘅 75th percentile 嘅 real user data 全部達到 Good（即 75% 用戶嘅體驗達標）。Field data（real user）比 lab data（測試模擬）更重要。

SEO 影響

2021 年 6 月起 Core Web Vitals 成為 Google ranking 信號
2024 年 3 月 INP 取代 FID 後，影響加倍（INP 比 FID 嚴 2 – 5 倍）
2026 年 AI Overview 引用偏好 fast site（隱性信號）
Mobile UX 信號中 CWV 佔 60%+ 權重

傳統 SEO 完整框架可參考技術 SEO 入門指南，AI 時代 GEO 進化可深入閱讀 GEO 生成引擎優化完全攻略。

二、INP 取代 FID：點解 + 影響

FID 嘅問題

FID 只測量第一次互動嘅 delay
大部分網站 FID 都係綠色（容易過關）
但用戶實際體驗仍然 laggy（後續互動 delay）
過於 lenient 嘅 metric，無法 reflect 真實 UX

INP 嘅突破

測量整個 session 內所有互動嘅 worst response
覆蓋：click、tap、keypress（avoid scroll / hover）
取 75th percentile 或 max latency（依互動次數）
reflect real user experience 更精準

Pass rate 變化

類別	FID Pass Rate	INP Pass Rate	差距
全球網站	~95%	~64%	-31 pts
WordPress	~93%	~52%	-41 pts
Shopify	~96%	~71%	-25 pts
香港中小企網站	~91%	~38%	-53 pts

實戰意涵

2024 年 3 月之前 PageSpeed 報告係綠色嘅網站，2024 年 3 月之後可能即時變紅。香港多數中小企網站需要重新做 INP 優化。

三、LCP（Largest Contentful Paint）優化實戰

LCP 嘅 4 個 sub-phase

TTFB（Time to First Byte）：server response 時間
Resource Load Delay：browser 開始 fetch LCP element 嘅 delay
Resource Load Time：實際 download LCP resource 嘅時間
Element Render Delay：完成 download 到 paint 嘅 delay

9 大 LCP 殺手 + 對應 fix

大圖未壓縮 → 用 WebP / AVIF + responsive srcset
無 CDN → 部署 Cloudflare / Fastly / BunnyCDN
Server 慢 → 升級 hosting 或 implement caching（Redis / Memcached）
Render-blocking CSS → critical CSS inline + async load 其他
Render-blocking JS → 加 async / defer 屬性
Web font 慢 → 用 font-display: swap + preload font
LCP image lazy load → above-the-fold image 唔好 lazy load（即 LCP image 唔加 loading="lazy"）
Hydration delay（React / Vue）→ SSR + 減少 hydration cost
Database 慢 → query optimization + index

Code Fix 範例 1：圖片優化

<!-- ❌ 錯誤 -->
<img src="hero.jpg" alt="hero" loading="lazy">

<!-- ✅ 正確 -->
<img 
  src="hero.avif" 
  srcset="hero-400.avif 400w, hero-800.avif 800w, hero-1600.avif 1600w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
  alt="hero"
  fetchpriority="high"
  width="1600" 
  height="900">

關鍵點：（1）AVIF 格式比 JPG 細 50%；（2）responsive srcset；（3）fetchpriority="high" 提示 browser 優先 download；（4）explicit width / height 避免 CLS；（5）冇 loading="lazy"（above-the-fold）。

Code Fix 範例 2：Critical CSS Inline

<head>
  <style>
    /* Critical CSS：above-the-fold 嘅 styles */
    body { font-family: system-ui; margin: 0; }
    .hero { height: 80vh; background: #000; }
    .hero h1 { color: #fff; font-size: 3rem; }
  </style>
  
  <!-- 非 critical CSS async load -->
  <link rel="preload" href="/css/main.css" as="style" 
        onload="this.onload=null;this.rel='stylesheet'">
</head>

Code Fix 範例 3：Web Font 優化

<head>
  <!-- Preconnect to font CDN -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  
  <!-- Preload critical font -->
  <link rel="preload" href="/fonts/inter-var.woff2" 
        as="font" type="font/woff2" crossorigin>
  
  <style>
    @font-face {
      font-family: 'Inter';
      font-display: swap;  /* 關鍵 */
      src: url('/fonts/inter-var.woff2') format('woff2');
    }
  </style>
</head>

四、INP（Interaction to Next Paint）優化實戰

INP 嘅 3 大組成

Input Delay：browser 接收 input 到 event handler 開始執行嘅時間
Processing Time：event handler 嘅執行時間
Presentation Delay：handler 完成到下一次 paint 嘅 delay

9 大 INP 殺手

Long tasks（> 50ms）：阻塞 main thread
Heavy event handler：click 後做大量 sync 計算
Large DOM（> 1,500 nodes）：每次 layout 計算極慢
Third-party script：FB Pixel / GA / chat widget 拖慢
Heavy React re-render：state update 觸發 cascade re-render
Sync XHR / fetch：阻塞 UI
Big bundle：JS 一次過 parse + execute
Frequent forced layout（thrashing）
Animation 用 left/top 而非 transform

Code Fix 範例 1：Break up long task

// ❌ 錯誤：blocking main thread
function processItems(items) {
  items.forEach(item => {
    expensiveComputation(item); // 100ms × 100 items = 10s blocking
  });
}

// ✅ 正確：用 scheduler.yield() 或 setTimeout 切片
async function processItems(items) {
  for (const item of items) {
    expensiveComputation(item);
    if (navigator.scheduling?.isInputPending()) {
      await new Promise(r => setTimeout(r, 0));
    }
  }
}

Code Fix 範例 2：用 requestIdleCallback

// ❌ 錯誤：點擊後即時做重計算
button.addEventListener('click', () => {
  const result = heavyComputation(); // 500ms
  updateUI(result);
});

// ✅ 正確：UI 即時 response，重計算 defer
button.addEventListener('click', () => {
  showLoadingState(); // 即時
  requestIdleCallback(() => {
    const result = heavyComputation();
    updateUI(result);
  });
});

Code Fix 範例 3：Debounce input handler

// ❌ 錯誤：每次 keypress 都 search
input.addEventListener('input', e => {
  searchAPI(e.target.value); // 每按一個 key 都 fire
});

// ✅ 正確：debounce 300ms
let timeout;
input.addEventListener('input', e => {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    searchAPI(e.target.value);
  }, 300);
});

Code Fix 範例 4：CSS Containment

/* ✅ 用 contain 限制 layout 計算範圍 */
.product-card {
  contain: layout style paint;
}

.long-list {
  content-visibility: auto;
  contain-intrinsic-size: 200px;
}

呢個 CSS property 可以令 INP 改善 30 – 100ms（特別係 long list / many cards 嘅 page）。

五、CLS（Cumulative Layout Shift）優化實戰

CLS 計算公式

CLS = Impact Fraction × Distance Fraction，每次 layout shift 嘅累積 score。每次「unexpected」嘅版面跳動都會加分。

5 大 CLS 殺手

圖片冇 width / height
Web font swap 跳動
動態插入內容（ads、banner、popup 推開內容）
iframe / embed 冇 reserved space
CSS animation 用 top / left（觸發 layout）

Code Fix 範例 1：Image dimensions

<!-- ❌ 錯誤 -->
<img src="hero.jpg" alt="hero">

<!-- ✅ 正確：固定 aspect ratio -->
<img src="hero.jpg" alt="hero" width="1600" height="900">

<!-- 或用 CSS aspect-ratio -->
<style>
  .hero-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
</style>

Code Fix 範例 2：預留 ad / embed 空間

<!-- ✅ 預留 banner 空間 -->
<div class="ad-slot" style="min-height: 250px;">
  <!-- ad inject 進去後唔會推開內容 -->
</div>

Code Fix 範例 3：Font swap 防跳動

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
  
  /* 關鍵：用 size-adjust 同 fallback font 對齊 */
  size-adjust: 100.06%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

六、必備測試工具同 lab vs field data

5 大測試工具

PageSpeed Insights（pagespeed.web.dev）—— 最主流
Chrome DevTools Lighthouse —— 開發時測試
WebPageTest（webpagetest.org）—— 進階多 location 測試
Chrome User Experience Report (CrUX) —— real user 數據
Google Search Console > Core Web Vitals 報告 —— site-wide 監測

Lab Data vs Field Data

項目	Lab Data	Field Data
來源	模擬測試	真實用戶
環境	固定（Moto G Power、4G）	多元（不同裝置、網絡）
更新頻率	每次測試	28 日 rolling window
SEO 影響	無	是 ranking 信號
用途	debug + 開發	判斷是否 pass

關鍵 insight

Lab data 全綠 ≠ Field data pass。Google ranking 用嘅係 field data（CrUX）。新網站 / 流量低嘅網站可能冇 field data，呢時 lab data 係 fallback。

real user monitoring（RUM）建議

用 web-vitals.js（Google 官方 library）追蹤每個用戶嘅 LCP / INP / CLS
send 到 GA4 做 custom event
identify slow page / slow segment（mobile vs desktop、不同 region）

GA4 完整追蹤設定可參考 GA4 與轉化追蹤完全指南。

七、WordPress / WooCommerce 優化清單

必裝 plugin

WP Rocket（最佳 caching plugin）或 LiteSpeed Cache（如用 LiteSpeed server）
ShortPixel / Imagify（圖片 auto convert WebP / AVIF）
Asset CleanUp（移除 page-specific 嘅 unused CSS / JS）
FlyingPress（INP 優化專用）

必做 server-level 優化

用 PHP 8.2+（vs PHP 7.x 快 30 – 50%）
啟用 OPcache
用 MariaDB 10.6+ 或 MySQL 8.0
HTTP/3 + Brotli compression
Cloudflare 前置 CDN

WooCommerce 特定優化

Disable 唔用嘅 plugin
限制 cart fragments（HEAVY AJAX）
用 server-side cart count（避免 cart_fragments AJAX）
Database：定期 clean transient + post revisions
Product image：用 ShortPixel auto WebP + lazy load below-fold

WooCommerce 完整優化可參考 WooCommerce 完整教學。

八、Shopify 優化清單

Shopify 嘅限制

無法控制 server / hosting（Shopify 自家 infrastructure）
Theme code 可以改，但 platform-level 嘅 JS 改唔到
App 多 = INP 必然差

實戰優化點

用輕量 theme（Dawn、Sense、Refresh —— 都係 Shopify 官方 OS 2.0 theme）
移除唔用嘅 app（每個 app inject 50 – 200kb JS）
用 Shopify Image Optimization（自動 WebP）
Liquid 內 lazy load below-fold image
第三方 script async / defer load
用 Shopify Bundles（取代 third-party bundling app）
關閉 cart drawer（用 cart page 取代，cart drawer 嘅 JS 重）

Shopify INP 嘅最大殺手

Shopify Inbox（chat widget）+ Shop Pay button + 多個 review app。建議：揀一個就好，唔好 stack 太多 widget。

Shopify vs WooCommerce vs 自建嘅深度對比可參考 4 平台終極對決。

九、自建 / PHP / Custom 優化清單

Server-level

PHP 8.2+ + OPcache + JIT
Nginx / Apache + HTTP/3
Redis / Memcached object caching
MySQL 8.0 / MariaDB 10.6+ + 適當 index
Cloudflare / BunnyCDN

Application-level

Database query 用 prepared statement + EXPLAIN 分析
API call 加 caching layer
用 Composer autoload 取代 manual require
Image：upload 後 auto generate WebP / AVIF + multiple sizes

Frontend

Critical CSS inline + async load
JS bundle split + dynamic import
Web font preload + font-display: swap
Image lazy load（below-fold only）
用 IntersectionObserver 取代 scroll event listener

十、真實案例：服飾網店 PageSpeed 32 → 96

客戶背景

EC Shop City 嘅一個服飾客戶（WooCommerce on shared hosting），2025 年 9 月諮詢時：

PageSpeed mobile：32 / 100（紅）
LCP：5.8s（poor）
INP：680ms（poor）
CLS：0.34（poor）
Bounce rate：71%
Conversion rate：1.2%

4 週優化部署

Week 1：Hosting + CDN —— Shared hosting 升級到 VPS（PHP 8.2 + LiteSpeed）+ Cloudflare CDN
Week 2：Image + CSS —— 1,800 張 product image 全部轉 WebP + responsive srcset，critical CSS inline，移除 8 個唔用嘅 plugin
Week 3：JS + Font —— jQuery defer，Google Fonts self-host + preload，移除 4 個重複功能 plugin（Yoast + RankMath 二揀一），cart fragments disable
Week 4：INP 專項 —— Long task break-up（用 setTimeout chunk），button click handler 加 requestIdleCallback，product card 加 CSS contain

4 週後結果（PageSpeed 數據）

指標	Before（9 月初）	After（10 月初）	改善
PageSpeed Mobile	32 / 100	96 / 100	+200%
PageSpeed Desktop	58 / 100	99 / 100	+71%
LCP	5.8s	1.4s	-76%
INP	680ms	148ms	-78%
CLS	0.34	0.04	-88%
Bounce Rate	71%	43%	-39%
Conversion Rate	1.2%	2.4%	+100%
Google Organic Position（avg）	#28	#11	+17 位
Monthly Sessions	4,200	11,800	+181%

關鍵 insight

Hosting 升級係最大單一改善（佔 40% 改善幅度）
Image WebP + CDN 係第二大（佔 25%）
INP 嘅 long task break-up 對 conversion rate 影響最直接（用戶覺得「順」）
CLS 由 0.34 → 0.04 顯著降低 bounce rate（用戶唔再因為跳動 mis-click）

更多實戰案例可深入閱讀精工梳化由打算結業到 SEO 翻身。

十一、常見問題 FAQ

Q1：INP 同 FID 真係差咁多？

係。FID 只測第一次互動，多數 site 都過；INP 測整 session worst response，cover 真實 UX。香港中小企網站 INP fail rate 約 62%（vs FID 9%）。

Q2：PageSpeed 90+ 但 Search Console 仍然紅色？

PageSpeed = lab data（單次模擬），Search Console = field data（real user 28 日 rolling）。Field data 反映真實情況，需要時間累積。改完 code 後 28 – 60 日 field data 才會 update。

Q3：Mobile 同 Desktop 差距好大點算？

Google 主要用 mobile field data ranking。優先優化 mobile：用 mobile-first design、限制 JS / CSS bundle < 100kb、image 用 mobile-optimized size。

Q4：CDN 真係有用？

對香港網站尤其重要：Cloudflare 喺 HK 有 edge，可以將 static asset response time 由 200ms 降到 20ms。LCP 改善 300 – 800ms 係常態。免費 plan 已足夠中小企。

Q5：點解我裝咗 cache plugin 仍然慢？

常見原因：（1）冇 enable page caching；（2）conflict 多個 cache plugin；（3）admin-bar / login user 唔 cache（測試時用 incognito mode）；（4）database 慢（cache 解決唔到 dynamic query）；（5）shared hosting 自身慢。

Q6：第三方 script（FB Pixel / GA / Hotjar）點處理？

用 GTM 統一管理 + async load。Hotjar / 重 chat widget 建議 lazy load（user scroll / interaction 後先 load）。考慮 server-side tracking（Stape.io、自架 GTM Server）減少 client JS。

Q7：WordPress 點解永遠慢？

唔係必然。原生 WordPress 配 LiteSpeed server + WP Rocket + 輕 theme 可以 PageSpeed 95+。慢嘅原因通常係：（1）shared hosting；（2）裝 30+ plugin；（3）theme 重；（4）冇 CDN。

Q8：Shopify 嘅 PageSpeed 永遠 60 – 70 點解決？

Shopify 嘅 platform JS（cart.js、shop-pay-shop-button.js 等）改唔到，呢個係 baseline overhead。實際操作：揀輕 theme（Dawn）+ 限制 app 數（< 5 個）+ 移除 unused script。可以 push 到 80 – 90 但難 95+。

Q9：要花幾多錢做 CWV 優化？

視 scope。基礎審計 + 報告：HKD 3,000 – 8,000；中度優化（image / CSS / JS / hosting）：HKD 15,000 – 50,000；INP 深度重構（large bundle / heavy JS）：HKD 50,000 – 200,000+。

Q10：EC Shop City 提供 CWV 優化服務嗎？

提供。EC Shop City 服務 18,000 間香港企業，過去 18 個月優化過 200+ 網站嘅 Core Web Vitals，平均 PageSpeed mobile 由 35 提升到 90+。歡迎免費諮詢報價，或打 3111-0822、WhatsApp 6205-3555。

結語：CWV 係 SEO 嘅 baseline，唔係 nice to have

2026 年香港網站嘅 SEO 競爭已經唔再淨係 keyword + content，Core Web Vitals 係 ranking 嘅 baseline 信號，3 大指標（LCP < 2.5s、INP < 200ms、CLS < 0.1）唔達標即時失去 ranking 競爭力。INP 取代 FID 後，香港 60% 以上網站需要重新優化。但 CWV 優化嘅 ROI 極高 —— 服飾網店案例顯示：4 週 + 中等預算可以令 PageSpeed 32 → 96、conversion rate 翻倍、organic 流量 +181%。將今篇文章嘅 9 大 LCP fix + 9 大 INP fix + 5 大 CLS fix 全部 implement 後，你網站會喺未來 1 – 3 個月內由紅變綠。

EC Shop City 自 2006 年起服務 18,000 間香港企業，過去 18 個月深度處理過 200+ Core Web Vitals 優化項目，覆蓋 WordPress、WooCommerce、Shopify、自建 PHP 系統。歡迎免費諮詢報價，由我哋 audit 你網站嘅 CWV 並推薦最 ROI 嘅優化路線。

延伸閱讀：

Core Web Vitals 2026 完全攻略：INP 取代 FID 後嘅實戰優化案例（含真實 PageSpeed 數據前後對比 + Code Fix 範例）

目錄

一、Core Web Vitals 2026 完整定義

3 大指標

Pass 嘅條件

SEO 影響

二、INP 取代 FID：點解 + 影響

FID 嘅問題

INP 嘅突破

Pass rate 變化

實戰意涵

三、LCP（Largest Contentful Paint）優化實戰

LCP 嘅 4 個 sub-phase

9 大 LCP 殺手 + 對應 fix

Code Fix 範例 1：圖片優化

Code Fix 範例 2：Critical CSS Inline

Code Fix 範例 3：Web Font 優化

四、INP（Interaction to Next Paint）優化實戰

INP 嘅 3 大組成

9 大 INP 殺手

Code Fix 範例 1：Break up long task

Code Fix 範例 2：用 requestIdleCallback

Code Fix 範例 3：Debounce input handler

Code Fix 範例 4：CSS Containment

五、CLS（Cumulative Layout Shift）優化實戰

CLS 計算公式

5 大 CLS 殺手

Code Fix 範例 1：Image dimensions

Code Fix 範例 2：預留 ad / embed 空間

Code Fix 範例 3：Font swap 防跳動

六、必備測試工具同 lab vs field data

5 大測試工具

Lab Data vs Field Data

關鍵 insight

real user monitoring（RUM）建議

七、WordPress / WooCommerce 優化清單

必裝 plugin

必做 server-level 優化

WooCommerce 特定優化

八、Shopify 優化清單

Shopify 嘅限制

實戰優化點

Shopify INP 嘅最大殺手

九、自建 / PHP / Custom 優化清單

Server-level

Application-level

Frontend

十、真實案例：服飾網店 PageSpeed 32 → 96

客戶背景

4 週優化部署

4 週後結果（PageSpeed 數據）

關鍵 insight

十一、常見問題 FAQ

Q1：INP 同 FID 真係差咁多？

Q2：PageSpeed 90+ 但 Search Console 仍然紅色？

Q3：Mobile 同 Desktop 差距好大點算？

Q4：CDN 真係有用？

Q5：點解我裝咗 cache plugin 仍然慢？

Q6：第三方 script（FB Pixel / GA / Hotjar）點處理？

Q7：WordPress 點解永遠慢？

Q8：Shopify 嘅 PageSpeed 永遠 60 – 70 點解決？

Q9：要花幾多錢做 CWV 優化？

Q10：EC Shop City 提供 CWV 優化服務嗎？

結語：CWV 係 SEO 嘅 baseline，唔係 nice to have

分享這篇文章：

相關文章

Claude 開始為文字加水印：內容創作者要知咩

GEO 實作全指南：10 步令 AI 引用你嘅網站

FB 貼 Link 要收費：點解你更加需要 SEO 同 GEO

GEO 生成引擎優化完全攻略 2026：點樣令 ChatGPT / Perplexity / Gemini / Claude 引用你（llms.txt + Entity SEO + AI Overview 實戰）

SEO文章唔好為發而發 寫得精準有意義先會贏

SEO文章唔好為發而發寫得精準有意義先會贏