WHAT - 前端性能指标（加载性能指标）

文章目录

• 一、加载性能指标总览
• 二、指标详细解析
• • [1. TTFB（Time To First Byte）](#1. TTFB（Time To First Byte）)
  • • 定义
    • 推荐值
    • 优化方向
  • [2. FCP（First Contentful Paint）](#2. FCP（First Contentful Paint）)
  • • 定义
    • 推荐值
    • 优化方向
  • [3. TTI（Time To Interactive）](#3. TTI（Time To Interactive）)
  • • 定义
    • 推荐值
    • 优化方向
  • [4. Speed Index](#4. Speed Index)
  • • 定义
    • 推荐值
    • 优化方向
  • [5. Server Response Time](#5. Server Response Time)
  • • 定义
    • 推荐值
    • 优化方向
• [三、在 React 项目中采集加载性能指标](#三、在 React 项目中采集加载性能指标)
• • [1. 使用 web-vitals 获取 TTFB、FCP](#1. 使用 web-vitals 获取 TTFB、FCP)
  • [2. 使用 Performance API 获取更多指标（TTI、Speed Index）](#2. 使用 Performance API 获取更多指标（TTI、Speed Index）)
  • [3. TTI 与 Speed Index 的测量方式建议](#3. TTI 与 Speed Index 的测量方式建议)
• 四、采集后的应用与落地
• [五、React 项目实战建议](#五、React 项目实战建议)

在 WHAT - 前端性能指标 中我们简单介绍了几类前端性能指标。今天我们主要介绍第二类指标。

"加载性能指标（Loading Performance Metrics）"，它们描述了从用户发起请求到页面真正「可用」这段时间内的各个阶段，是性能优化的核心环节之一。

下面我将系统整理每个指标的 含义、推荐阈值、影响因素与优化方向 ，最后再给出一套适用于 React 项目的 采集与上报方案 ，类似我们之前对 Core Web Vitals 的做法。

---

一、加载性能指标总览

指标	全称	关注点	推荐阈值	描述
TTFB	Time To First Byte	服务器响应速度	≤ 0.8s（理想）	从请求发出到收到第一个字节的时间
FCP	First Contentful Paint	首次内容渲染	≤ 1.8s（理想）	浏览器首次渲染页面上任何文本、图像、Canvas 的时间
TTI	Time To Interactive	可交互时间	≤ 5s（理想）	页面加载完成后可稳定响应用户交互的时间
Speed Index	-	感知加载速度	≤ 3.4s（理想）	页面视觉内容出现的速度（越低越好）
Server Response Time	-	后端响应	≤ 600ms（理想）	服务器对请求的响应速度（是 TTFB 的主要组成部分）

---

二、指标详细解析

1. TTFB（Time To First Byte）

定义

TTFB 是指浏览器向服务器发送请求，到收到第一个字节的时间。它反映了：

• 网络延迟
• DNS 解析
• TCP/TLS 连接
• 后端服务器响应时间

推荐值

• 优秀：≤ 800 ms
• 需要改进：800--1800 ms
• 较差：> 1800 ms

优化方向

• 使用 CDN 靠近用户。具体可以阅读 WHAT - CDN - Content Delivery Network
• 缓存静态资源。具体可以阅读 WHAT - 静态资源缓存穿透
• 优化后端渲染速度（SSR）。具体可以阅读 WHAT - SSR vs SSG vs ISR
• 减少不必要的重定向

---

2. FCP（First Contentful Paint）

定义

FCP 是浏览器首次绘制页面内容（不一定是首屏完整）所需的时间。例如：渲染一个背景色、一段文本、一张图像。

推荐值

• 优秀：≤ 1.8 s
• 需要改进：1.8--3 s
• 较差：> 3 s

优化方向

• 减少 JS/CSS 阻塞渲染。具体可以阅读 WHAT - 前端阻塞场景梳理
• 预加载关键字体和样式。具体可以阅读 WHAT - script 加载（含 async、defer、preload 和 prefetch 区别）
• 使用服务器端渲染（SSR/SSG）。具体可以阅读 WHAT - SSR vs SSG vs ISR
• 减少首屏渲染资源体积。具体可以阅读 HOW - 如何使用 bundle-analyzer 工具优化包体积

---

3. TTI（Time To Interactive）

定义

TTI 表示页面加载完成后，能够快速、可靠响应用户输入的时间点。这个指标涵盖了：

• 页面内容已经加载
• JS 解析和执行完成
• 主线程空闲可响应交互

推荐值

• 优秀：≤ 5 s
• 需要改进：5--10 s
• 较差：> 10 s

优化方向

• 拆分 bundle，减少首次 JS 执行。具体可以阅读 HOW - 如何使用 bundle-analyzer 工具优化包体积
• 延迟加载非关键 JS。具体可以阅读 [WHAT - script 加载（含 async、defer、preload 和 prefetch 区别）]
• 使用 Web Worker 减轻主线程压力。具体可以阅读 WHAT - 前端 Web Worker 和 Service Worker（含工作者线程概念）
• 优化 React hydration（或使用部分 hydration）

---

4. Speed Index

定义

Speed Index 衡量页面视觉内容出现的速度，越低表示用户看到完整内容的速度越快。

与 LCP 不同，Speed Index 是连续过程的综合分值，而非单一时刻。

推荐值

• 优秀：≤ 3.4 s
• 需要改进：3.4--5.8 s
• 较差：> 5.8 s

优化方向

• 优化首屏渲染路径（Critical Rendering Path）
• 关键内容提前加载
• 避免大体积 JS 阻塞渲染
• 使用懒加载 + 骨架屏（Skeleton UI）

---

5. Server Response Time

定义

服务器响应时间是后端处理请求 + 返回响应的时间，TTFB 的重要组成部分。

推荐值

• 优秀：≤ 600 ms
• 需要改进：600--1800 ms
• 较差：> 1800 ms

优化方向

• 缓存后端响应（HTTP 缓存、Redis）
• 减少 DB 查询
• 使用负载均衡
• 靠近用户部署（边缘节点）

---

三、在 React 项目中采集加载性能指标

这些指标有一部分可以通过浏览器的 Performance API 直接采集，例如 TTFB、FCP。

TTI、Speed Index 更适合通过 Lighthouse 或 RUM 工具（如 Sentry Performance）获得。

---

1. 使用 web-vitals 获取 TTFB、FCP

npm install web-vitals

// src/reportWebVitals.ts
import { getFCP, getTTFB, ReportHandler } from 'web-vitals';

const reportWebVitals = (onPerfEntry?: ReportHandler) => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    getFCP(onPerfEntry);
    getTTFB(onPerfEntry);
  }
};

export default reportWebVitals;

---

2. 使用 Performance API 获取更多指标（TTI、Speed Index）

// src/utils/performanceMetrics.ts
export function collectPerformanceMetrics() {
  const perf = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
  if (!perf) return null;

  return {
    ttfb: perf.responseStart - perf.requestStart,
    domContentLoaded: perf.domContentLoadedEventEnd - perf.startTime,
    loadTime: perf.loadEventEnd - perf.startTime,
    serverResponseTime: perf.responseStart - perf.fetchStart,
    // 其他指标可拓展
  };
}

然后在 React 入口调用：

import { collectPerformanceMetrics } from './utils/performanceMetrics';

window.addEventListener('load', () => {
  const metrics = collectPerformanceMetrics();
  console.log(metrics);

  fetch('/api/performance', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics),
  });
});

注意，这类指标在 load 事件监听里执行。

---

3. TTI 与 Speed Index 的测量方式建议

浏览器本身没有直接暴露 TTI 和 Speed Index，实际生产中常用：

• 使用 Lighthouse / PageSpeed Insights 做离线分析
• 使用 Sentry Performance / New Relic / Datadog RUM 实时采集
• 或使用 tti-polyfill

import ttiPolyfill from 'tti-polyfill';

ttiPolyfill.getFirstConsistentlyInteractive().then((tti) => {
  console.log('TTI:', tti);
});

---

四、采集后的应用与落地

场景	指标	优化方向
后端响应慢	TTFB / Server Response Time	缓存、CDN、靠近用户部署
白屏时间长	FCP	减少阻塞渲染，预加载关键资源
首次可交互慢	TTI	减少 JS 体积，延迟加载
页面加载体验差	Speed Index	骨架屏、渐进渲染
网络慢	所有加载指标	静态资源优化 + HTTP/2 + CDN

---

五、React 项目实战建议

技术	应用
web-vitals	采集 FCP、TTFB 等关键指标
Performance API	获取详细加载阶段时间点
tti-polyfill	获取 TTI
Lighthouse	离线评估 Speed Index
Sentry / 自建服务	上报真实用户性能指标（RUM）
SSR/SSG + CDN	降低 TTFB 与 FCP