【CSDN 萨德基】如前所述这类统计数据计算方法更快地优先选择架构、操控性和互联网上前述采用者新体验间的亲密关系。
书名镜像：https://astro.build/blog/2023-web-framework-performance-report/
需经容许，明令禁止转发！
重新整理 | 女王彧公司出品 | CSDN（ID：CSDNnews）随著 Web 合作开发的高速路产业发展，愈来愈多的后端图形架构再次出现在了合作开发人员的视线中。那些架构的为数众多机能往往能协助合作开发人员构筑高操控性、可扩充和更易保护的 Web 插件，提升合作开发工作效率和采用者新体验。日前，《2023 Web 架构操控性调查报告》Lizier。对当今社会盛行的 JavaScript 架构 Astro、Gatsby、Next.js、Nuxt、Remix 和 SvelteKit 展开数项分项的点评，当中在研究院有采用某一架构构筑的中文网站时，仅有 Astro 和 SvelteKit 少于了大部份试验中文网站的平均值录取率（40.5%）；在积攒产业布局偏转（CLS）分项上，新一代的架构（ Astro、SvelteKit 和 Remix ）整体表现稳定；在非常困难掌控的 LCP 上， 也是仅有 Astro 和 SvelteKit 少于了这个平均值值。由此看来，本次点评中，Astro 和 SvelteKit 整体表现极为出众。 而 INP 正式成为关键点
具体来说，企图阐释两个关键点。
在现实中，当代互联网架构的使用和操控性如何比较？
架构的优先选择是否会影响中文网站的核心互联网分项？
架构的优先选择与 JavaScript 有效负载的大小有什么亲密关系，会带来什么影响？
统计数据
为此，我们研究了三个不同的公开统计数据集。
谷歌采用者新体验调查报告 （CrUX）提供采用者新体验分项，用来说明谷歌采用者前述是如何新体验互联网上的热门目标页面；
HTTP 存档通过定期收集 Lighthouse 的操控性统计数据，对少于 15 万个中文网站的操控性展开跟踪和调查报告；
核心互联网分项技术调查报告收集了前两个统计数据集的有益见解。
大部份统计数据均由独立管理的公共统计数据集中收集，Astro 团队并没有直接测量操控性统计数据。在下面的章节中，我们可以了解到更多。
核心互联网分项
谷歌的核心互联网分项（CWV）是一组三个标准化的分项，能协助了解采用者新体验网页的方式。每个分项都衡量着不同方面的采用者新体验——加载速度、响应能力、视觉稳定性——它们共同量化了中文网站的整体操控性。
谷歌的核心互联网分项评估是一个关于真实采用者测量统计数据的测试（来自 CrUX 统计数据集），用来确定每个中文网站的总体合格/不合格等级。中文网站若想要达到合格，则必须三个分项都达到“良好”。如果有任一分项未达到阈值，则无法通过评估。
CWV 评估的独特之处在于它采用了真实的采用者统计数据和测量，能更准确地反映采用者对中文网站的长期前述新体验。而 Lighthouse 和其他实验室试验工具只能测量首页的负载，无法捕获采用中文网站的完整新体验。
通过 CWV 的中文网站百分比
在研究院有采用某一架构构筑的中文网站时，仅有 Astro 和 SvelteKit 少于了大部份试验中文网站的平均值录取率（40.5%）。这当中，只有 Astro 是唯一一个达到谷歌 CWV 评估 50% 以上架构的中文网站。Next.js 和 Nuxt 排名垫底，仅有大约 1/4 和 1/5 的中文网站通过评估。
究竟是什么原因导致一个中文网站无法通过谷歌核心互联网分项评估？我们可以按单个分项对统计数据展开细分，去深入了解在互联网分项方面的不同架构存在的问题（和经验）。
首次输入延迟 （FID）
通过 FID 的中文网站百分比
首次输入延迟（FID）是用来衡量采用者首次与页面互动到浏览器能作出反应的时间。谷歌的 CWV 评估力求的是 100 毫秒或更少的 FID。任何较慢的速度在其眼中都是需要改进且无法通过评估的。
大多数架构和中文网站都顺利通过了这一评估。在本次试验中，没有录取率低于 80% 的架构。这也说明大多数试验的中文网站都对第一次采用者交互做出了响应。
积攒产业布局偏转 （CLS）
通过 CLS 的中文网站百分比
积攒产业布局偏转（CLS）是用来衡量页面的视觉稳定性。要通过这个评估，需要将产业布局偏转减少到接近零，才能为采用者提供一个可靠的视觉新体验。
CLS 对于谷歌来说是一个
大部份的架构在这个分项上的得分都在 50% 以上。在大部份试验的中文网站中，新一代的架构（ Astro、SvelteKit 和 Remix ）在该分项上得分最高，均少于75%。
最大内容绘制 (LCP)
通过 LCP 的中文网站百分比
最大内容绘制（LCP）是最后一个核心互联网分项，在感知操控性方面可以说是最重要的。它用来衡量页面主要内容可能已加载的时间点。想要通过谷歌 CWV 评估，2.5 秒或更少的 LCP 是必要条件。
LCP 是三个分项中非常困难掌控的一个。在大部份试验的中文网站中，只有 52% 的中文网站通过了这一分项。在我们试验的六个架构中，只有 Astro 和 SvelteKit 少于了这个平均值值，其余的都低于平均值值。
即将推出? 与下一个绘制的交互（INP）
与下一个绘制的交互 （INP）是一个实验性的互联网分项，用于评估中文网站的整体响应能力，类似于首次输入延迟 （FID）。这两个分项的不同之处在于，INP 观察的是采用者与页面展开的大部份互动的延迟，而不仅仅是首次互动的延迟。低 INP 意味着页面能持续快速响应大部份或绝大部分的采用者互动。
虽然 INP 现在不是官方核心互联网，但谷歌团队已经表明，为了达到更全面、更准确的响应能力衡量标准，他们希望用 INP 取代 FID。
那么，那些架构如何与这个新的响应能力分项相提并论呢？
通过 INP 的中文网站百分比
根据图表情况，对于每个架构来说，在总体上，良好的 INP 测量比首次输入延迟（FID）更难实现。虽然每个试验的架构在 FID 上都有80%以上的录取率，但在 INP 上却没有一个能做到。唯一接近的只有 Astro，录取率为68.8%。
值得注意的是，大部份跟踪的中文网站平均值录取率都高达 60.9%。虽然 Astro 和 WordPress 在上图中看起来略胜一筹，但那些中文网站前述上只是略微高于行业平均值值。为什么许多试验的互联网架构都难以采用此分项？
当中一个原因可能是，单页插件（SPA）架构通过 JavaScript 驱动大部份的导航来作为客户端动作。这为没有客户端导航的多页应用 （MPA） 没有的输入延迟创造了机会。在 MPA 中，导航到新的页面会触发来自服务器的整页加载，这并不属于输入延迟。这可以有助于解释为什么 Astro 和 WordPress（图表中的两个 MPA ）在这个分项上的整体表现明显优于其他被试验的架构（大部份 SPA ）。
RebelMouse 的 Anne Burnes 有一篇关于 FID 和 INP 区别的文章。
FID 量化了采用者在尝试与无响应的页面互动时的新体验，但它仅测量了首次互动。根据谷歌的说法，INP 通过覆盖中文网站的整个交互范围来更全面地衡量中文网站的响应能力，从页面首次开始加载到采用者离开页面。这种全面的测量使 INP 正式成为比 FID 更可靠的中文网站整体响应能力分项。
INP 的整体性使得它比 FID 更具挑战性，因为你必须通过保护采用者在整个过程中的响应能力的方式来实当代码，而不仅仅是在第一次加载时。由于许多交互都是通过 JavaScript 完成的，因此你的中文网站必须仔细加载来优化操控性。
这在移动端更加困难。我们看了一下整个行业和我们的一些中文网站，发现移动端 INP 的平均值得分比 FID 差35.5%。在查看同一统计数据集的桌面操控性时，平均值只下降了14.1%。
– Anne Burnes, RebelMouse
心页面分项。
后端操控性
Lighthouse 是我们可以用来衡量中文网站采用者新体验的另一种工具。HTTP Archive 在模拟的移动加载条件下运行 Lighthouse，并且提供了精确到100毫秒的零头的详细和一致页面加载操控性分析。Lighthouse 提供的了更详细的操控性评分（满分 100 分），而不是 “好 “与 “坏 “的阈值和存储空间。
核心页面分项的真实采用者统计数据仍然是衡量真实采用者新体验的最佳分项，在下面的一些图表中可以看到真实新体验与实验室新体验的不同之处。然而，从 Lighthouse 提供的额外细节中仍然可以了解到一些有趣的见解。让我们来看看那些统计数据。
后端操控性得分，中值
为了保持一致性，我们保留了上一节中的原始顺序。但是，你会注意到，Remix 在 Lighthouse 上的操控性整体表现比它在 CWV 评估中要强得多。对此，一种解释可能是，Remix 采用 startTransition 和 requestIdleCallback 来推迟页面加载时的反应水化。理论上，在这类实验室情况中（如 Lighthouse ）可以转化为更快的操控性，而在其他前述情况下，则会增加首次输入延迟。
不幸的是，Lighthouse 的操控性得分中位数全面偏低。试验的架构中有一半中值被认为是“差”（49分或以下），而另一半的中值得分为“需要改进”（50-89）。没有架构达到90＋的 “良好 “中值
在大部份跟踪的中文网站中，操控性得分的中值是34/100。因此，我们试验的架构（ Astro，SvelteKit 和 Remix ）中有一半确实高于互联网平均值值。
后端操控性得分，细分
通过将统计数据按百分位数展开细分，我们可以开始看到一些稍微兴奋的数字，Astro 和 SvelteKit 在 p90 或 p95 百分位数中达到了90分以上。然而，统计数据清楚地表明，大部份中文网站和架构（包括 Astro）仍然难以在现实中达到良好的操控性。
JavaScript 的成本
最后，我们想探讨的是架构优先选择、操控性和前述采用中 JavaScript 总有效负载大小间的亲密关系。那么，最快的架构是否是向客户端发送最少的 JavaScript 的架构？
JavaScript 的中位数 KB 与通过 CWV 的中文网站百分比
统计数据的趋势很明显：JavaScript 发布较少的中文网站常常整体表现更快。然而，如前所述复杂因素，我们无法自信地将这一趋势与优先选择的互联网架构本身联系起来，可能 JavaScript 在这类架构中并不适配。因此，在得出具体结论之前，我们仍需要多研究。
方法和局限性
本调查报告是根据两个公开的统计数据集汇编而成。您可以在此了解有关那些统计数据集及其方法的更多信息：HTTP 存档方法, CrUX 方法论 和 CWV 技术调查报告方法。
由于能力有限，我们只着眼于对每个跟踪中文网站的主页展开分析。唯一好处是，每个分析中文网站的目的和采用情况的差异较小。当然，也有局限性，这也意味着内部页面及其采用的技术被我们排除分析之外。
本调查报告中没有探讨的另一个局限性是架构的采用年限对测量的互联网操控性的影响。这里测量的旧架构（Gatsby，Next.js，Nuxt）有一个较长的尾巴，即运行其架构旧版本的遗留中文网站，那些中文网站被包含在统计数据集中。这就造成了一种情况，即只有较新的架构（Astro，Remix，SvelteKit）才可以被认为是过去 1-2 年内运行的当代版本软件，这是我们现有统计数据的局限性。
总结
此调查报告一经发布，引起了不少合作开发人员的热议。有网民称：这是一篇很棒的调查报告，当中准确指出了很多警告。也有一些网民表示，在调查报告中提到的 Nuxt ，谈论的究竟是哪个版本？最好能再添加一些注释。对此，福克斯本人也做出了相关回应，并表示在今后的调查报告中加以探讨。
