Next.js 内置了对测量和报告性能指标的支持，我们可以通过 useReportWebVitals 钩子自行管理报告。它会在应用的前端代码开始之前运行，用于对应用进行全局分析、错误跟踪以及性能监控。

本篇内容主要详细介绍 6 个性能分析的指标，帮助我们更好的进行性能优化。

1. TTFB

定义

TTFB（Time to First Byte），是指从点击链接到浏览器收到第一个数据字节的时间，它反映了服务器响应请求的效率。

目标

< 200 ms，为良好。

优化方法

• 使用 CDN 加速
• 优化服务器响应时间
• 减少重定向
• 启用 http/2 或 http/3

2. FCP

定义

FCP（First Contentful Paint），也称为首次内容绘制，是指用户看到第一个内容元素（比如文本、图片）的时间。

目标

< 1.8 秒，为良好。

优化方法

• 内联关键 css
• 移除渲染阻塞资源
• 预加载关键资源
• 服务器端渲染（SSR）

3. LCP

定义

LCP（