2023 年 Web 框架性能报告

简介: 2023 年 Web 框架性能报告

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

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

前言

数据

为此,查看了三个不同的公开数据集

所有数据均来自公共的、独立管理的数据集。在下面的部分中详细了解使用的方法。

框架

为了创建这份报告,决定研究六种流行的基于 JavaScript 的 Web 框架:AstroGatsbyNext.jsNuxtRemixSvelteKit。 由于 WordPress 在网络上的流行和巨大的市场份额 (43.2%),还尽可能包含了来自 WordPress 的数据。h

Core Web Vitals

Google 的 Core Web Vitals (CWV) 是一组三个标准化指标,可帮助了解用户如何体验网页。每个指标衡量用户体验的不同方面——加载速度、响应能力、视觉稳定性,它们共同量化了网站的整体性能。

谷歌的 Core Web Vitals Assessment 是一项测试,它查看所有三个指标的真实用户测量数据(来自 CrUX 数据集),以确定每个网站的总体通过/未通过等级。 一个网站要想通过,它必须在所有三个指标中都达到相关的“好”门槛。 如果任何指标未达到阈值,则该网站未通过评估。

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

222.webp.jpg当查看使用特定框架构建的所有已知网站时,Astro 和 SvelteKit 超过了所有测试网站的平均通过率 (40.5%)。 Astro 是唯一一个达到 50% 以上的网站通过谷歌 CWV 评估的框架。 Next.js 和 Nuxt 垫底,分别有大约四分之一和五分之一的网站通过了评估。

网站未能通过 Google 的核心网络生命力评估的最可能原因是什么? 我们可以按单个指标分解数据,以深入了解不同框架在 Web Vitals 方面的失败(或成功)之处。

First Input Delay (FID)

333.webp (1).jpgFirst Input Delay (FID) 即首次输入延迟,其测量从用户首次与页面交互到浏览器能够响应该交互的时间。 Google 的 CWV 评估寻找 100 毫秒或更短的 FID。任何较慢的网站都被认为需要改进并且未通过评估。

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

Cumulative Layout Shift (CLS)

444.webp.jpgCumulative Layout Shift (CLS) 意为累计布局偏移,其主要衡量页面的视觉稳定性。要通过此评估,应该将意外的布局偏移减少到接近零,从而为用户提供可靠的视觉体验。

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

所有框架在此指标中的得分都在 50% 或更高。 然而,在这个指标上得分最高的是最年轻的框架(Astro、SvelteKit 和 Remix)。在所有测试的网站上,这三者在对该指标的评估中得分超过 75%。

Largest Contentful Paint (LCP)

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

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

Interaction to Next Paint (INP)

Interaction to Next Paint (INP) 意为与与下一次绘制的交互,其是一个实验性的 web vital,用于评估整体网站响应能力,类似于 First Input Delay (FID)。 这两个指标的不同之处在于 INP 观察用户与页面进行的所有交互的延迟,而不仅仅是第一次交互。 低 INP 意味着页面始终能够快速响应所有(或绝大多数)用户交互。

虽然 INP 不是当今重要的官方 web vital,但 Chrome 团队已表示希望用 INP 取代 FID,作为更全面、更准确的响应能力衡量标准。

那么,这些框架在这个新的响应指标中表现又如何呢?

777.webp.jpg图表中最值得注意的是,对于每个框架而言,总体而言,良好的 INP 测量比首次输入延迟 (FID) 更难实现。 虽然每个测试框架的 FID 通过率都超过 80%,但没有一个框架能够在 INP 上看到相同的 80% 通过率。 Astro 最接近,通过率为 68.8%。

值得注意的是,所有跟踪网站的平均通过率高达惊人的 60.9%。 虽然 Astro 和 WordPress 在上表中看起来取得了突出的成功,但这些网站实际上仅略高于行业平均水平。 为什么许多经过测试的 Web 框架都难以满足这个指标?

一个原因可能是单页应用程序 (SPA) 架构通过 JavaScript 驱动所有导航作为客户端操作。 这为没有客户端导航的多页面应用程序 (MPA) 所没有的输入延迟创造了机会。 在 MPA 中,导航到新页面会触发来自服务器的完整页面加载,这不属于输入延迟。 这有助于解释为什么 Astro 和 WordPress(图表中的两个 MPA)在此指标上的表现明显优于其他测试框架(所有 SPA)。

FID 和 INP 之间区别如下:

FID 量化用户在尝试与无响应页面交互时的体验,但它仅衡量第一次交互。 根据谷歌的说法,INP 通过涵盖网站的整个交互范围,从页面首次开始加载到用户离开页面,对网站的响应能力进行了更全面的衡量。 这种综合测量使 INP 成为比 FID 更可靠的站点整体响应能力指标。

INP 的整体性使其比 FID 更难解决,因为代码必须以一种在整个过程中保护用户响应的方式实施,而不仅仅是在第一次加载时。 由于许多交互是通过 JavaScript 完成的,这意味着网站必须小心加载以优化性能。

这在移动设备上尤其困难。我们查看了整个行业和我们站点网络内的一些站点,发现移动 INP 分数平均比 FID 低 35.5%。 在查看同一数据集的桌面性能时,平均仅下降了 14.1%。

这将是 2023 年值得关注的一个有趣指标,谷歌继续考虑将 INP 添加为官方 Core Web Vital。

Lighthouse 性能

Lighthouse 是另一个可以用来衡量网站用户体验的工具。HTTP Archive 在模拟的移动加载条件下运行 Lighthouse。 这提供了更详细和一致的页面加载性能分析,低至 100 毫秒的几分之一秒,Lighthouse 提供更详细的性能评分(满分 100)。

