Google提出的网页性能评价指标

“网页指标”是 Google 推出的一项计划，旨在针对对于提供出色的网页用户体验至关重要的质量信号提供统一指导。Google提出了Web Vitals计划旨在简化环境，帮助网站专注于最重要的指标，即 Core Web Vitals。

核心网页指标（Core Web Vitals）

Core Web Vitals选中的三个指标是LCP、INP和CLS：

• Largest Contentful Paint (LCP)：加载速度，用于衡量感知的加载速度，并在网页加载时间轴上标记页面主要内容可能已加载的时间点。衡量从网页开始加载到屏幕上呈现最大的文本块或图片元素所用的时间，为了提供良好的用户体验，应在网页首次开始加载的 2.5 秒内完成 LCP。
• Interaction to Next Paint (INP)：互动性，用于衡量响应能力并量化用户尝试与页面互动时的感受。衡量与网页进行的每个点按、点击或键盘互动的延迟时间，并根据互动次数选择网页最差（或接近最长的互动延迟时间）作为单个代表性值，以描述网页的整体响应能力。为了提供良好的用户体验，网页的 INP 应不超过 200 毫秒。
• Cumulative Layout Shift (CLS)：视觉稳定性，用于衡量视觉稳定性，并量化可见网页内容的意外布局偏移。衡量从网页开始加载到其生命周期状态变为隐藏期间发生的所有意外布局偏移的累计得分。为了提供良好的用户体验，网页的 CLS 应保持为 0.1或更低。
  
  
  

那么一个页面的加载就算是每次都是一样的测试环境也会出现每次测试的结果都不一样，更别提再加上真实用户千差万别的访问设备、网络环境、地理位置等因素的影响了。因此Google的Core Web Vitals给出了一个合适的评价方法，就是采用对应指标的第三四分位数（也就是第75个百分位数）作为考察点，如果一个网页全部Core Web Vitals的三个指标的第三四分位数都达到了如上图中的Good部分，那么评估结果就是Good，否则就需要改进。
不过，如果某个网站在某种程度上与众不同，就需要使用额外的指标才能全面掌握网站的情况。例如，LCP 指标旨在衡量网页的主要内容何时完成加载，但在某些情况下，最大的元素并不属于网页主要内容，因此 LCP 可能与网页不相关。

Google提出者Core Web Vital的指标会随着时间的推移而变化，不会永远一成不变。

加载速度LCP

LCP 会报告视口中可见的最大图片、文本块或视频的渲染时间（相对于用户首次导航到网页的时间）。LCP 包括前一页面的所有卸载时间、连接设置时间、重定向时间和首字节时间 (TTFB)。Largest Content元素包含如下（详情https://w3c.github.io/largest-contentful-paint/）：

• <img> 元素（第一帧呈现时间适用于 GIF 或动画 PNG 等动画内容）
• <svg> 元素中的 <image> 元素
• <video>元素（使用海报图片加载时间或视频的第一帧呈现时间，以时间较短者为准）
• 使用 url() 函数加载背景图片的元素（而不是 CSS 渐变）
• 包含文本节点或其他内嵌级文本元素子元素的块级元素。

在计算元素的大小的时候，需要考虑元素的尺寸通常是用户在视口内可见的尺寸。如果元素超出视口范围，或者元素的任何部分被剪裁或具有不可见的溢出，则这些部分不会计入元素的大小；对于已根据固有尺寸调整大小的图片元素，报告的尺寸是可见尺寸或固有尺寸（以较小者为准）；对于文本元素，LCP 仅考虑可包含所有文本节点的最小矩形；对于所有元素，LCP 不会考虑使用 CSS 应用的外边距、内边距或边框。

互动性 INP

INP 的目的不是衡量互动的最终影响（例如网络提取和其他异步操作的界面更新），而是衡量下一次绘制被阻塞的时间。延迟视觉反馈可能会给用户造成网页响应速度不够快的印象，而 INP 旨在帮助开发者衡量这部分用户体验。

互动生命周期。在事件处理脚本开始运行之前，会发生输入延迟，这可能由主线程上的长时间任务等因素导致。然后，系统会运行互动事件处理脚本回调，并在显示下一帧之前发生延迟。

通过观察用户访问网页期间发生的所有点击、点按和键盘互动的延迟时间，评估网页对用户互动的总体响应情况。最终 INP 值是观测到的最长互动时间，离群值会被忽略。
互动主要是靠 JavaScript实现的，但浏览器确实可以通过不依赖 JavaScript 的控件（例如复选框、单选按钮和 CSS 控件）提供互动性。对于INP来说仅观察到以下互动类型：

• 使用鼠标点击。
• 在带触摸屏的设备上点按。
• 按实体键盘或屏幕键盘上的按键。

视觉稳定性 CLS

浏览器会查看两个渲染帧之间视口中的不稳定元素的大小和移动情况。布局偏移得分是该移动的两个测量值的乘积：影响百分比和距离百分比

layout shift score = impact fraction * distance fraction

• impact fraction
  
  影响比例用于衡量不稳定的元素对两个帧之间的视口区域的影响。指定帧的影响比例是该帧和上一帧中所有不稳定元素的可见区域的组合，以占视口总面积的比例表示。在上图中，有一个元素在一帧中占据了视口的一半。然后，在下一帧中，元素将视口高度向下移动 25%。红色虚线矩形表示元素在两个帧中的可见区域的联合，在本例中，该区域占整个视口的 75%，因此其影响百分比为 0.75。

• distance fraction

布局偏移得分公式的另一部分用于衡量不稳定元素相对于视口移动的距离。距离比例是任何不稳定元素在帧中移动的最大水平或垂直距离除以视口的最大尺寸（宽度或高度，以较大者为准）。

在此示例中，影响分数为 0.75，距离分数为 0.25，因此布局偏移得分为 0.75 * 0.25 = 0.1875。

全文都是https://web.dev/articles/vitals?hl=zh-cn的一些和笔记，感兴趣可以详读原文