Tool Hub

網頁關鍵指標

Core Web Vitals (LCP/INP/CLS/FCP/TTFB) 閾值與最佳化建議

LCP
Largest Contentful Paint
loading

Time until the largest visible content element (image, video, large text block) is rendered.

Thresholds

Good: ≤ 2.5 seconds
Needs improvement: ≤ 4 seconds
Poor: > 4 seconds

How to improve

  • Optimize hero images (modern formats, proper sizing, preload)
  • Reduce server response time (CDN, edge caching)
  • Eliminate render-blocking JS/CSS
  • Preload critical fonts; prefer system fonts for above-the-fold text
INP
Interaction to Next Paint
interactivity

Slowest-ish interaction latency observed during the page session (replaces FID since 2024).

Thresholds

Good: ≤ 200 ms
Needs improvement: ≤ 500 ms
Poor: > 500 ms

How to improve

  • Break up long tasks (>50ms) — yield to main thread
  • Defer non-critical JS (input handlers > rendering)
  • Avoid heavy work in event handlers
  • Use CSS transitions instead of JS animation where possible
CLS
Cumulative Layout Shift
stability

Sum of all unexpected layout shifts during the lifetime of the page (unitless score).

Thresholds

Good: ≤ 0.1 score
Needs improvement: ≤ 0.25 score
Poor: > 0.25 score

How to improve

  • Always set explicit width/height on images and ads
  • Reserve space for embeds before they load
  • Avoid inserting content above existing content (banners, cookie prompts)
  • Use transform: translate() instead of layout-affecting properties for animations
FCP
First Contentful Paint
loading

Time until the first text or image is rendered (any DOM content).

Thresholds

Good: ≤ 1.8 seconds
Needs improvement: ≤ 3 seconds
Poor: > 3 seconds

How to improve

  • Reduce server response time
  • Eliminate render-blocking resources
  • Inline critical CSS
TTFB
Time to First Byte
loading

Time between request and first byte of the response (server + network).

Thresholds

Good: ≤ 800 ms
Needs improvement: ≤ 1800 ms
Poor: > 1800 ms

How to improve

  • CDN + edge caching
  • Optimize backend (DB queries, N+1 etc.)
  • Use HTTP/2 or HTTP/3
  • Reduce redirect chains

使用方法

  1. Read through the cards for each Core Web Vital: LCP, INP, CLS, FCP, and TTFB。
  2. Note the Good / Needs Improvement / Poor threshold values shown as color-coded badges for each metric。
  3. Review the bulleted improvement tips under each metric to understand actionable fixes。

範例

  • LCP shows Good ≤ 2500 ms, Needs Improvement ≤ 4000 ms, Poor > 4000 ms — improvement tips include optimizing hero images and eliminating render-blocking resources。
  • CLS shows Good ≤ 0.1, Poor > 0.25 — tips mention reserving space for ads and lazy-loaded images to prevent layout shifts。

生產環境使用前請驗證輸出。無擔保 — 參見 條款.