Aurora の新機能

Kara Erickson
Kara Erickson
X

Chrome の Aurora イニシアチブは、Chrome とオープンソースの JavaScript フレームワークおよびツールが連携し、ウェブ上のユーザー エクスペリエンスを向上させる取り組みです。Aurora を初めて使用する場合は、紹介記事で Google のミッションと手法の詳細をご覧ください。

Google は 2021 年以降ロードマップを公開していませんが、ここでは、Google のこれまでの実績と、2023 年に予定されている画期的なプロジェクトをいくつかご紹介します。

最近のプロジェクトのハイライト

Google は過去数年間、Next.js、Angular、Nuxt などのフレームワークと提携し、Core Web Vitals を最適化してきました。前回の更新以降のハイライトを以下にご紹介します。

画像

画像が原因でパフォーマンスの問題が発生することがよくあります。ここでは、Google が提携しているフレームワークを使用するときにデベロッパーがデフォルトで最適なイメージを配信できるよう、ベスト プラクティスをすぐに利用できるようにフレームワークの関係者とともに追求してきました。

Angular 画像に関するディレクティブ

Angular 15 で利用可能な Angular フレームワークの安定版イメージ ディレクティブが公開され、13.4 と 14.3 にバックポートされました。このディレクティブは、デフォルトでネイティブ遅延読み込みを有効にし、優先度の高い画像に fetchpriority ヒントを追加し、レスポンシブ画像に適した srcset 属性を自動的に生成します。

影響: Land's End の QA 環境で、イメージ ディレクティブの使用前と使用後に Lighthouse ラボテストを実施しました。パソコンでは、Largest Contentful Paint（LCP）の中央値が 12.0 秒から 3.0 秒に低下し、LCP は 75% 改善しました。

フィルムストリップの比較: ネイティブ イメージタグを使用したウェブサイト 1 と、Angular 画像ディレクティブを使用したウェブサイト 2。

このディレクティブの詳細については、ブログ投稿 Angular 画像ディレクティブを使用した画像の最適化をご覧ください。

next/image を刷新

また、Next.js チームと協力して画像コンポーネントを更新し、ネイティブ遅延読み込みや fetchpriority HTML 属性などの新しいブラウザ機能を使用できるようにしました。Next 13 から、デフォルトで新しいバージョンをご利用いただけます。

効果 : Google のパートナーである Leboncoin は、新しいバージョンの next/image に切り替えることで、一部のページの LCP を最大 60% 改善できました。

ウェブフォント

ウェブフォントの最適化は、フォント リソースの転送サイズを減らすこと以上に複雑なため、適切に行うのは難しい場合があります。ウェブフォントはページの Cumulative Layout Shift（CLS）指標にも大きく影響する可能性があり、フォントの入れ替えによるレイアウト シフトを最小限に抑えるにはかなりの労力が必要です。幸いなことに、Google はフレームワークと提携して、ウェブ デベロッパーがこのタスクをさらに簡単に行えるようにしました。

Next.js、Nuxt、Vite のフォント フォールバックを改善するツール

読み込み時にページの代替フォントのサイズをウェブフォントに合わせて調整する Next 13 の機能をリリースしました。これにより、フォント関連の CLS が削減されます。この手法を Nuxt チームと共有し、それが nuxtjs/fontaine モジュールと fontaine Vite プラグインのアイデアとなりました。どちらも基盤となる同じアルゴリズムを使用しています。

影響: Google のパートナーである Vox Media は、この機能を使用して、一部のページで The Verge の CLS を 0 まで下げることができました。

詳しくは、改善されたフォント フォールバックの生成とフォント フォールバック フレームワーク ツールに関するブログ投稿をご覧ください。

nuxtjs/google-fonts モジュール

Google は Nuxt チームと協力して、Google Font のパフォーマンスを最適化するためのモジュールをリリースしました。このモジュールは、余分なサーバー ラウンド トリップを避けるために Google フォントを自動的にダウンロードして自己ホストします。また、フォントのインライン オプションもサポートします。

第三者スクリプト

サードパーティの JavaScript は、パフォーマンスの問題の原因となる可能性があり、Interaction to Next Paint（INP）などの指標に影響する可能性があります。これらのスクリプトの処理によって、ユーザー操作の実行が遅れる可能性があるためです。

サードパーティ スクリプト用の next/script コンポーネント

読み込み時にクリティカル パスがブロックされないように、Next 12 以降用にデフォルトでハイドレーション後にスクリプトを読み込むスクリプト コンポーネントを作成しました。また、Partytown を統合してスクリプトをメインスレッドから完全に移動するウェブ ワーカー モードも備えています。

効果: CareerKarma の Lighthouse ラボテストでは、ワーカーモードを有効にした next/script component を使用して LCP が 24% 減少しました。

LCP の改善を示すフィルム ストリップの比較

詳しくは、Next.js でのサードパーティ スクリプトの読み込みの最適化に関するブログ投稿をご覧ください。

その他

フレームワーク デベロッパーとのパートナーシップは、ウェブに関する主な指標の改善にとどまりません。また、より多くの新機能を活用し、デベロッパーが最先端のウェブ プラットフォーム機能をより簡単に使い始められるようにすることにも取り組んでいます。

コンテナクエリのポリフィル

より多くの CSS 機能をサポートするようにコンテナクエリのポリフィルを更新し、パフォーマンスを向上させ、1.0 のリリースに向けて取り組みました。

詳しくは、Google のブログ投稿 Inside the Container Query Polyfill をご覧ください。

オーロラの次のステップは？

2023 年から 2024 年にかけて、フレームワーク デベロッパー向けに Core Web Vitals を最適化するための多数のエキサイティングなプロジェクトが進行中です。

来年は、以下の項目に重点を置いています。

  • Next.js と Nuxt のサードパーティ ラッパー コンポーネント: ラッパー コンポーネントを使用すると、一般的なサードパーティ ライブラリを LCP と INP に最適な方法で読み込むことができます。スクリプトタグの代わりにコンポーネント タグを DOM にドロップして第三者を読み込むと、フレームワークが最適な読み込み方法を選択します。詳細については、RFC をご覧ください。

  • Angular SSR とハイドレーションのデベロッパー エクスペリエンス: Google は、SSR とハイドレーション プロジェクトにおいて Angular チームと緊密に連携してきました。Google が重点的に取り組んでいるのは、SSR を使用するデベロッパー エクスペリエンスをアップグレードすることで、より多くのアプリケーションで LCP のメリットを享受できるようにすることです。SSR の DOM 操作機能に関する公式の RFC にご期待ください。

  • Angular 画像ディレクティブと nuxt/image 機能: Angular には、事前接続ヒントの自動生成、基本的な <img> 要素からの移行を支援する移行ツール、<picture> 要素のサポート、プレースホルダなど、数多くの魅力的な機能が計画されています。また、nuxt/image のいくつかの新機能については、Nuxt チームと相談していく予定です。

  • INP 研究（クロス フレームワーク）: 2024 年には First Input Delay（FID）の代わりに Interaction to Next Paint（INP）が使われるため、フレームワークの INP を改善するためのサポートを強化しています。これには、フレームワークにおける INP の問題の根本原因の分析と、可能であればフレームワーク ユーザー向けの組み込みソリューションの作成が含まれます。

  • スピードメーター 3: Google は、2023 年の最新のウェブ フレームワークを表現する次世代のベンチマーク ツール SpeedMeter の実装も支援しています。

最新情報の入手

Google のランディング ページをブックマークして、Aurora チームからの最新ニュース、テックトーク、ブログ投稿をご確認ください。Twitter でもフォローしています。