Core Web Vitals 與網站速度優化:LCP、INP、CLS 香港實戰調校指南

如果你 2024 年之後冇動過你個網站,我可以好肯定話你—你而家已經喺 Google Core Web Vitals 紅燈區。原因唔係你做錯咗咩,而係 Google 喺 2024 年 3 月將原本嘅 FID(First Input Delay)正式換成 INP(Interaction to Next Paint),呢個新指標嚴格 3–4 倍。SEOCOM 2026 年研究指出,40% 喺舊 FID 合格嘅網站,喺 INP 度直接 fail 咗,佢哋甚至唔知自己出咗事。

呢篇文用香港網站(WordPress、Shopify、SHOPLINE、自家 PHP)實戰角度,拆解 LCP、INP、CLS 三大指標嘅 2026 標準、診斷工具、優化技巧,目標係由「橙黃」推到「綠色」,連帶提升轉化率同 SEO 排名。

一、Core Web Vitals 三大指標 2026 標準

指標

全名

量度

Good

Needs 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

Google 嘅評分標準:75% 真實用戶嘅 session 達標(用 CrUX 數據,即 Chrome User Experience Report),先算「Good」。Lighthouse 模擬數據只供 debug 參考,實際排名計算用 CrUX 真實數據。

二、LCP 拆解:點解你個 banner 圖係元兇

2.1 LCP 量度乜?

LCP 量度 viewport 入面最大嘅元素(通常係 hero banner、產品大圖、首段大標題)幾耐先完整顯示出嚟。香港住宅 4G 平均網速 75 Mbps、5G 約 350 Mbps,但喺西貢、大澳、外圍島嶼仲有大量 3G 區域——你嘅網站要喺最差環境之下都跑到 LCP 2.5s 以下先算合格。

2.2 LCP 4 大殺手

  • Hero 圖未壓縮:JPG 1920×1080 動輒 800KB,直接令 LCP 衝破 4 秒
  • Server TTFB 過長:cPanel 共享主機 TTFB 經常 > 800ms,根本追唔返
  • render-blocking 資源太多:多個 CSS / JS 喺 sync load
  • Web Font:Google Fonts 跨域載入加三次 hop,FOIT 期間 LCP 元素根本未渲染

2.3 LCP 香港實戰修正清單

  • Hero 圖轉 AVIF / WebP:Same quality,size 細 60–75%
  • Hero 圖加 fetchpriority=”high” + preload
  • 用 Cloudflare / Fastly CDN(免費 plan 已經足夠中小企),香港 edge node 響應 30ms
  • TTFB 目標 < 200ms — 換 LiteSpeed / Cloudways 主機通常立即見效
  • Critical CSS inline 入 ,其餘 async load
  • Web Font:用 font-display: swap,或者 self-host Google Fonts

三、INP 拆解:2024 年起最多人 fail 嘅指標

3.1 INP 同 FID 有咩唔同?

FID 只量第一次互動嘅延遲,而且只計「browser 開始 process」嘅時間。INP 量度成個 session 入面最差嘅一次互動,由用戶撳掣 / 打字 / scroll 開始,直到下一次畫面更新為止——p98 worst case。即係話只要你個網站任何一個按鈕慢過 500ms,成個指標就 fail。

3.2 INP 三大兇手

  • JavaScript blocking main thread:Tracking pixel(GA4、Pixel、Hotjar、Clarity)疊加 >50ms long task
  • Long tasks on click:click handler 入面做重 API call、複雜 state update
  • Layout thrashing:CSS animation 改 width/height/margin(force reflow),應該改用 transform / opacity

3.3 INP 香港實戰修正清單

  • GTM 容器內 marketing tag 數目控制喺 ≤ 10 個,用 server-side GTM 分流(可參考 CAPI 文)
  • 重 JavaScript 用 Web Worker 跑,避開 main thread
  • click handler:即時更新 UI(spinner / 按鈕 disabled),把重 work 放入 setTimeout / requestIdleCallback
  • React / Vue / Next.js 用 code-splitting + lazy load components
  • 刪走冇用嘅 plugin / App:WordPress 客戶通常 30+ plugin,半數冇人用

四、CLS 拆解:點解你個產品頁周圍跳?

4.1 CLS 量度乜?

CLS(Cumulative Layout Shift)係量度 viewport 入面 visible 元素嘅突然移位幅度。最常見場景—你 scroll 緊產品頁,突然 banner load 出嚟個版面跳低,你就係咁 click 錯咗「加入購物車」。Google 認為呢類 layout shift 嚴重影響 UX,直接列為 SEO 核心信號。

4.2 CLS 5 大常見元兇

  • 圖片冇指定 width / height,出嚟先撐起空間
  • iframe / embed video 冇 reserved space
  • Web Font load 完先換字體,FOUT 引發 reflow
  • AdSense / 廣告位先空後加
  • Cookie consent banner 由頂部 push 落來,主內容下沉

4.3 CLS 修正清單

  • 必須有 width + height attribute,讓瀏覽器 reserve space
  • iframe / video 用 aspect-ratio CSS,例如 aspect-ratio: 16/9
  • Web Font 用 font-display: optional,或 size-adjust 對齊 fallback metrics
  • AdSense 用 reserved fixed-height container
  • Cookie banner 用 fixed bottom,唔好 push content

五、PageSpeed Insights:點解你 Lab 100 分但實際仍 fail?

5.1 Lab Data vs Field Data

PageSpeed Insights 上面有兩組數據:

  • Field Data(CrUX 真實用戶數據)— Google 排名計算嘅唯一依據
  • Lab Data(Lighthouse 模擬)— 工程師 debug 用,即時 reflect 改動

