Aurora 有何新变化？

Kara Erickson
Kara Erickson
X

Chrome 的 Aurora 计划是 Chrome 与开源 JavaScript 框架及工具之间达成的合作，旨在改善用户的网络体验。如果 Aurora 是新手，请查看我们的介绍帖子，详细了解我们的使命和方法。

自 2021 年以来，我们一直未发布过路线图，因此想与您分享我们的近期工作和 2023 年有哪些激动人心的项目。

近期项目亮点

在过去的几年里，我们一直在与 Next.js、Angular 和 Nuxt 等框架合作来优化核心网页指标。以下是自上次更新以来的一些亮点。

图片

图片通常是性能问题的根源。以下是我们与框架利益相关方一起努力的一些方法，以确保提供开箱即用的最佳实践，使开发者在使用我们合作的框架时默认以最佳方式提供映像。

Angular 图片指令

我们为 Angular 框架发布了稳定的映像指令，该指令可在 Angular 15 中使用，并特别向后移植到 13.4 和 14.3。该指令会默认启用原生延迟加载，向高优先级图片添加 fetchpriority 提示，并自动为自适应图片生成相应的 srcset 属性。

影响：在使用图片指令之前和之后，我们在 Land's End QA 环境中进行了 Lighthouse 实验室测试。在桌面设备上，他们的 Largest Contentful Paint (LCP) 中位数从 12.0 秒降至 3.0 秒，LCP 提高了 75%。

幻灯影片对比：使用原生图片代码的网站 One 与使用 Angular 图片指令的网站 Two。

如需详细了解该指令，请参阅我们的博文使用 Angular 图片指令优化图片。

next/image改版

我们还与 Next.js 团队合作更新了图片组件，以使用新的浏览器功能，例如原生延迟加载和 fetchpriority HTML 属性。Next 13 起默认提供新版本。

影响：通过切换到新版 next/image，我们的合作伙伴 Leboncoin 将某些网页的 LCP 提高了多达 60%。

网络字体

网页字体优化可能很难做到，因为比缩减字体资源的传输大小更复杂。网页字体还可以显著提高网页的累计布局偏移 (CLS) 指标，并且最大限度地减少由于字体交换而导致的布局偏移，需要投入大量的精力。幸运的是，我们与框架进行了合作，使 Web 开发者能够更轻松地完成此任务。

用于改进 Next.js、Nuxt 和 Vite 中字体回退的工具

我们在 Next 13 中推出了一项功能，用于调整网页的后备字体的尺寸，以便在网页字体加载时更好地与网页字体保持一致。这样可以减少与字体相关的 CLS。我们与 Nuxt 团队分享了我们的方法，并最终开发出 nuxtjs/fontaine 模块和 fontaine Vite 插件，这两种模块都使用同一基础算法。

影响：在使用该功能时，我们的合作伙伴 Vox Media 成功将 The Verge 上的某些网页上的 CLS 降至 0。

如需了解详情，请参阅有关生成经过改进的字体回退和字体回退框架工具的博文。

“nuxtjs/google-fonts”模块

我们与 Nuxt 团队合作，发布了一个模块来优化 Google Font 的性能。该模块会自动下载并托管 Google 字体，以避免额外的服务器往返过程，并且还支持字体内嵌选项。

第三方脚本

第三方 JavaScript 是性能问题的潜在来源，并且可能会影响 Interaction to Next Paint (INP) 等指标，因为这些脚本安排的工作可能会延迟用户互动的运行。

适用于第三方脚本的 next/script 组件

我们为 Next 12+ 构建了一个脚本组件，该组件会在水合后默认加载脚本，以防止在加载过程中阻塞关键路径。它还提供 Web Worker 模式，其中集成了 Partytown，可以将脚本完全移出主线程。

影响：在 Lighthouse 实验室测试中，CareerKarma 发现，使用 next/script component 并启用 worker 模式后，LCP 降低了 24%。

显示 LCP 改进情况的幻灯影片对比

如需了解详情，请参阅我们的博文在 Next.js 中优化第三方脚本加载。

其他

我们与框架开发者的合作伙伴关系并不止步于改进 Core Web Vitals。我们还在努力利用更多新功能，让开发者能够更轻松地开始使用先进的网络平台功能。

容器查询 polyfill

我们更新了容器查询 polyfill 以支持更多 CSS 功能并提升其性能，并努力实现 1.0 版。

如需了解详情，请参阅我们的博文 Inside the Container Query Polyfill。

极光下一步有什么计划？

2023 年至 2024 年，有一些激动人心的项目即将落实到位，旨在为框架开发者优化核心网页指标。

在接下来的一年里，我们将重点关注以下方面：

  • 适用于 Next.js 和 Nuxt 的第三方封装容器组件：封装容器组件有助于以最优方式为 LCP 和 INP 加载热门第三方库。将组件标记拖放到 DOM 中即可加载第三方代码，而不是脚本标记，框架会选择最佳加载策略。如需了解详情，请参阅 RFC。

  • Angular SSR 和 hydration 开发者体验：我们一直与 Angular 团队就 SSR 和 hydration 项目展开密切合作。我们的重点是提升开发者使用 SSR 的体验，让更多应用能够充分利用 LCP 的优势。敬请关注有关 SSR DOM 操纵功能的官方 RFC。

  • Angular 图片指令和 nuxt/image 功能：我们为 Angular 计划了许多激动人心的功能，例如自动生成预连接提示、帮助从基本 <img> 元素过渡的迁移工具、<picture> 元素支持，以及占位符。我们还将向 Nuxt 团队咨询 nuxt/image 的多项新功能。

  • INP 研究（跨框架）：随着 Interaction to Next Paint (INP) 将于 2024 年取代 First Input Delay (FID)，我们将为改进框架中的 INP 提供支持。这将涉及分析框架中 INP 问题的根本原因，并尽可能为框架用户创建内置解决方案。

  • 速度计 3：我们还将帮助实现新一代基准化分析工具“速度计”，以体现 2023 年的现代网络框架格局。

随时掌握最新动态

为我们的着陆页添加书签，及时了解来自 Aurora 团队的最新资讯、技术讲座和博文。您也可以在 Twitter 上关注我们：