像 Core Web Vitals 这样的真实用户数据仍然是真实用户体验的最佳衡量标准,可以在下面的一些图表中看到真实体验与实验体验的不同之处。 然而,仍然可以从 Lighthouse 提供的额外细节中学到有趣的见解。 让我们来看看数据。

777.webp.jpg为了保持一致性,保留了上一节中的原始顺序。 但是,可以看到,Remix 在 Lighthouse 上的表现似乎比在 CWV 评估中的表现要强得多。对此的一种解释可能是 Remix 使用 startTransitionrequestIdleCallback 来延迟页面加载时的 React 水合作用。 从理论上讲,这可以在某些实验室情况下(如 Lighthouse)转化为更好的性能,但代价是在其他真实情况下会增加首次输入延迟。

不幸的是,Lighthouse 性能得分的中值全面偏低。 一半的测试框架的中值性能被认为是“差”(49 或以下),而另一半的中值分数“需要改进”(50-89)。 没有框架达到 90+ 的“良好”中值分数。

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

888.webp.jpg通过按百分位数分解数据,可以看到一些稍微更令人鼓舞的数字,其中 Astro 和 SvelteKit 在 p90 或 p95 百分位数中达到 90+ 的分数。 然而,数据清楚地表明,所有网站和框架(包括 Astro)仍然难以在现实世界中取得良好的性能。

JavaScript 大小影响

本文最后要探索的一件事是在实际使用中框架选择、性能和总 JavaScript 大小之间的关系。最快的框架往往是那些向客户端发送最少 JavaScript 的框架吗?

999.webp.jpg数据的趋势很明显:具有较少 JavaScript 的网站往往表现更好。然而,有太多因素在起作用,无法将这种趋势与 Web 框架本身的选择联系起来。某些框架可能会以不同于其他框架的方式鼓励/阻止 JavaScript,在得出任何结论之前还需要进行更多的研究。

方法论和局限性

该报告是根据几个公开可用的数据集编制的。 由于容量限制,分析只查看每个跟踪网站的主页。此限制的一个好处是每个分析网站的目的和用例差异较小。 然而,一个缺点是这也意味着内部页面(如 /about 和 /admin/... pages)和它们使用的技术未被分析,因此被排除在分析之外。

本报告中未探讨的另一个限制是框架的年龄对测量的网络性能的影响。本文测量的旧框架(Gatsby、Next.js、Nuxt)有更长的遗留网站运行旧版本的框架,这些旧版本包含在数据集中。这造成了一种情况,即只有较新的框架(Astro、Remix、SvelteKit)可以假设在过去 1-2 年内运行其软件的更现代版本,这是现有数据的局限性。

参考:astro.build/blog/2023-w…


相关文章
|
19天前
|
机器学习/深度学习 JavaScript 前端开发
深入探索WebAssembly:提升Web应用的性能
【10月更文挑战第15天】深入探索WebAssembly:提升Web应用的性能
38 3
|
24天前
|
Java API 数据库
构建RESTful API已经成为现代Web开发的标准做法之一。Spring Boot框架因其简洁的配置、快速的启动特性及丰富的功能集而备受开发者青睐。
【10月更文挑战第11天】本文介绍如何使用Spring Boot构建在线图书管理系统的RESTful API。通过创建Spring Boot项目,定义`Book`实体类、`BookRepository`接口和`BookService`服务类,最后实现`BookController`控制器来处理HTTP请求,展示了从基础环境搭建到API测试的完整过程。
36 4
|
7天前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
81 44
|
3天前
|
SQL 安全 PHP
探索PHP的现代演进:从Web开发到框架创新
PHP是一种流行的服务器端脚本语言,自诞生以来在Web开发领域占据重要地位。从简单的网页脚本到支持面向对象编程的现代语言,PHP经历了多次重大更新。本文探讨PHP的现代演进历程,重点介绍其在Web开发中的应用及框架创新,如Laravel、Symfony等。这些框架不仅简化了开发流程,还提高了开发效率和安全性。
9 3
|
2天前
|
前端开发 JavaScript 开发工具
从框架到现代Web开发实践
从框架到现代Web开发实践
8 1
|
6天前
|
SQL 安全 PHP
探索PHP的现代演进:从Web开发到框架创新
PHP 自发布以来一直在 Web 开发领域占据重要地位,历经多次重大更新,从简单的脚本语言进化为支持面向对象编程的现代语言。本文探讨 PHP 的演进历程,重点介绍其在 Web 开发中的应用及框架创新。自 PHP 5.3 引入命名空间后,PHP 迈向了面向对象编程时代;PHP 7 通过优化内核大幅提升性能;PHP 8 更是带来了属性、刚性类型等新特性。
14 3
|
8天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
22 3
|
8天前
|
安全 数据库 开发者
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第26天】本文详细介绍了如何在Django框架下进行全栈开发,包括环境安装与配置、创建项目和应用、定义模型类、运行数据库迁移、创建视图和URL映射、编写模板以及启动开发服务器等步骤,并通过示例代码展示了具体实现过程。
26 2
|
17天前
|
机器学习/深度学习 缓存 监控
利用机器学习优化Web性能和用户体验
【10月更文挑战第16天】本文探讨了如何利用机器学习技术优化Web性能和用户体验。通过分析用户行为和性能数据,机器学习可以实现动态资源优化、预测性缓存、性能瓶颈检测和自适应用户体验。文章还介绍了实施步骤和实战技巧,帮助开发者更有效地提升Web应用的速度和用户满意度。
|
25天前
|
前端开发 JavaScript UED
构建现代Web应用:使用React框架打造单页面应用
【10月更文挑战第9天】构建现代Web应用:使用React框架打造单页面应用

热门文章

最新文章