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（Largest Contentful Paint），又称作最大内容绘制，是指页面上最大内容元素（通常为主图、标题等）完全渲染的时间。它反映了用户看到页面主要内容的时间，直接影响用户体验，同时它也是搜索引擎衡量网页质量的重要指标。
目标
< 2.5 秒，为良好。
优化方法
优化图片资源：选择合适的图片格式｜图片懒加载｜图片预加载｜图片压缩
优化文本内容：精简HTML、CSS ｜ 优化字体加载
优化资源加载顺序：确保关键资源优先加载
4. FID
定义
FID（First input Delay），首次输入延迟，指用户首次交互（点击/输入）到浏览器响应的时间。它是衡量网页交互性能（用户体验）的重要指标，同时它也是SEO的重要指标，有助于搜索排名。
目标
< 100ms，为良好。
优化方法
减少主线程负载：代码分割｜代码优化｜异步加载
减少长任务(>50ms的任务)
避免复杂的 JS 执行
5. CLS
定义
CLS（Cumulative Layout Shift），累计布局偏移，是指页面元素意外移动的程度（0表示无移动）。它是衡量网页布局稳定性的重要指标。
这种布局变化通常是由于页面内容的动态加载、字体加载、图片加载等因素引起的。例如，当页面中的图片在加载完成后显示出来，导致页面内容向下移动，或者当页面中的字体加载完成后，文本的行高发生变化，从而引起布局的重新排版。
目标
< 0.1 ，为良好。
优化方法
为图片/视频预留尺寸，可以使用占位符
避免动态插入内容
避免使用隐藏内容
预加载广告容器
使用transform动画代替影响布局的属性
6. INP
定义
INP（Interaction to Bext Paint ），用户交互到屏幕实际更新的延迟时间，正逐渐代替 FID。
目标
< 200 ms ，为良好。
优化方法
优化事件处理程序
使用 Web Workers 处理复杂计算
避免频繁操作 DOM
使用 window.requestIdleCallback，它允许开发者将任务调度到浏览器的空闲时段执行，从而避免影响关键的用户交互和动画性能。
暂无评论内容