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。](https://developer.chrome.google.cn/static/blog/aurora-update-2023/image/filmstrip-comparison-web-a5eb08a51cf7e.png?authuser=9&hl=hu)
如需详细了解该指令,请参阅我们的博文使用 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 改进情况的幻灯影片对比](https://developer.chrome.google.cn/static/blog/aurora-update-2023/image/film-strip-comparison-sho-d70d368ef53f8.png?authuser=9&hl=hu)
如需了解详情,请参阅我们的博文在 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 问题的根本原因,并尽可能为框架用户创建内置解决方案。
随时掌握最新动态
为我们的着陆页添加书签,及时了解来自 Aurora 团队的最新资讯、技术讲座和博文。您也可以在 Twitter 上关注我们:
- Kara Erickson - karaforthewin@
- Houssein Djirdeh - hdjirdeh@
- Katie Hempenius - katiehempenius@
- Alex Castle - atcastle@
- Gerald Monaco - devknoll@
- Janicklas Ralph James - janicklas@
- Thorsten Kober - tckober@