First Important Paint- 开发自定义指标

2020 年 5 月，谷歌提出了一组以用户为中心的指标，用于描述网站的性能。这些被称为核心网络生命力 (CWV)，包括：

Largest Contentful Paint (LCP)：在视口中绘制最大元素所花费的时间。
First Input Delay (FID)：响应第一个用户输入的延迟。即将被Interaction to Next Paint (INP)取代。
Cumulative Layout Shift (CLS)：衡量页面内容移动量的指标。

CWV 旨在简化许多可用的性能指标，并允许您优先考虑最重要的指标。这种抽象非常有效。在 CWV 宣布后的几年里，网站所有者和服务提供商在网络性能方面进行了投资，以改善整个网络用户的用户体验。
图片[1]-【译】First Important Paint- 开发自定义指标-五八三
如上图所示，摘自cwvtech.report，通过 CWV 阈值的网站数量从 22% 增加到 40%。

自定义指标的作用

自定义指标允许您使用自己的指标扩展浏览器中已有的指标集，这些指标可能比默认指标更好地描述您网站的用户体验。例如，LCP 假设最大的元素也是最重要的元素。这对于某些网站可能是正确的，但对于其他网站则不然。

在上面的幻灯片中，LCP 元素是蓝色渐变背景图像，在带有红色边框的框架中突出显示。虽然可以说，最重要的元素是在下一帧中呈现的页面标题“Lorem”。这可能是一个夸张的例子，但如果重要元素是网格或表格，或者如果背景是<video>带有poster图像的元素，同样的问题也会存在。

Element Timing API

与 LCP 类似，Element Timing API 允许您测量 DOM 元素在页面上呈现的时间。然而，与 LCP 不同的是，Element Timing 允许开发人员选择要测量的元件（或多个元件）。元素计时是通过将elementtiming属性添加到元素来配置的。

Element Timing 的最大局限性在于它仅在基于 Chromium 的浏览器中受支持。此外，它仅在有限的元素子集上受支持。

User Timing API

User Timing API是一种允许您在特定时间点设置标记和度量的 API。例如，这可能是在将元素绘制到页面上或执行重要任务后。

// record the time before the task
performance.mark('doSomething:start');
await doSomething();
// record the time after the task has completed
performance.mark('doSomething:end');

// measure the difference between :start and :end
performance.measure('doSomething', 'doSomething:start', 'doSomething:end');

真实用户指标和实验室测试

在开发自定义指标时，要问的第一个问题是您是想在真实设备上从真实用户那里衡量这个指标，还是只从实验室测试中收集。两种类型的措施都可以为您提供价值，尽管略有不同。

真实用户指标（RUM）能够提供完整的用户体验范围。您不仅可以获得一个单一的分数，还会得到一系列反映不同用户和体验的值。例如，第90百分位数的用户可能会有糟糕的体验，而中位数用户则可能有良好的体验。了解影响指标的不同因素（如地理位置、浏览器或设备）将有助于您更好地优化网站以满足用户需求。然而，实施RUM解决方案可能会昂贵或复杂一些。

上面的屏幕截图来自SpeedCurve，显示了不同用户体验的分布。

实验室测试在受控环境中运行。您可能能够配置多个参数，例如连接速度、设备和运行测试的位置。测试结果将是一份报告，详细说明从您的页面收集的不同指标。

)

实验室测试在调试问题方面非常有效。定期运行实验室测试可以让您比较一段时间内页面的性能并确定回归。我最喜欢的运行实验室测试的工具是令人惊叹的WebPageTest。

一个好的指标的属性

在2020年介绍LCP时，Paul Irish提到了一个良好指标应该具备的8个特性，而在Chromium源代码中也有略有不同的变体记录：

