前端性能指标FP/FCP/LCP/CLS/TTI/FID详解

核心指标详解

FP（First Paint）首次绘制

• 浏览器首次在屏幕上绘制任何像素
• 可标记为「开始渲染」但没有意义（可能只是背景色）
• 优化：减少HTML/CSS阻塞

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

• 首次绘制任何文本、图片、非白色canvas/SVG
• 目标：< 1.8s（良好），> 3.0s（差）
• 优化：减小首屏CSS、内联关键CSS、优化字体加载

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

• 视口中的最大元素渲染完成时间（图片/视频/大文本块）
• Core Web Vitals 之一，目标：< 2.5s
• 优化：优化图片加载、预加载关键资源、SSR、CDN

CLS（Cumulative Layout Shift）累积布局偏移

• 页面内容意外移动的总量分数
• Core Web Vitals 之一，目标：< 0.1
• 优化：给图片/广告设置固定尺寸、避免动态注入占位符

TTI（Time to Interactive）可交互时间

• 页面完全可交互的时间（UI响应、事件绑定完成）
• 目标：< 3.8s
• 优化：代码分割、延迟加载JS、优化长任务

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

• 用户首次交互到浏览器开始处理事件的时间
• Core Web Vitals 之一，目标：< 100ms
• 优化：拆分长任务、使用Web Workers、优化主线程

测量方法

// Performance Observer
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.name, entry.startTime, entry.duration);
  }
});
observer.observe({ type: 'largest-contentful-paint', buffered: true });
observer.observe({ type: 'layout-shift', buffered: true });
observer.observe({ type: 'first-input', buffered: true });

Lighthouse：生成性能报告，包含所有指标评分及优化建议。

Web Vitals库（官方）：

import { getLCP, getFID, getCLS } from 'web-vitals';
getLCP(console.log);
getFID(console.log);
getCLS(console.log);

优化优先级：

1. LCP（首屏视觉体验）
2. CLS（内容稳定性）
3. FID（交互响应性）
4. 结合FP/FCP改善整体感知性能