最新的 web 框架性能报告出炉( 二 ) _框架

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

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

文章插图
通过 FID 的站点百分比
首次输入延迟（FID）是用来衡量用户首次与页面互动到浏览器能够作出反应的时间。谷歌的 CWV 评估力求的是 100 毫秒或更少的 FID 。任何较慢的速度在其眼中都是需要改进且无法通过评估的。
大多数框架和网站都顺利通过了这一评估。在此次测试中，没有通过率低于 80% 的框架。这也说明大多数测试的网站都对第一次用户交互做出了响应。

文章插图

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

文章插图

最大内容绘制（LCP）是最后一个核心网络指标，在感知性能方面可以说是最重要的。它用来衡量页面主要内容可能已加载的时间点。想要通过谷歌 CWV 评估，2.5 秒或更少的 LCP 是必要条件。
LCP 是三个指标中最难掌握的一个。在所有测试的网站中，只有 52% 的网站通过了这一指标。在我们测试的六个框架中，只有 Astro 和 SvelteKit 超过了这个平均水平，其余的都低于平均水平。
即将推出与下一个绘制的交互（INP）
Interaction to Next Paint (INP) 意为与与下一次绘制的交互，其是一个实验性的 web vital，用于评估整体网站响应能力，类似于 First Input Delay (FID) 。这两个指标的不同之处在于 INP 观察用户与页面进行的所有交互的延迟，而不仅仅是第一次交互。低 INP 意味着页面始终能够快速响应所有（或绝大多数）用户交互。
虽然 INP 不是当今重要的官方 web vital，但 Chrome 团队已表示希望用 INP 取代 FID，作为更全面、更准确的响应能力衡量标准。
那么，这些框架在这个新的响应指标中表现又如何呢？

文章插图

根据图表情况，对于每个框架来说，在总体上，良好的 INP 测量比首次输入延迟（FID）更难实现。虽然每个测试的框架在 FID 上都有80%以上的通过率，但在 INP 上却没有一个能做到。唯一接近的只有 Astro，通过率为68.8% 。
值得注意的是，所有跟踪网站的平均通过率高达惊人的 60.9% 。虽然 Astro 和 WordPress 在上表中看起来取得了突出的成功，但这些网站实际上仅略高于行业平均水平。为什么许多经过测试的 Web 框架都难以满足这个指标？
一个原因可能是单页应用程序 (SPA) 架构通过 JavaScript 驱动所有导航作为客户端操作。这为没有客户端导航的多页面应用程序 (MPA) 所没有的输入延迟创造了机会。在 MPA 中，导航到新页面会触发来自服务器的完整页面加载，这不属于输入延迟。这有助于解释为什么 Astro 和 WordPress（图表中的两个 MPA）在此指标上的表现明显优于其他测试框架（所有 SPA）。