Representative：与用户体验和商业价值相关。
Interpretable：指标及其值易于理解。
Accurate：指标衡量预期衡量的内容的接近程度。
Simple：它的计算方法并不复杂。
Orthogonal：它不应该测量已经被其他指标测量的东西。
Stable：运行之间不应该有太多差异。
Elastic：输入的微小变化会导致指标发生微小变化。
Correlates：该指标应与其他指标以及实验室/现场测试之间具有良好的相关性。

观察效应

良好指标的另一个重要特性是它不会影响测试本身。在科学中，观察效应被描述为观察行为对测试的干扰。如果测量自定义指标明显减慢页面加载速度，那么该指标就不是一个好的指标。

First Important Paint (FIP)

First Important Paint（FIP）是一个自定义指标，用于测量将第一个带注释的HTML元素绘制到页面上所需的时间。

对于这个指标的需求是由于LCP元素并不总是对应用户的实际体验。此外，页面由不同的组件组成，通常由不同团队的开发人员构建。通过对元素进行注释而不是页面本身的方式，创建组件的开发人员无需知道该组件将在哪个页面上使用，因为它会自动被视为FIP候选元素

FIP是否是一个好的指标

First Important Paint 可以在实地和实验室中进行测量。为了确定FIP是否是一个好的指标，我进行了一些实验室测试，并从两个不相关市场的生产网站收集了数据。

Representative

为了测试FIP是否具有代表性，我准备了一些实验室测试，使用不同页面和设备的屏幕截图，并询问了对该指标没有了解的同事，让他们告诉我在哪一帧中他们认为最重要的元素被绘制出来。我们使用这些数据来确定哪些组件应被视为重要，并评估LCP是否已经准确反映了这些信息。

Interpretable

First Important Paint 很容易理解，以毫秒为单位

Accurate

为了衡量自定义指标的准确性，我进行了一些实验室测试，其中FIP元素也是LCP元素。这意味着FIP应该记录与LCP类似的值。对于文本元素，我使用了Element Timing API而不是LCP。

这些测试针对image和text元素使用了3种不同的连接速度进行执行。对于原生连接，FIP与LCP之间的差异为50毫秒。对于常规的4G和3G连接，FIP与LCP元素之间的差异分别增加到200毫秒和1000毫秒。

尽管结果可能看起来不太理想，但测量结果是一致的，并且FIP与LCP或Element Timing之间的差异在不同测试之间变化不大。例如，如果一次测试注册的FIP比LCP快50毫秒，而后续测试注册的FIP比LCP慢50毫秒，则情况可能更令人担忧。

造成不准确性的原因各不相同，这些都是计算指标时的限制。

Simple

测量和计算FIP的代码简单，如果需要，可以轻松进行调试或修改。

Orthogonal

FIP是一项旨在测量页面上最重要元素的自定义指标。在某些情况下，这可能与最大的元素相同，从而与LCP重叠。

Stable

为了衡量 First Important Paint 的稳定性，我在3种不同的连接速度下进行了实验室测试。

图片[2]-【译】First Important Paint- 开发自定义指标-五八三
如上图所示，所有连接速度在不同测试之间的变化非常小。

Elastic

如果一个指标对用户体验的变化有相应的反应，那么它就是弹性的。为了测试FIP是否具有弹性，我创建了一个演示页面作为基准，以及一个对字体文件进行自主托管和预加载的页面变体。预期用户体验应该在标题更早呈现时得到改善，因此FIP也应该得到改善。

在FIP的早期版本中这种变化后并没有记录到任何改善。这帮助我发现了指标中的一个缺陷，即FIP记录了将文本元素添加到DOM的时间，但没有考虑到当Web字体尚未下载时的情况。

解决此问题后，我们可以看到 FIP 的小幅比例改进与改进的用户体验相匹配

图片[3]-【译】First Important Paint- 开发自定义指标-五八三
在上面的比较中，原始测试报告的 LCP 为 1.315s，FIP 为 1.470s。优化测试（包括上述修复）报告了 1.305s 的 LCP 和 1.188s 的改进 FIP。这与用户体验不谋而合，第二次测试的体验有了很大改善。