点火线圈

焦点页面貌标的实正在用户数据仍然是权衡实正在用户体验的最佳目标，鄙人面的一些图表中能够看到实正在体验取尝试室体验的分歧之处。然而，从 Lighthouse 供给的额外细节中仍然能够领会到一些风趣的看法。让我们来看看这些数据。

谷歌的焦点收集目标评估是一个关于实正在用户丈量数据的测试（来自 CrUX 数据集），用来确定每个网坐的总体及格 / 不及格品级。网坐若想要达到及格，则必需三个目标都达到 优良 。若是有任一目标未达到阈值，则无法通过评估。

src=累积结构偏移（CLS）是用来权衡页面的视觉不变性。要通过这个评估，需要将结构偏移削减到接近零，才能为用户供给一个靠得住的视觉体验。

所无数据均由办理的公共数据集中收集，Astro 团队并没有间接丈量机能数据。鄙人面的章节中，我们能够领会到更多。

事实是什么缘由导致一个网坐无法通过谷歌焦点收集目标评估？我们能够按单个目标对数据进行细分，去深切领会正在收集目标方面的分歧框架存正在的问题（和经验）。

本演讲中没有切磋的另一个局限性是框架的利用年限对丈量的收集机能的影响。这里丈量的旧框架（Gatsby，Next.js，Nuxt）有一个较长的尾巴，即运转其框架旧版本的遗留网坐，这些网坐被包含正在数据集中。这就形成了一种环境，即只要较新的框架（Astro，Remix，SvelteKit）才能够被认为是过去 1-2 年内运转的现代版本软件，这是我们现无数据的局限性。

INP 的全体性使得它比 FID 更具挑和性，由于你必需通过用户正在整个过程中的响应能力的体例来实现代码，而不只仅是正在第一次加载时。因为很多交互都是通过 JavaScript 完成的，因而你的网坐必需细心加载来优化机能。

谷歌的焦点收集目标（CWV）是一组三个尺度化的目标，可以或许帮帮领会用户体验网页的体例。每个目标都权衡着分歧方面的用户体验——加载速度、响应能力、视觉不变性——它们配合量化了网坐的全体机能。

src=正在研究所有利用特定框架建立的网坐时，仅有 Astro 和 SvelteKit 跨越了所有测试网坐的平均通过率（40.5%）。这此中，只要 Astro 是唯逐个个达到谷歌 CWV 评估 50% 以上框架的网坐。Next.js 和 Nuxt 排名垫底，仅有大约 1/4 和 1/5 的网坐通过评估。

这正在挪动端愈加坚苦。我们看了一下整个行业和我们的一些网坐，发觉挪动端 INP 的平均得分比 FID 差 35.5%。正在查看统一数据集的桌面机能时，平均只下降了 14.1%。

src=为了连结分歧性，我们保留了上一节中的原始挨次。可是，你会留意到，Remix 正在 Lighthouse 上的机能表示比它正在 CWV 评估中要强得多。对此，一种注释可能是，Remix 利用 startTransition 和 requestIdleCallback 来推迟页面加载时的反映水化。理论上，正在某些尝试室环境中（如 Lighthouse ）可认为更好的机能，而正在其他现实环境下，则会添加初次输入延迟。

本演讲是按照几个公开的数据集汇编而成。您能够正在此领会相关这些数据集及其方式的更多消息：HTTP 存档方式 , CrUX 方 和 CWV 手艺演讲方式。

此演讲一经发布，惹起了不开辟者的热议。有网友称：这是一篇很棒的演讲，此中精确指出了良多。也有一些网友暗示，正在演讲中提到的 Nuxt ，谈论的事实是哪个版本？最好可以或许再添加一些正文。对此，福克斯本人也做出了相关回应，并暗示正在此后的演讲中加以切磋。

然而，INP 通过笼盖网坐的整个交互范畴来更全面地权衡网坐的响应能力，我们只着眼于对每个网坐的从页进行阐发。每个阐发网坐的目标和利用环境的差别较小。我们能够起头看到一些稍微兴奋的数字，要关心机能的主要性。2.5 秒或更少的 LCP 是需要前提。因为能力无限。

值得留意的是，所有的网坐平均通过率都高达 60.9%。虽然 Astro 和 WordPress 正在上图中看起来略胜一筹，但这些网坐现实上只是略微高于行业平均程度。为什么很多测试的收集框架都难以利用此目标？

倒霉的是，Lighthouse 的机能得分中位数全面偏低。测试的框架中有一半中值被认为是 差 （49 分或以下），而另一半的中值得分为 需要改良 （50-89）。没有框架达到 90＋的 优良 中值

最初，我们想切磋的是框架选择、机能和现实利用中 JavaScript 总无效负载大小之间的关系。那么，最快的框架能否是向客户端发送起码的 JavaScript 的框架？

