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. 阅读每个核心网络生命周期的卡片：LCP、INP、CLS、FCP 和 TTFB。
  2. 注意为每个指标显示的色彩编码徽章的良好/需要改进/差劲阈值。
  3. 查看每个指标下的要点列表，了解可行的修复。

示例

  • LCP 显示良好 ≤ 2500 毫秒、需要改进 ≤ 4000 毫秒、差劲 > 4000 毫秒 — 改进提示包括优化英雄图像和消除渲染阻止资源。
  • CLS 显示良好 ≤ 0.1、差劲 > 0.25 — 提示提到为广告和延迟加载图像保留空间以防止布局移位。

生产环境使用前请验证输出。无担保 — 参见 条款.