选择最适合你的框架，看这份详细的Web框架性能分析报告！( 二 ) _框架

最大内容渲染时间（LCP）

文章插图
最大内容渲染时间（LCP）是三个核心Web Vitals中的最后一个指标，当涉及到感知性能时，它可以说是最重要的。它衡量了页面主要内容可能已加载的时间点。要通过谷歌的CWV评估，需要LCP为2.5秒或更短。任何速度较慢的都被认为需要改进并未通过评估。
LCP是三个指标中最难掌握的。在所有测试的网站中，只有52％的网站通过了此指标。在我们测试的六个框架中，只有Astro和SvelteKit超过了此平均值。其余的都低于平均水平。
即将推出？Interaction to Next Paint (INP)Interaction to Next Paint (INP)是一种实验性的Web Vital ，类似于首次输入延迟（FID），评估了整体网站的响应速度。两个指标的不同之处在于INP观察用户对页面进行的所有交互的延迟，而不仅仅是第一个交互。低INP意味着页面能够始终快速响应所有或绝大部分用户交互。
虽然INP今天还不是官方的核心Web Vital ，但Chrome团队已经表明希望用INP取代FID ，作为更全面、更准确的响应度量标准。
那么，这些框架如何应对这种新的响应性指标呢？

文章插图
图表中最引人注目的是，对于每个框架来说，良好的INP测量值要比首次输入延迟（FID）更难达到。虽然每个测试的框架都看到了80％以上的FID通过率，但没有一个框架能够在INP上获得相同的80％通过率。Astro的通过率最高，为68.8％。
值得注意的是，跟踪的所有网站的平均通过率高达60.9％，这是一个惊人的高水平。虽然在上面的图表中Astro和WordPress看起来是突出的成功案例，但这些网站实际上只是略高于行业平均水平的表现。为什么许多测试的Web框架在这个指标上遇到困难？
一个原因可能是单页应用程序（SPA）架构通过JavaScript驱动所有导航作为客户端操作。这会为输入延迟创造机会，而没有客户端导航的多页应用程序（MPA）则没有这种机会。在MPA中，导航到新页面会触发从服务器的完整页面加载，这不被归类为输入延迟。这可能有助于解释为什么Astro和WordPress（图表中的两个MPA）在这个指标上表现显著优于测试的其他框架（所有SPA）。
RebelMouse的Anne Burnes在一篇非常好的文章中讨论了FID和INP之间的差异：

FID量化了用户与不响应页面交互时的体验，但它仅测量第一个交互。根据谷歌的说法， INP通过覆盖一个网站的整个交互谱系，从页面开始加载到用户离开页面的时间，更全面地衡量了网站的响应性。这种全面的测量使INP比FID更可靠地指示网站的整体响应性。引用 INP的整体性质使其比FID更具挑战性，因为您的代码必须以一种方式实现，以在用户的整个旅程中保护响应性，而不仅仅是在第一次加载时。由于许多交互都是通过JavaScript完成的，因此这意味着您的站点必须仔细加载以实现最佳性能。引用这在移动端尤其困难。我们查看了行业内和我们的站点网络中的一些站点，并发现在移动端，平均INP得分比FID低35.5％。当检查同一数据集中的桌面性能时，平均下降仅为14.1％。引用 —— Anne Burnes ， RebelMouse

这将是2023年值得关注的指标，谷歌继续权衡将INP添加为官方的核心Web Vital 。
Lighthouse性能Lighthouse是我们可以用来衡量网站用户体验的另一个工具。HTTP存档以模拟移动加载条件运行Lighthouse 。这提供了更详细和一致的页面加载性能分析，精确到毫秒的100分之一。与查看大型“良好”与“不良”阈值和存储桶不同， Lighthouse给出了一个从100分中测量的更详细的性能分数。
像Core Web Vitals这样的真实用户数据仍然是衡量实际用户体验的最佳方法，可以看到实际体验与实验体验在下面的一些图表中有所不同。然而，仍然可以从Lighthouse提供的额外细节中学习到有趣的见解。让我们来看看数据。

文章插图
为了保持一致性，我们保持了前一部分的原始顺序。然而，你会注意到Remix在Lighthouse性能上比CWV评估表现更强。其中一个解释可能是Remix使用startTransition和requestIdleCallback来推迟React在页面加载时的hydration 。理论上，这可能会在某些实验室情况（如Lighthouse）中转化为更好的性能，但代价是增加其他现实世界情况下的首次输入延迟。