2023 年 Web 框架性能报告 _框架

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

现代 Web 框架在现实世界的使用和性能方面如何比较？
框架选择会影响网站的 Core Web Vitals 吗？
框架选择与 JAVAScript 大小有多大关系，有什么影响？

前言数据为此，查看了三个不同的公开数据集

Chrome 用户体验报告 (CrUX) [1]：提供了有关真实 Chrome 用户如何体验 web 上热门应用的用户体验指标。
HTTP Archive[2] ：通过定期收集 Lighthouse 性能数据来跟踪和报告超过 1500 万个网站的性能。
Core Web Vitals 技术报告[3]：从前两个数据集中收集了有用的见解。

所有数据均来自公共的、独立管理的数据集。在下面的部分中详细了解使用的方法。
框架为了创建这份报告，决定研究六种流行的基于 JavaScript 的 Web 框架：Astro、Gatsby、Next.js、Nuxt、Remix 和 SvelteKit 。由于 wordPress/ target=_blank class=infotextkey>WordPress 在网络上的流行和巨大的市场份额 (43.2%)，还尽可能包含了来自 WordPress 的数据。
Core Web Vitalsgoogle 的 Core Web Vitals (CWV) 是一组三个标准化指标，可帮助了解用户如何体验网页。每个指标衡量用户体验的不同方面——加载速度、响应能力、视觉稳定性，它们共同量化了网站的整体性能。
谷歌的 Core Web Vitals Assessment 是一项测试，它查看所有三个指标的真实用户测量数据（来自 CrUX 数据集），以确定每个网站的总体通过/未通过等级。一个网站要想通过，它必须在所有三个指标中都达到相关的“好”门槛。如果任何指标未达到阈值，则该网站未通过评估。
CWV 评估在使用真实世界的用户数据和测量方面是独一无二的。这使得它可以更准确地反映用户实际体验网站的方式，尤其是在较长的会话期间。Lighthouse 和其他测试工具只能测量首页加载，无法捕捉使用网站的完整体验。

文章插图
通过 CWV 的站点百分比
当查看使用特定框架构建的所有已知网站时，Astro 和 SvelteKit 超过了所有测试网站的平均通过率 (40.5%) 。Astro 是唯一一个达到 50% 以上的网站通过谷歌 CWV 评估的框架。Next.js 和 Nuxt 垫底，分别有大约四分之一和五分之一的网站通过了评估。
网站未能通过 Google 的核心网络生命力评估的最可能原因是什么？我们可以按单个指标分解数据，以深入了解不同框架在 Web Vitals 方面的失败（或成功）之处。
First Input Delay (FID)

文章插图
通过 FID 的站点百分比
First Input Delay (FID) 即首次输入延迟，其测量从用户首次与页面交互到浏览器能够响应该交互的时间。Google 的 CWV 评估寻找 100 毫秒或更短的 FID 。任何较慢的网站都被认为需要改进并且未通过评估。
【2023 年 Web 框架性能报告】大多数框架都轻松通过这个测试，超过 90% 或更多的网站通过了评估。没有框架在此测试中的通过率低于 80% 。这意味着大多数被测试的网站都会对第一次用户交互做出响应。
Cumulative Layout Shift (CLS)

文章插图
通过 CLS 的站点百分比
Cumulative Layout Shift (CLS) 意为累计布局偏移，其主要衡量页面的视觉稳定性。要通过此评估，应该将意外的布局偏移减少到接近零，从而为用户提供可靠的视觉体验。
CLS 是 Google 将其作为三个 Core Web Vitals 之一的有趣指标，因为它与速度或响应能力并不严格相关。它的包含强调了在衡量网络用户体验的整体质量时，不仅仅关注性能的重要性。
所有框架在此指标中的得分都在 50% 或更高。然而，在这个指标上得分最高的是最年轻的框架（Astro、SvelteKit 和 Remix）。在所有测试的网站上，这三者在对该指标的评估中得分超过 75% 。
Largest Contentful Paint (LCP)

文章插图
通过 LCP 的站点百分比
Largest Contentful Paint (LCP) 意为最大内容绘制，其是三个 Core Web Vitals 中的最后一个，在感知性能方面可以说是最重要的。它衡量页面主要内容可能加载的时间点。通过 Google 的 CWV 评估需要 2.5 秒或更短的 LCP，任何较慢的网站都被认为需要改进并且未通过评估。