详情参考：Web框架性能

本报告的目的是查看真实世界的数据，以更好地了解框架选择、性能和 Web 上实际用户体验之间的关系。我们将尝试阐明几个关键问题：

• 现代Web框架在实际使用和性能方面如何比较？

• 框架选择是否会影响网站的核心 Web 指标？

• 框架选择与 JavaScript 有效负载大小的关系如何，有什么影响？

数据

为此，我们查看了三个不同的公开数据集：

• Chrome 用户体验报告 （CrUX）提供用户体验指标，说明实际 Chrome 用户如何体验网络上的热门目标页面。

• HTTP 存档通过定期收集灯塔性能数据，跟踪和报告超过 15 万个网站的性能。

• 核心网络生命体征技术报告它从前两个数据集中收集有用的见解。

所有数据均从独立管理的公共数据集中收集。没有性能数据是由Astro团队直接测量的。在下面的部分中了解有关我们方法的更多信息。

框架

为了创建此报告，我们决定查看六个流行的基于 JavaScript 的 Web 框架： Astro, Gatsby, Next.js, Nuxt, Remix和SvelteKit.我们还包括来自WordPress的数据，由于其在网络上的受欢迎程度和巨大的市场份额（43.2%）。

由于在我们选择的数据集中没有足够的实际使用，几个令人兴奋的新框架不得不被排除在外，但我们希望在下一份报告中包括更多的框架。

核心网页指标

谷歌的核心网络指标（CWV）是一组三个标准化指标，可帮助您了解用户体验网页的方式。每个指标衡量用户体验的不同方面——加载速度、响应能力、视觉稳定性——它们共同量化了网站的整体性能。

谷歌的核心网络指标评估是一个查看真实用户测量数据的测试（来自关键数据集），以确定每个网站的总体通过/失败等级。要使网站通过，它必须满足相关阈值所有三个指标中的“良好”。如果任何指标未达到阈值，则网站无法通过评估。

CWV评估在使用真实世界的用户数据和测量方面是独一无二的。这使得它更准确地反映了用户实际体验网站的方式，尤其是在较长的会话中。Lighthouse和其他实验室测试工具只能测量首页负载，无法捕获使用网站的完整体验。

% Sites Passing CWV

在查看所有使用特定框架构建的已知网站时，Astro和SvelteKit击败了所有测试网站的平均通过率（40.5%），而其余框架则没有。Astro是唯一一个通过谷歌CWV评估的网站超过50%的框架。接下来.js Nuxt分别以大约四分之一和五分之一的网站通过了评估。

网站未能通过 Google 核心网络指标评估的最可能原因是什么？我们可以按单个指标细分数据，以深入了解不同框架在 Web 指标方面的挣扎（和成功）。

首次输入延迟 （FID）

通过 FID 的站点百分比

首次输入延迟 （FID）测量从用户首次与页面交互到浏览器能够响应该交互的时间。谷歌的CWV评估寻找100毫秒或更短的FID。任何较慢的东西都被认为是需要改进并且无法通过评估。

大多数框架都轻松通过了此测试，超过90%或更多的网站通过了评估。在此测试中，没有任何框架的通过率低于 80%。这意味着大多数测试的网站都对第一次用户交互做出响应。

累积布局偏移 （CLS）

通过 CLS 的站点百分比

累积布局偏移 （CLS）测量页面上的视觉稳定性。若要通过此评估，应将意外的布局偏移减少到接近零，以便为用户提供可靠的视觉体验。

CLS是Google作为三个核心Web指标之一的一个有趣指标，因为它与速度或响应能力没有严格关系。它的包含强调了在衡量网络上用户体验的整体质量时不仅仅关注性能的重要性。

所有框架在此指标中的得分均为 50% 或更高。然而，最年轻的框架（Astro、SvelteKit和Remix）在这个指标上得分最高。在所有测试的网站上，这三家公司的得分都超过了75%。

最大含量涂料 （LCP）

通过 LCP 的站点百分比

最大含量涂料 （LCP）是三个核心 Web 指标中的最后一个，在感知性能方面可以说是最重要的。它测量页面主要内容可能已加载的时间点。LCP 需要 2.5 秒或更短的时间才能通过谷歌的 CWV 评估。任何较慢的东西都被认为是需要改进并且无法通过评估。