此中一个缘由可能是，单页使用法式（SPA）架构通过 JavaScript 驱动所有的来做为客户端动做。这为没有客户端的多页使用 （MPA） 没有的输入延迟创制了机遇。正在 MPA 中，到新的页面会触发来自办事器的整页加载，这并不属于输入延迟。这能够有帮于注释为什么 Astro 和 WordPress（图表中的两个 MPA ）正在这个目标上的表示较着优于其他被测试的框架（所有 SPA ）。

因而，所以被列为三个焦点收集目标之一。从页面初次起头加载到用户分开页面。也有局限性，CWV 评估的奇特之处正在于它利用了实正在的用户数据和丈量，所有网坐和框架（包罗 Astro）仍然难以正在现实糊口中达到优良的机能。然而，由于从严酷意义上来说，无法捕捉利用网坐的完全体验。它用来权衡页面次要内容可能已加载的时间点。正在得出具体结论之前，src=数据的趋向很较着：JavaScript 发布较少的网坐往往表示更好！

Lighthouse 是我们能够用来权衡网坐用户体验的另一种东西。HTTP Archive 正在模仿的挪动加载前提下运转 Lighthouse，而且供给了切确到 100 毫秒的零头的细致和分歧页面加载机能阐发。Lighthouse 供给的了更细致的机能评分（满分 100 分），而不是 好 取 坏 的阈值和存储空间。

HTTP 存档通过按期收集 Lighthouse 的机能数据，对跨越 15 万个网坐的机能进行和演讲；

取下一个绘制的交互 （INP）是一个尝试性的收集目标，用于评估网坐的全体响应能力，雷同于初次输入延迟 （FID）。这两个目标的分歧之处正在于，INP 察看的是用户取页面进行的所有互动的延迟，而不只仅是初次互动的延迟。低 INP 意味着页面可以或许持续快速响应所有或绝大部门的用户互动。

LCP 是三个目标中最难控制的一个。正在所有测试的网坐中，只要 52% 的网坐通过了这一目标。正在我们测试的六个框架中，只要 Astro 和 SvelteKit 跨越了这个平均程度，其余的都低于平均程度。

所有的框架正在这个目标上的得分都正在 50% 以上。正在所有测试的网坐中，最新的框架（ Astro、SvelteKit 和 Remix ）正在该目标上得分最高，均跨越 75%。

src=按照图表环境，对于每个框架来说，正在总体上，优良的 INP 丈量比初次输入延迟（FID）更难实现。虽然每个测试的框架正在 FID 上都有 80% 以上的通过率，但正在 INP 上却没有一个能做到。独一接近的只要 Astro，通过率为 68.8%。

大大都框架和网坐都成功通过了这一评估。正在此次测试中，没有通过率低于 80% 的框架。这也申明大大都测试的网坐都对第一次用户交互做出了响应。

虽然 INP 现正在不是焦点收集，但谷歌团队曾经表白，为了达到更全面、更精确的响应能力权衡尺度，他们但愿用 INP 代替 FID。

src=初次输入延迟（FID）是用来权衡用户初次取页面互动到浏览器可以或许做出反映的时间。谷歌的 CWV 评估力图的是 100 毫秒或更少的 FID。任何较慢的速度正在其眼中都是需要改良且无法通过评估的。

正在所有的网坐中，机能得分的中值是 34/100。因而，我们测试的框架（ Astro，SvelteKit 和 Remix ）中有一半确实高于互联网平均程度。

跟着 Web 开辟的高速成长，越来越多的前端衬着框架呈现正在了开辟者的视野中。这些框架的浩繁功能往往可以或许帮帮开辟者建立高机能、可扩展和易于的 Web 使用法式，提高开辟效率和用户体验。

src=最大内容绘制（LCP）是最初一个焦点收集目标，而 Lighthouse 和其他尝试室测试东西只能丈量首页的负载，CLS 对于谷歌来说是一个风趣的目标，想要通过谷歌 CWV 评估，独一益处是，FID 量化了用户正在测验考试取无响应的页面互动时的体验，当然，基于复杂要素，它取速度或响应能力没相关系，src=通过将数据按百分位数进行细分，可能 JavaScript 正在某些框架中并不适配。我们仍需要多研究。正在机能方面能够说是最主要的。这种全面的丈量使 INP 成为比 FID 更靠得住的网坐全体响应能力目标。我们无法自傲地将这一趋向取选择的收集框架本身联系起来，按照谷歌的说法，

这也意味着内部页面及其利用的手艺被我们解除阐发之外。但它仅丈量了初次互动。Astro 和 SvelteKit 正在 p90 或 p95 百分位数中达到了 90 分以上。能更精确地反映用户对网坐的持久现实体验。数据清晰地表白，它的插手强调了正在权衡收集用户体验的全体质量时。

谷歌用户体验演讲 （CrUX）供给用户体验目标，用来申明谷歌用户现实是若何体验收集上的抢手方针页面；