本报告旨在通过分析真实世界数据，更好地理解框架选择、性能与网络上实际用户体验之间的关系。我们将尝试阐明几个关键问题：
- 现代 Web 框架在实际使用和性能方面表现如何？
- 框架选择是否会影响网站的核心 Web 指标？
- 框架选择与 JavaScript 有效载荷大小的关联度如何，又会产生什么影响？
数据
为此，我们查阅了三个公开可用的数据集：
- Chrome 用户体验报告 (CrUX) 提供了真实 Chrome 用户在网络上访问热门网站时的用户体验指标。
- HTTP 存档，它通过定期收集 Lighthouse 性能数据，跟踪并报告超过 1500 万个网站随时间变化的性能。
- 核心 Web 指标技术报告，它从前两个数据集中收集有用的洞察。
所有数据均来自公开的、独立管理的数据集。 Astro 团队未直接测量任何性能数据。在以下部分了解有关我们方法的更多信息。
所选框架
为编制本报告，我们选择了六个流行的基于 JavaScript 的 Web 框架进行研究：Astro、Gatsby、Next.js、Nuxt、Remix 和 SvelteKit。此外，我们还尽可能地纳入了 WordPress 的数据，因为其在网络上的普及度和巨大的市场份额 (43.2%)。
一些令人兴奋的新框架由于在我们所选数据集中没有足够的实际使用量而未能纳入，但我们希望在下一份报告中能包含更多框架。
核心 Web 指标
Google 的核心 Web 指标 (CWV) 是一组三个标准化指标，可帮助您了解用户如何体验网页。每个指标衡量用户体验的不同方面——加载速度、响应速度、视觉稳定性——它们共同量化了网站的整体性能。
Google 的 核心 Web 指标评估 是一项测试，它查看来自 CrUX 数据集中所有三个指标的真实用户测量数据，以确定每个网站的总体通过/失败等级。网站若要通过，必须在所有三个指标中达到“良好”的相关阈值。如果任何指标未能达到阈值，则该网站未能通过评估。
CWV 评估的独特之处在于它使用了真实的用户数据和测量结果。这使得它能更准确地反映用户实际体验网站的方式，尤其是在更长的会话期间。Lighthouse 和其他实验室测试工具只能测量首次页面加载，这无法捕捉使用网站的完整体验。
在查看所有已知使用特定框架构建的网站时，Astro 和 SvelteKit 超出了所有被测试网站的平均通过率 (40.5%)，而其他框架则没有。Astro 是唯一一个通过 Google CWV 评估的网站比例超过 50% 的框架。Next.js 和 Nuxt 排名垫底，分别约有四分之一和五分之一的网站通过了评估。
网站未能通过 Google 核心 Web 指标评估最可能的原因是什么？我们可以按单个指标分解数据，以深入了解不同框架在 Web 指标方面面临的挑战（和取得的成功）。
首次输入延迟 (FID)
首次输入延迟 (FID) 衡量从用户首次与页面交互到浏览器能够响应该交互的时间。Google 的 CWV 评估要求 FID 不超过 100 毫秒。任何更慢的情况都被视为需要改进并未能通过评估。
大多数框架都轻松通过了这项测试，超过 90% 或更多的网站通过了评估。没有框架在此测试中的通过率低于 80%。这意味着大多数被测试的网站都对首次用户交互做出了响应。
累积布局偏移 (CLS)
累积布局偏移 (CLS) 衡量页面的视觉稳定性。要通过此评估，您应将意外布局偏移减少到接近零，以提供给用户可靠的视觉体验。
CLS 是 Google 作为三个核心 Web 指标之一而包含的有趣指标，因为它并非严格与速度或响应能力相关。它的纳入强调了在衡量网络用户体验的整体质量时，不仅要看性能的重要性。
所有框架在该指标上得分均在 50% 或更高。然而，在该指标上得分最高的是最年轻的框架（Astro、SvelteKit 和 Remix）。在所有被测试的网站中，这三个框架在该指标的评估中均得分超过 75%。
最大内容绘制 (LCP)
最大内容绘制 (LCP) 是三个核心 Web 指标中的最后一个，可以说是感知性能方面最重要的指标。它衡量页面主要内容可能已加载完成的时间点。通过 Google 的 CWV 评估需要 LCP 不超过 2.5 秒。任何更慢的情况都被视为需要改进并未能通过评估。
LCP 是三个指标中最难掌握的。所有被测试的网站中，只有 52% 通过了这项指标。在我们测试的六个框架中，只有 Astro 和 SvelteKit 超过了这一平均水平。其余的都低于平均水平。
即将推出？交互到下一次绘制 (INP)
交互到下一次绘制 (INP) 是一项实验性 Web 指标，它评估网站的整体响应能力，类似于首次输入延迟 (FID)。这两个指标的不同之处在于，INP 观察用户与页面进行的所有交互的延迟，而不仅仅是第一次交互。较低的 INP 意味着页面能够持续快速响应所有（或绝大多数）用户交互。
虽然 INP 目前还不是官方的核心 Web 指标，但 Chrome 团队已表示希望用 INP 替换 FID，作为衡量响应能力的更全面、更准确的指标。
那么，这些框架在这个新的响应能力指标上表现如何呢？
图表中最值得注意的是，对于每个框架而言，实现良好的 INP 测量结果总体上比首次输入延迟 (FID) 困难得多。尽管每个被测试的框架在 FID 上都达到了 80% 或更高的通过率，但没有一个框架在 INP 上达到相同的 80% 通过率。Astro 最接近，通过率为 68.8%。
值得注意的是，所有被跟踪网站的平均通过率出奇地高，达到 60.9%。虽然 Astro 和 WordPress 在上图中看似取得了显著成功，但这些网站实际上仅略高于行业平均水平。为什么许多被测试的 Web 框架在这个指标上表现不佳？
一个原因可能是单页应用 (SPA) 架构将所有导航都作为客户端操作通过 JavaScript 驱动。这为输入延迟创造了机会，而没有客户端导航的多页应用 (MPA) 则没有这种机会。在 MPA 中，导航到新页面会触发服务器端的完整页面加载，这不被归类为输入延迟。这可能有助于解释为什么 Astro 和 WordPress（图中所示的两个 MPA）在此指标上表现显著优于其他被测试的框架（所有 SPA）。
RebelMouse 的 Anne Burnes 对 FID 和 INP 之间的差异有精彩的阐述：
FID 量化了用户在尝试与无响应页面交互时的体验，但它只测量首次交互。根据 Google 的说法，INP 通过涵盖网站从页面首次开始加载到用户离开页面的所有交互范围，对网站的响应能力进行了更全面的测量。这种全面的测量使 INP 成为衡量网站整体响应能力比 FID 更可靠的指标。
INP 的整体性使其比 FID 更具挑战性，因为您的代码必须以一种在用户整个访问过程中（而不仅仅是首次加载时）保护响应能力的方式来实现。由于许多交互都是通过 JavaScript 完成的，这意味着您的网站必须仔细加载以优化性能。
这在移动设备上尤其困难。我们查看了行业内和我们网站网络中的少数网站，发现移动设备上的 INP 分数平均比 FID 差 35.5%。在审查同一数据集中的桌面性能时，平均仅下降 14.1%。
—— Anne Burnes，RebelMouse
这将是 2023 年值得关注的一个有趣指标，Google 仍在权衡是否将 INP 添加为官方核心 Web 指标。
Lighthouse 性能
Lighthouse 是我们可以用来衡量网站用户体验的另一个工具。HTTP 存档在模拟的移动加载条件下运行 Lighthouse。这提供了对页面加载性能更详细、更一致的分析，精确到 100 毫秒的零头。Lighthouse 不像以往那样只查看“好”与“差”的阈值和分类，而是为您提供一个更详细的、满分 100 分的性能得分。
像核心 Web 指标这样的真实用户数据仍然是衡量真实用户体验的最佳方式，您可以在下面的某些图表中看到真实体验与实验室体验的区别。然而，Lighthouse 提供的额外细节中仍有有趣的洞察可供学习。让我们来看看数据。
为了保持一致性，我们保留了上一节的原始顺序。然而，您会注意到 Remix 在 Lighthouse 上的性能表现远强于其在 CWV 评估中的表现。对此的一种解释可能是 Remix 使用 startTransition 和 requestIdleCallback 来延迟页面加载时的 React 水合（hydration）。这理论上可能在某些实验室环境（如 Lighthouse）中带来更好的性能，但代价是在其他真实世界场景中增加了首次输入延迟。
遗憾的是，Lighthouse 性能得分的中位数普遍较低。一半被测试的框架的性能中位数被认为是“差”（49 或更低），而另一半的性能中位数则“需要改进”（50-89）。没有框架达到“良好”的 90 分或更高的中位数分数。
在所有被跟踪的网站中，性能得分中位数为 34/100。为此，我们测试的框架中有一半（Astro、SvelteKit 和 Remix）确实高于互联网平均水平。
通过按百分位数细分数据，我们可以看到一些略微令人鼓舞的数字，Astro 和 SvelteKit 在第 90 或第 95 百分位数中达到了 90 分以上。然而，数据清楚地表明，所有网站和框架（包括 Astro）在实际场景中仍然难以实现良好性能。
JavaScript 的开销
我们最后想要探讨的是框架选择、性能与实际使用中 JavaScript 总有效载荷大小之间的关系。最快的框架是否也倾向于向客户端发送最少量的 JavaScript？
数据趋势很明显：发送较少 JavaScript 的网站往往性能更好。然而，影响因素太多，我们无法确凿地将这一趋势归因于 Web 框架本身的选择。可能某些框架鼓励/不鼓励 JavaScript 的方式与其他框架不同，但在得出任何结论之前还需要进行更多研究。
方法与局限性
本报告基于多个公开可用数据集编制。您可以在此处了解有关这些数据集及其方法的更多信息：HTTP 存档方法、CrUX 方法 和 CWV 技术报告方法。
由于容量限制，我们的分析仅限于每个被跟踪网站的首页。这项限制的一个好处是，每个被分析网站的用途和使用场景差异较小。然而，一个缺点是这也意味着内部页面（如 /about 和 /admin/... 页面）及其使用的技术未被分析，因此被排除在我们的分析之外。
本报告中未探讨的另一个局限性是框架年龄对测量到的 Web 性能的影响。此处测量到的较旧框架（Gatsby、Next.js、Nuxt）包含更多运行旧版本框架的遗留网站，这些网站已包含在数据集中。这造成了一种情况，即只有较新的框架（Astro、Remix、SvelteKit）才被认为是运行着过去 1-2 年内更现代的软件版本。这是我们现有数据的一个局限性，但我们希望在未来的报告中探讨这一点。