如果你個 Lab 跑到 95 分,但 Field Data 仲係紅,代表你 28 日內嘅真實用戶嘅體驗未追上你嘅優化。要等 28 日 rolling window 累積。

5.2 PSI 解讀重點

  • Origin Summary:整個 domain 嘅 CrUX,Google 用呢個排名(若該 URL 流量唔夠)
  • URL-level data:單頁 28 日 CrUX,流量唔夠就會回退到 Origin
  • Diagnostics:列出大 image、render-blocking JS、unused CSS,逐項修
  • Treemap:即時睇邊個 JS bundle 最大隻

六、WordPress 實戰 Stack:由 4.2s 推到 0.7s

以下係 J Marketing 處理過嘅典型香港 WordPress 客戶 stack,LCP 由 4.2s 推到 0.7s,轉化率上升 127%(Dazzlebirds 2026 個案數據):

階段

工具 / Plugin

效果

Hosting

Cloudways DigitalOcean Tokyo

TTFB 由 850ms 降到 180ms

CDN

Cloudflare Free + APO

Hero 圖 edge cache,LCP -1.2s

Cache

LiteSpeed Cache(配 OpenLiteSpeed 主機)

Server output 由 800ms 降到 90ms

Image

ShortPixel / Smush + Cloudflare Polish

JPG 自動轉 AVIF,size -68%

JS / CSS

WP Rocket + delay JS

非關鍵 JS 延後到 user interaction 之後

Font

self-host + font-display: swap

FOUT 期間 fallback 字體先 render

DB

WP-Optimize

清舊 revision、transient,DB query 減半

七、Shopify / SHOPLINE 速度優化:平台限制下嘅做法

7.1 Shopify

  • 用輕量 theme:Dawn、Sense、Refresh 預設 LCP < 2.5s
  • Hero 圖直接用 Shopify CDN + WebP(後台一掣搞掂)
  • App audit:每加 1 個 App 約加 50–150ms,定期 unused App 移除
  • Lazy load 預設已開,但唔啱 above-the-fold 圖,要手動 fetchpriority
  • 用 Hyperspeed / RapidLoad app 自動清 long task

7.2 SHOPLINE

  • 圖片自動 WebP,但 hero 主動 preload 唔係預設
  • 嵌入第三方 widget(Klaviyo、Tidio)會 hit INP,審慎選用
  • 後台直接控制 < script > 嵌入位置( / pre / post )
  • 用內建 lazy load + 第三方 image CDN 例如 imagekit.io 加速亞太區

八、4 步驟 30 分鐘自我診斷

  • 1. PageSpeed Insights 跑 mobile + desktop,記低 LCP / INP / CLS field data
  • 2. Chrome DevTools → Performance panel → 模擬 4G + 4× CPU throttle,錄一段 user journey
  • 3. Coverage tab:睇邊啲 JS / CSS 載入但完全冇用,標記去 lazy load
  • 4. Search Console → Core Web Vitals report,睇 28 日有幾多 URL 紅 / 黃 / 綠

九、香港中小企最常踩嘅 6 個速度地雷

  • 1. 用共享 hosting + WordPress + 30 個 plugin,TTFB 永遠 > 800ms
  • 2. Hero 圖係 PNG 1.5MB(應該係 WebP < 100KB)
  • 3. 用 Elementor / Divi 嘅 default theme,Bloated DOM 同 inline CSS
  • 4. GTM 入面塞 20+ tag,INP 直接 fail
  • 5. 主機喺美國,香港用戶 round-trip > 200ms
  • 6. 改完 Lighthouse 跑 95 分就放心,冇等 28 日 CrUX rollover

十、INP 重點修正:JavaScript 才係主戰場

過去 SEO 工程師花最多時間喺 server / image 上面,但 INP 嘅修正中心已經完全 shift 落 frontend。重點唔再係「加快下載」,而係「加快互動」。實戰建議:

  • GA4 用 sendBeacon transport,避免 sync block
  • Tracking pixel 全部加 async + defer
  • 重 component 用 React.lazy / Suspense 切片
  • 改用 Partytown 將 third-party JS 推到 Web Worker
  • 頻繁互動嘅 button 加 debounce / throttle 處理 click handler

十一、速度優化同其他 SEO 環節嘅串連

速度提升咗,Schema 結構化資料先發揮最大威力,延伸閱讀:Schema 結構化資料完整教學

快速嘅落地頁直接令廣告 ROAS 上升,可以參考 Facebook 廣告投放完全指南

CRO 同 LCP 高度相關,每延遲 1 秒,轉化率跌 7%,睇 電商網站轉化率優化(CRO)10 大實戰技巧

揀啱 hosting / 平台先有起步優勢,參考 WooCommerce vs Shopify vs SHOPLINE 平台比較

整體網頁設計同 UX 影響 LCP / CLS,可睇 從設計思維到行銷效益:全方位網頁設計公司的價值

十二、結語:Core Web Vitals 唔再係 nice-to-have

由 2021 年 Page Experience Update 開始,到 2024 年 INP 取代 FID,到 2026 年 40% 網站 fail——Google 嘅訊息已經非常清晰:速度同互動體驗就係 SEO 嘅基礎。如果你嘅競爭對手仲喺紅燈區,你只要花 4–6 星期推到綠色,就已經喺 organic traffic 上拋離佢哋一條街。

J Marketing 提供完整 網頁設計 + Core Web Vitals 優化服務,由主機選擇、CDN 設定到 INP 修正一條龍。

亦提供高速 網上商店建置服務,預設達標 Core Web Vitals。

聯絡我們 預約免費網站速度健康檢查。