Next Paint とのインタラクションは公式の Core Web Vitals です 🚀?

First Input Delay に代わって、Interaction to Next Paint が Core Web Vitals の安定版指標になりました。

今日、目標達成です!長年にわたる取り組みを経て、いよいよ [Interaction to Next Paint(INP)] が安定した Core Web Vitals の指標になる準備が整いました。これにより、インタラクションの応答性の測定方法が大きく前進し、First Input Delay(FID)の欠点の多くが解消されています。

<ph type="x-smartling-placeholder">
</ph> Web Vitals プログラムにおける INP の 3 つのフェーズにおける進捗状況を示す図。2022 年 5 月より、INP は試験運用版の指標として Chrome に導入されました。2023 年 5 月、INP が 2024 年 3 月に Core Web Vitals になることが発表されました。そしてこのたび、FID に代わるウェブに関する主な指標として、INP が正式に導入されます。 <ph type="x-smartling-placeholder">
</ph> Interaction to Next Paint(INP)プロモーションのタイムライン。

この投稿では、本日の変更点を簡単にまとめました。また、Chrome ツールの FID のサポート終了と削除の具体的なスケジュールを設定し、INP の問題を見つけて修正するために役立つリソースも紹介します。

本日の変更点

Chrome 側では、すべての Core Web Vitals ツールに INP の安定ステータスが反映されるようになります(該当する場合)。たとえば、PageSpeed Insights、CrUX ダッシュボード、Web Vitals 拡張機能などのツールでは、Core Web Vitals の 3 つの指標から INP がより目立つように表示されます。PageSpeed Insights では、Core Web Vitals の評価ロジックで FID ではなく INP のパフォーマンスが評価されます。対応する Search Console の変更について詳しくは、検索チームのブログ投稿をご覧ください。

さらに、一部のツールでは、本日より FID のサポート終了のお知らせが、Core Web Vitals の指標ではなくなったため、今後削除されるという警告が表示される可能性があります。以下の FID サポート終了タイムラインのセクションでは、FID から完全に移行するために知っておくべき日付について説明しています。

FID のサポート終了のタイムライン

FID が Core Web Vitals の指標に置き換わったことを受け、Chrome は FID のサポートを正式に終了します。これに伴い、Chrome ツールで FID の提供が保証されなくなり、デベロッパーは 2024 年 9 月 9 日までに INP に移行する必要があります。

これは、Chrome ユーザー エクスペリエンス レポート(CrUX)または PageSpeed Insights API をご利用のお客様にとって特に重要です。これらの API のいずれかからの FID データを処理するアプリケーションは、サービスの中断や中断を避けるため、9 月 9 日までに INP に移行する必要があります。誤解のないように言うと、これは最新バージョンの API では互換性を破る変更であり、メジャー バージョン番号の急増はありません

INP を最適化するためのリソース

INP を初めて使用する場合でも、応答性のプロである場合でも、INP 最適化リソースのコレクションは、探しているものを見つけるのに最適な出発点です。この常時掲載のドキュメントには、指標そのものの定義から、ローカルや実際のユーザーで指標を測定する手法、さまざまなユースケースを最適化するための実践的なアドバイス、ガイダンスの実例を示す実際のケーススタディのリストなど、あらゆる内容が含まれています。

これらのドキュメントを使用して、サイトでの INP の問題を見つけて修正するための一般的なワークフローを以下に示します。

  1. 正規の INP ドキュメントで、INP がユーザー操作に対する応答性を測定する方法を確認します。

  2. 実際のユーザーデータを確認して、サイトの INP パフォーマンスを評価します。良好と見なされるには、INP エクスペリエンスの少なくとも 75% が 200 ミリ秒未満でユーザー入力に応答する必要があります。すでにサイトに良い INP があっても、無理する必要はありません。

  3. 必要に応じて、ユーザー エクスペリエンスに関する診断情報を収集するようにサイトをインストルメント化します。これは、ユーザーが操作したページ要素や処理が遅い理由などの重要なメタデータ、その他の有用なデータです。全体として、この情報は、改善の余地が最も大きい部分を把握するのに役立ちます。

  4. Chrome DevTools を使用して、遅い操作をローカルで再現する。これにより、内部で何が起きていて、どのようなコードに問題があるかを正確に把握できます。

  5. コードを最適化して、ユーザー インタラクションを処理する際の作業をできる限り少なくします。

  6. 変更をローカルで測定し、実際のユーザー エクスペリエンスをモニタリングして、INP のパフォーマンスが急速に向上していることを確認します。

このガイダンスが、INP の最適化へのお役に立てば幸いです。途中で問題が発生した場合は、いつでも Stack Overflow に interaction-to-next-paint タグを付けて質問を投稿してください。

INP を Core Web Vitals としてリリースしてから長い間、より優れた応答性の指標の構築について投稿しました。2021 年の最初の投稿を振り返りましょう。それ以来、Google はコミュニティからのフィードバックをすべて考慮し、サービスが行き届いていないユーザー エクスペリエンスを改善し、最終的にはウェブの改善につながると確信できる指標を開発しました。この指標を作り上げるのにご協力いただき、また、対応状況の改善にご協力いただき、ありがとうございます。