最新的 web 框架性能报告出炉( 三 ) _框架

FID 和 INP 之间区别如下：
FID 量化用户在尝试与无响应页面交互时的体验，但它仅衡量第一次交互。根据谷歌的说法，INP 通过涵盖网站的整个交互范围，从页面首次开始加载到用户离开页面，对网站的响应能力进行了更全面的衡量。这种综合测量使 INP 成为比 FID 更可靠的站点整体响应能力指标。
INP 的整体性使其比 FID 更难解决，因为代码必须以一种在整个过程中保护用户响应的方式实施，而不仅仅是在第一次加载时。由于许多交互是通过 JavaScript 完成的，这意味着网站必须小心加载以优化性能。
这在移动设备上尤其困难。我们查看了整个行业和我们站点网络内的一些站点，发现移动 INP 分数平均比 FID 低 35.5% 。在查看同一数据集的桌面性能时，平均仅下降了 14.1% 。
这是 2023 年值得关注的一个指标，谷歌继续考虑将 INP 作为官方的核心页面指标。
前端性能分析
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）确实高于互联网平均水平。

文章插图
Lighthouse 性能得分
通过将数据按百分位数进行细分，我们可以开始看到一些稍微兴奋的数字，Astro 和 SvelteKit 在 p90 或 p95 百分位数中达到了90分以上。然而，数据清楚地表明，所有网站和框架（包括 Astro）仍然难以在现实生活中达到良好的性能。
JavaScript 大小影响
本文最后要探索的一件事是在实际使用中框架选择、性能和总 JavaScript 大小之间的关系。最快的框架往往是那些向客户端发送最少 JavaScript 的框架吗？

文章插图

数据的趋势很明显：具有较少 JavaScript 的网站往往表现更好。然而，有太多因素在起作用，无法将这种趋势与 Web 框架本身的选择联系起来。某些框架可能会以不同于其他框架的方式鼓励/阻止 JavaScript，在得出任何结论之前还需要进行更多的研究。
报告总结
该报告是根据几个公开可用的数据集编制的。由于容量限制，分析只查看每个跟踪网站的主页。此限制的一个好处是每个分析网站的目的和用例差异较小。然而，一个缺点是这也意味着内部页面（如 /about 和 /admin/... pages）和它们使用的技术未被分析，因此被排除在分析之外。
本报告中未探讨的另一个限制是框架的年龄对测量的网络性能的影响。本文测量的旧框架（Gatsby、Next.js、Nuxt）有更长的遗留网站运行旧版本的框架，这些旧版本包含在数据集中。这造成了一种情况，即只有较新的框架（Astro、Remix、SvelteKit）可以假设在过去 1-2 年内运行其软件的更现代版本，这是现有数据的局限性。
最后