Yasin

Yasin

页面性能指标

页面性能指标

核心 Web 指标（Core Web Vitals）

Google 定义的三个核心指标，直接影响 SEO 排名：

1. LCP（Largest Contentful Paint）最大内容绘制

页面最大元素渲染完成的时间。

通常是首屏最大的图片、视频或文字块。

好：≤ 2.5s
需改进：2.5s ~ 4s
差：> 4s

优化方向：

  • 优化图片（压缩、webp、懒加载）
  • SSR / SSG 减少白屏
  • 预加载关键资源 <link rel="preload">

2. FID（First Input Delay）首次输入延迟

用户第一次交互（点击、输入）到浏览器实际响应的时间。

好：≤ 100ms
需改进：100ms ~ 300ms
差：> 300ms

注：已被 INP 替代（2024 年起）

3. INP（Interaction to Next Paint）交互到绘制

FID 的替代指标，衡量页面整体交互响应速度。

不只看第一次交互，而是看所有交互中响应最慢的那次。

好：≤ 200ms
需改进：200ms ~ 500ms
差：> 500ms

优化方向：

  • 减少主线程长任务
  • 用 useTransition / useDeferredValue 延迟非紧急更新
  • Web Worker 处理耗时计算

4. CLS（Cumulative Layout Shift）累计布局偏移

页面内容意外移动的程度。

比如图片加载后把文字挤下去、广告突然插入。

好：≤ 0.1
需改进：0.1 ~ 0.25
差：> 0.25

优化方向：

  • 图片/视频设置固定宽高
  • 预留广告位空间
  • 字体加载用 font-display: swap

其他重要指标

5. TTFB（Time To First Byte）首字节时间

从发出请求到收到服务器第一个字节的时间。

好：≤ 200ms
差：> 600ms

反映服务器响应速度。

优化方向：

  • CDN 加速
  • 服务端缓存
  • 减少服务端计算

6. FCP（First Contentful Paint）首次内容绘制

页面第一个文字/图片出现的时间。

好：≤ 1.8s
差：> 3s

优化方向：

  • 减少阻塞渲染的 CSS/JS
  • SSR 直出 HTML
  • 内联关键 CSS

7. FP（First Paint）首次绘制

页面第一个像素出现的时间（可能只是背景色）。

比 FCP 更早，但参考价值较低。

8. TTI（Time To Interactive）可交互时间

页面完全可交互的时间。

页面看起来加载完了，但可能 JS 还没执行完，点按钮没反应，TTI 就是衡量这个的。

好：≤ 3.8s
差：> 7.3s

9. TBT（Total Blocking Time）总阻塞时间

FCP 到 TTI 之间，主线程被长任务阻塞的总时间。

好：≤ 200ms
差：> 600ms

指标关系时间线

页面加载开始
  │
  ├── TTFB ──── 收到第一个字节
  │
  ├── FP ────── 第一个像素（背景色）
  │
  ├── FCP ───── 第一个内容（文字/图片）
  │
  ├── LCP ───── 最大内容渲染完成
  │
  ├── TTI ───── 页面可交互
  │
  └── 用户操作 → INP 衡量交互响应速度

  整个过程中：CLS 衡量布局稳定性
              TBT 衡量主线程阻塞时长

怎么测量

浏览器 DevTools

Chrome → F12 → Lighthouse → 生成报告
Chrome → F12 → Performance → 录制分析

在线工具

代码中获取

// 获取 LCP
new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1];
  console.log("LCP:", lastEntry.startTime);
}).observe({ type: "largest-contentful-paint", buffered: true });

// 获取 CLS
new PerformanceObserver((list) => {
  let clsScore = 0;
  list.getEntries().forEach((entry) => {
    clsScore += entry.value;
  });
  console.log("CLS:", clsScore);
}).observe({ type: "layout-shift", buffered: true });

总结

指标 衡量什么 目标值
TTFB 服务器响应速度 ≤ 200ms
FCP 首次内容出现 ≤ 1.8s
LCP 最大内容渲染 ≤ 2.5s
INP 交互响应速度 ≤ 200ms
CLS 布局稳定性 ≤ 0.1
TTI 可交互时间 ≤ 3.8s
TBT 主线程阻塞 ≤ 200ms
← 返回首页