2023 年 Web 框架性能报告( 二 ) _框架

LCP 是三个指标中最难通过的。在所有测试的网站中，只有 52% 通过了该指标。在测试的六个框架中，只有 Astro 和 SvelteKit 超过了这个平均水平，其余的低于平均水平。
Interaction to Next Paint (INP)Interaction to Next Paint (INP) 意为与与下一次绘制的交互，其是一个实验性的 web vital，用于评估整体网站响应能力，类似于 First Input Delay (FID) 。这两个指标的不同之处在于 INP 观察用户与页面进行的所有交互的延迟，而不仅仅是第一次交互。低 INP 意味着页面始终能够快速响应所有（或绝大多数）用户交互。
虽然 INP 不是当今重要的官方 web vital，但 Chrome 团队已表示希望用 INP 取代 FID，作为更全面、更准确的响应能力衡量标准。
那么，这些框架在这个新的响应指标中表现又如何呢？

文章插图
通过 INP 的站点百分比
图表中最值得注意的是，对于每个框架而言，总体而言，良好的 INP 测量比首次输入延迟 (FID) 更难实现。虽然每个测试框架的 FID 通过率都超过 80%，但没有一个框架能够在 INP 上看到相同的 80% 通过率。Astro 最接近，通过率为 68.8% 。
值得注意的是，所有跟踪网站的平均通过率高达惊人的 60.9% 。虽然 Astro 和 WordPress 在上表中看起来取得了突出的成功，但这些网站实际上仅略高于行业平均水平。为什么许多经过测试的 Web 框架都难以满足这个指标？
一个原因可能是单页应用程序 (SPA) 架构通过 JavaScript 驱动所有导航作为客户端操作。这为没有客户端导航的多页面应用程序 (MPA) 所没有的输入延迟创造了机会。在 MPA 中，导航到新页面会触发来自服务器的完整页面加载，这不属于输入延迟。这有助于解释为什么 Astro 和 WordPress（图表中的两个 MPA）在此指标上的表现明显优于其他测试框架（所有 SPA）。
FID 和 INP 之间区别如下：

FID 量化用户在尝试与无响应页面交互时的体验，但它仅衡量第一次交互。根据谷歌的说法，INP 通过涵盖网站的整个交互范围，从页面首次开始加载到用户离开页面，对网站的响应能力进行了更全面的衡量。这种综合测量使 INP 成为比 FID 更可靠的站点整体响应能力指标。
INP 的整体性使其比 FID 更难解决，因为代码必须以一种在整个过程中保护用户响应的方式实施，而不仅仅是在第一次加载时。由于许多交互是通过 JavaScript 完成的，这意味着网站必须小心加载以优化性能。
这在移动设备上尤其困难。我们查看了整个行业和我们站点网络内的一些站点，发现移动 INP 分数平均比 FID 低 35.5% 。在查看同一数据集的桌面性能时，平均仅下降了 14.1% 。

这将是 2023 年值得关注的一个有趣指标，谷歌继续考虑将 INP 添加为官方 Core Web Vital 。
Lighthouse 性能Lighthouse 是另一个可以用来衡量网站用户体验的工具。HTTP Archive 在模拟的移动加载条件下运行 Lighthouse 。这提供了更详细和一致的页面加载性能分析，低至 100 毫秒的几分之一秒，Lighthouse 提供更详细的性能评分（满分 100）。
像 Core Web Vitals 这样的真实用户数据仍然是真实用户体验的最佳衡量标准，可以在下面的一些图表中看到真实体验与实验体验的不同之处。然而，仍然可以从 Lighthouse 提供的额外细节中学到有趣的见解。让我们来看看数据。

文章插图
Lighthouse 性能得分，中位数
为了保持一致性，保留了上一节中的原始顺序。但是，可以看到，Remix 在 Lighthouse 上的表现似乎比在 CWV 评估中的表现要强得多。对此的一种解释可能是 Remix 使用 startTransition? 和 requestIdleCallback 来延迟页面加载时的 React 水合作用。从理论上讲，这可以在某些实验室情况下（如 Lighthouse）转化为更好的性能，但代价是在其他真实情况下会增加首次输入延迟。
不幸的是，Lighthouse 性能得分的中值全面偏低。一半的测试框架的中值性能被认为是“差”（49 或以下），而另一半的中值分数“需要改进”（50-89）。没有框架达到 90+ 的“良好”中值分数。
在所有跟踪的网站中，性能得分的中位数为 34/100 。为此，测试的框架中有一半（Astro、SvelteKit 和 Remix）确实高于互联网平均水平。