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

文章插图
本报告的目的是通过真实的数据来更好地了解框架选择、性能和实际用户体验之间的关系。我们将试图回答以下几个关键问题：

现代Web框架在实际使用和性能方面如何比较？
框架选择是否会影响网站的核心Web Vitals？
框架选择与JAVAScript有效载荷大小有多相关，以及影响如何？

数据来源为了达到这个目的，我们查看了三个不同的公开可用数据集：

Chrome用户体验报告（CrUX）为Chrome用户在Web上体验流行目的地的用户体验度量提供了指标。
HTTP存档跟踪报告了超过1500万个网站的性能，通过定期收集Lighthouse性能数据来跟踪。
核心Web Vitals技术报告汇集了前两个数据集的有用洞察力。

所有数据都是从公开、独立管理的数据集中收集的。Astro团队没有直接测量任何性能数据。在下面的部分中了解更多关于我们的方法论。
框架为了创建这份报告，我们决定研究六个流行的基于 JavaScript 的 Web 框架：Astro、Gatsby、Next.js、Nuxt、Remix 和 SvelteKit 。我们还包括了 wordPress/ target=_blank class=infotextkey>WordPress 的数据，因为它在 Web 上拥有很高的流行度和大的市场份额（43.2%）。
由于我们选择的数据集中这些新颖有趣的框架在现实世界中的使用不够广泛，因此我们不得不将它们排除在外，但我们希望在下一份报告中能够包括更多的框架。
Core Web Vitals谷歌的核心Web Vitals（CWV）是一组三个标准化指标，可帮助你了解用户如何体验Web页面。每个指标测量用户体验的不同方面——加载速度、响应速度、视觉稳定性——它们共同量化了网站的整体性能。
谷歌的核心Web Vitals评估是一项测试，它查看了所有三个指标的真实用户测量数据（来自CrUX数据集），以确定每个网站的总体通过/失败评分。对于一个网站要通过评估，它必须在所有三个指标中达到“良好”的相关阈值。如果任何一个指标未达到阈值，则网站未通过评估。
核心Web Vitals评估在使用真实世界的用户数据和测量方面是独特的。这使它更准确地反映了用户实际上如何体验网站，特别是在较长的会话中。Lighthouse和其他实验室测试工具只能测量第一页的加载，无法捕捉使用网站的完整体验。

文章插图
当查看使用特定框架构建的所有已知网站时， Astro和SvelteKit的平均通过率超过了所有测试的网站的平均通过率（40.5％），而其他框架则没有。Astro是唯一一个达到50％以上通过谷歌CWV评估的框架。Next.js和Nuxt排名最低，大约每4个和每5个网站中只有一个通过了评估。
导致网站无法通过google核心Web Vitals评估的最可能原因是什么？我们可以按照每个指标来细分数据，以了解不同框架在Web Vitals方面的不同挑战（和成功）。
首次输入延迟（FID）

文章插图
首次输入延迟（FID）是指从用户首次与页面交互到浏览器能够响应该交互的时间。谷歌的CWV评估要求FID不超过100毫秒。任何速度较慢的都被认为需要改进并未通过评估。
大多数框架都能轻松通过此测试，超过90％或更多的网站通过了评估。没有任何框架在此测试中的通过率低于80％。这意味着大多数测试的网站对第一个用户交互做出了响应。
累积布局偏移（CLS）

文章插图
累积布局偏移（CLS）衡量页面上的视觉稳定性。要通过此评估，我们应该将意外的布局偏移减少到接近零，以为用户提供可靠的视觉体验。
CLS是谷歌将其作为三个核心Web Vitals之一的有趣指标，因为它与速度或响应性并不严格相关。它的包含突显了在测量Web上的用户体验的整体质量时，重要性不仅在于性能方面。
所有框架在此指标中得分50％或更高。然而，年轻的框架（Astro ， SvelteKit和Remix）在此指标上得分最高。所有三个框架在测试的所有网站上，此指标的评估得分都超过了75％。