LCP 是三个指标中最难掌握的。在所有测试的网站中，只有52%通过了这一指标。在我们测试的六个框架中，只有Astro和SvelteKit超过了这个平均水平。其余的低于平均水平。

即将推出？与下一个油漆的交互 （INP）

与下一个绘制的交互 （INP） 是一个实验性 Web 至关重要，用于评估网站的整体响应能力，类似于首次输入延迟 （FID）。这两个指标的不同之处在于，INP观察用户与页面进行的所有交互的延迟，而不仅仅是第一次。低 INP 意味着页面始终能够快速响应所有（或绝大多数）用户交互。

虽然INP在今天还不是至关重要的官方核心网络，但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%。

— 安妮·伯恩斯，叛逆老鼠

这将是 2023 年值得关注的有趣指标，谷歌继续考虑将 INP 添加为官方核心网络生命。

灯塔性能

灯塔是我们可以用来衡量网站用户体验的另一种工具。HTTP Archive 在模拟的移动加载条件下运行 Lighthouse。这提供了更详细和一致的页面加载性能分析，低至100毫秒的几分之一秒。Lighthouse 不会查看较大的“好”与“坏”阈值和存储桶，而是为您提供更详细的性能分数（满分 100 分）。

核心网页指标等真实用户数据仍然是衡量真实用户体验的最佳指标，您可以在下面的一些图表中看到真实体验与实验室体验的不同之处。但是，从灯塔提供的额外细节中仍然可以学到有趣的见解。让我们看一下数据。

灯塔性能得分，中位数

为了保持一致性，我们保留了上一节的原始顺序。但是，您会注意到 Remix 在灯塔上的表现似乎比在 CWV 评估中要强得多。对此的一种解释可能是 Remix 对 和startTransition requestIdleCallback在页面加载时延迟反应水化。从理论上讲，这可以转化为在某些实验室情况下（如Lighthouse）的更好性能，但代价是在其他现实世界中增加的第一输入延迟。

不幸的是，灯塔性能得分中位数全面偏低。测试的框架中有一半表现中位数被认为是“差”（49分或以下），而另一半的中位数得分为“需要改进”（50-89）。没有框架达到90+的“良好”中位数分数。

在所有跟踪的网站上，性能得分的中位数为34/100。为此，我们测试的框架（Astro，SvelteKit和Remix）中有一半确实高于互联网平均水平。

灯塔性能得分，细分

通过按百分位数细分数据，我们可以开始看到一些稍微令人鼓舞的数字，Astro和SvelteKit在p90或p90百分位数中达到了95+的分数。然而，数据清楚地表明，所有网站和框架（包括Astro）仍然难以在现实世界中实现良好的性能。

JavaScript 的成本

我们想要探索的最后一件事是框架选择、性能和实际使用中 JavaScript 总有效负载大小之间的关系。最快的框架是否往往是向客户端发送最少 JavaScript 的框架？

JavaScript 的中位数 KB 与通过 CWV 的站点百分比

数据的趋势很明显：发布较少JavaScript的网站往往表现更好。然而，有太多的因素在起作用，我们无法自信地将这一趋势与Web框架本身的选择联系起来。可能是某些框架鼓励/阻止JavaScript与其他框架不同，但在我们得出任何结论之前，还需要更多的研究。

方法和限制

本报告是根据几个公开可用的数据集编制的。您可以在此处了解有关这些数据集及其方法的更多信息：HTTP 存档方法,CrUX方法论和CWV技术报告方法.

由于容量限制，我们的分析仅查看每个跟踪网站的主页。此限制的一个好处是，每个分析网站的目的和用例的差异较小。然而，一个缺点是这也意味着内部页面（喜欢和页面）及其使用的技术不会被分析，因此被排除在我们的分析之外。/about/admin/...

本报告中未探讨的另一个限制是框架的使用年限对测量的 Web 性能的影响。这里测量的旧框架（Gatsby，Next.js，Nuxt）具有更长的尾巴，运行其框架的旧版本包含在数据集中。这造成了一种情况，即只有较新的框架（Astro，Remix，SvelteKit）可以假设运行过去1-2年中更现代版本的软件。这是我们现有数据的局限性，但我们希望在今后的报告中探讨这一点。