简介（并没有我们想象中那么有用）

它有点像Jenkins平台中的代码质量打分工具 SonarQuebe。

可以说这个分数顶多给我们一点【指导意义】，它是给我们提供方向。
但是由于它太宏观了，我们实践中处理问题、排查问题所在的时候，它并不能起很大作用。

类似于SonarQube，它会很宏观地给你代码中不严谨的地方，诸如“==号的使用”“var没有用const”之类的，然后从总体上给你打分。 但是，如果说我们想要切实地去进行优化，还是得从我们出现问题的小细节去进行修改。

一、概览评分

1、基于几个关键节点，得到的具体-整体评分指标image.png

二、具体分类指标的评分

2、我们可以点进单一地每个分类（性能、可访问性、最佳实践、SEO）看看image.png
点进去之后的结果

可以看到各种它选择用来计算的属性 + 每个属性的占比。

image.png

2.1 大类指标下的小分类

以下只做基本的简介

FCP（First Contentful Paint）：标记浏览器渲染和DOM的一次内容元素的绘制（svg、div、图像、文本等）

从页面开始加载 => 页面的任何内容呈现到用户面前

SI（Speed Index）：首屏展现平均值——直至渲染完所有内容，【时间段】内看每个时间点渲染的比例。

它描绘的是每个时间节点，所渲染出的页面的百分比。 【骨架图诞生的原因】 提升的主要途径：1、优化内容效率（压缩、缓存、消除不要的下载） 2、优化主要渲染路径（html、js、css等渲染顺序，如我们先加载必要的css之类的）

LCP（Larget Contentful Paint）：视窗最大可见元素或者文本块的渲染时间。

应该是指定时间内，如果出现一个更大的区块元素，则会以后来的更大元素渲染时间为准。

TTI（TIME To Interactive）：从页面开始渲染到可以响应用户的操作应答时间。

从 FCP 开始计算。 查找之后是否有长任务（可能阻碍响应用户的）

TBT（Total Blocking Time）：页面阻塞总时长（计算长任务被阻塞地总时间）

衡量从 FCP -> TTI，被阻塞的总时长； 当一个任务执行时间大于50ms 的，才算长任务； image.png

CLS（Cumulative Layout Shift）：累计布局偏移，即页面跳动指数

基于某些规则，所计算得出的偏移指数； 例如：偏移的内容本身占据屏幕的大小 * 偏移的距离

2.2 一些其他的指标

FP（First Paint Time)：标记浏览器和首次导航时的不同

从页面开始加载 => 浏览器中检测到任何渲染时触发（如背景改变、样式应用）。 image.png

FMP（First Meaningful Paint）：标识页面主要内容出现在屏幕上

由于不好定义什么是有效内容，所以这个没有规范。应该是主观上的。

FID（First Interactive Delay）：用户首次交互 -> 浏览器真正能够应答的延迟

image.png

三、某个分类下的小分类度量的数值

image.png

四、可优化项提示（Opportunities）

说实话，这是个智能的时代； 浏览器监控老师，甚至连问题的答案都直接给出来了。

【是一些直接可以使用的优化页面的方法】
image.png

五、手动诊断（Diagnostics）

【当前页面一些已经被检查出来的，不太对的数值】
image.png

六、运行检测的当前环境概览

最后的部分是一些环境信息。

image.png