性能优化指标

核心指标：LCP、INP、CLS

次级指标：F 系列，也叫技术指标，是可以造假的，拿 FCP 来说，后端可以立即响应一个数据流（类似sse），让前端的 FCP 时间非常短。

• FP（First Paint）：首次绘制时间，指浏览器首次在屏幕上渲染像素的时间，代表页面开始渲染的时间点，也就是白屏时间。它是评估页面渲染速度的重要指标。
• FCP（First Contentful Paint）：首次内容绘制时间，是页面首次绘制任何有内容的像素到屏幕上的时间，代表页面首屏加载的时间点，也就是首屏渲染时间，这个也是白屏时间。

FP 和 FCP 都可以是白屏时间，但是以 FCP 为主，因为 FCP 是用户感知白屏结束的实际节点。

• FMP（First Meaningful Paint）： 首次有意义绘制，是能让用户理解页面核心用途的内容组合，比如文章主体段落、商品列表核心区域
• LCP（Last Contentful Paint）： 最大内容绘制时间，指页面上最大的可见元素（文本、图像、视频等）绘制完成的时间，代表用户视觉上感知到页面加载完成的时间点。它是评估页面内容加载速度的重要指标之一。

FP（首次绘像素，空白 → 有颜色）→ FCP（首次绘内容，有元素 → 有文字 / 图）→ FMP（首次绘核心内容，有内容 → 有用途）→ LCP（最后绘关键内容，有用途 → 已完成）

• FP 和 FCP 上面两个可以通过浏览器提供的 api 来实现 Performance api，FMP 一般都是 Mutation Observer 监听到 DOM 变化

• FP 可能会和 FCP 同时触发，不可能会晚触发。

• DCL（DOM Content Loaded）：表示浏览器完成解析 DOM 树并完成加载页面的时候。它通常用于评估页面脚本的加载性能（无需等待样式表、图标和子框架的完全加载）。
• L：Load 事件，表示浏览器完成加载页面，包括所有子框架（比如嵌套的 iframe）加载完成。（需要等待样式表、图标和子框架的完全加载）。

由于目前大部分项目是 SPA 单页面应用，由 js 加载页面，所以 DCL 和 L 就不能够很好的衡量页面性能了。

• INP（Interaction to Next Paint）：用于衡量用户交互（点击、触摸、键盘输入等）后，浏览器完成下一次屏幕绘制的耗时，聚焦交互响应速度与流畅度。核心：每次交互到下一帧绘制的耗时，评估交互响应速度。
• FID（First Input Delay，首次输入延迟）：用户首次与页面交互（如点击按钮）到浏览器开始处理该交互的时间，反映“页面是否可交互”。
• TTI（Time to Interactive）用户可交互时间：指页面加载完成并且用户能够与页面进行交互的时间，代表用户可以开始操作页面的时间点，比 FID 更全面，反映“页面是否完全可交互”。
• CLS（Cumulative Layout Shift，累积布局偏移）：页面加载和交互过程中，可见元素意外移动的总偏移量，核心指标之一，反映“页面是否稳定”。
• SEO（Search Engine Optimization）：搜索引擎优化，网站在搜索引擎中的排名和可见性。评分范围从 0 到 100，100 分表示网站符合所有 SEO 最佳实践。
• 请求次数和大小