Interaction to Next Paint（INP）ツールのサポート

Brendan Kenny
Brendan Kenny
X GitHub
Elizabeth Sweeny
Elizabeth Sweeny
X GitHub

新しい応答性の指標である Interaction to Next Paint（INP）のツールサポートの第 1 フェーズが開始されました。指標自体の詳細については、公式の INP 指標ガイドをご覧ください。

推奨される測定

INP を測定する目的は、ユーザー入力に対するページの反応速度を把握することです。現実的なデータを得る唯一の方法は、現場のデータを使用して、サイトにアクセスした実際のユーザーに対してページがどのように応答しているかを測定することです。

ラボで INP を測定すると、イベントのタイミングと最適化が必要な場所をより正確に把握できます。Lab ツールはページを自動的に操作しないため、測定中に手動で入力するか、Puppeteer などの自動化ツールでスクリプトを作成する必要があります。一般的なユーザー ジャーニーから重要なインタラクションを見つけたら、試して問題を特定したり、スクリプトを作成したり、CI テストに組み込んで回帰を防いだりできます。

実際のユーザーが経験していることを知る（フィールド データ）

PageSpeed Insights にアクセスする

PageSpeed Insights は、Chrome ユーザー エクスペリエンス（CrUX）レポート API からフィールド データを取得し、過去 28 日間のページとオリジンのパフォーマンスのスナップショットを提供します。このデータには INP が含まれるようになりました。

フィールドの Core Web Vitals に関する PSI レポート。新しい INP 指標の値を示すハイライト表示されたセクションと、速い、平均的、遅いバケットでの位置を示すマーカー

PageSpeed Insights で試すことができます。

項目から独自の INP 値を収集する

サイトの INP データをご自身で収集する場合、最も簡単な方法は web-vitals ライブラリを使用することです。このライブラリのベータ版リリースでは、INP が完全にサポートされています。

import {onINP} from 'web-vitals';

onINP(({value}) => {
  // Log the value to the console, or send it to your analytics provider.
  console.log(value);
});

詳しくは、web-vitals と DevTools コンソールで測定する方法をご覧ください。

Chrome 拡張機能「Web Vitals」

ウェブに関する主な指標拡張機能では、ユーザーのページ エクスペリエンスの概要（CrUX API から取得）と、ウェブに関する主な指標のリアルタイム値と、ページへの現在のアクセスに関する主要な指標の両方を把握できます。

拡張機能のレポート。各 Core Web Vitals の値が表示され、INP の値も含まれるようになりました

Chrome 向けのウェブバイタル拡張機能をインストールします。

パフォーマンスの問題を診断する（ラボデータ）

Lighthouse ユーザーフローを使用する

DevTools の Lighthouse パネルの新しいタイムスパン モードを使用すると、Lighthouse を起動し、テストページを自由に操作して、その間に何が起こったかのレポートを取得できます。このレポートには、応答性の問題の診断に役立つ INP と監査が追加されました。

同じ一連の操作は、Lighthouse ユーザーフローを使用して自動化できます。INP は、Lighthouse 9.6 以降のユーザーフローで使用できます。

ツールの提供状況の詳細

  • Chrome ユーザー エクスペリエンス レポート（CrUX）
    • BigQuery: INP は interaction_to_next_paint として使用可能
    • CrUX API: interaction_to_next_paint として利用可能な INP
    • CrUX ダッシュボード: INP データが含まれます。
  • PageSpeed Insights
    • pagespeed.web.dev: CrUX API のページレベルとオリジンレベルの INP フィールドデータが「Interaction to Next Paint」として表示される
    • PSI API: INP を INTERACTION_TO_NEXT_PAINT_MS として利用可能
  • web-vitals JS ライブラリ
    • web-vitals に INP のサポートが含まれている
  • Web Vitals Chrome 拡張機能
    • ローカル INP 測定と INP フィールド データ（CrUX API で利用可能な場合）が含まれます
  • Lighthouse
    • DevTools の Lighthouse パネル: Chrome Canary（104）で INP 測定が「期間」モードで利用可能に
    • Lighthouse npm モジュール: タイムスパンで INP 測定を利用可能（合成入力には puppeteer を使用）

今後の作業とフィードバックのリクエスト

今後、Chrome ツールチームは INP のデバッグ機能と最適化案の推奨事項に引き続き投資していきます。

指標の有用性や測定しやすさなどについてご意見やご感想がございましたら、web-vitals-feedback Google グループまでお寄せください。