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

Brendan Kenny 氏
Brendan Kenny
Twitter GitHub
エリザベス・スウィーニー
Elizabeth Sweeny
Twitter GitHub

このたび、新しい保留応答性指標である Interaction to Next Paint（INP）のツール サポートの第 1 ラウンドを開始できることを嬉しく思います。指標自体については、INP 公式指標ガイドをご覧ください。

推奨される測定値

INP を測定する目的は、ページがユーザー入力に応答する速さを把握することです。現実的なデータを取得するには、現場からのデータを使用して、サイトを訪れる実際のユーザーに対するページの反応を測定するしかありません。

ラボで INP を測定すると、イベントのタイミングと最適化が必要な場所をより深く理解できます。ラボツールはページを自動的には操作しないため、測定中に手作業で入力するか、Puppeteer などの自動化ツールを使用してスクリプトを作成する必要があります。一般的なユーザー ジャーニーから重要なインタラクションを特定したら、問題を特定してスクリプト化し、CI テストを実施して回帰を防止できます。

実際のユーザーが体験していることを検出する（フィールド データ）

PageSpeed Insights にアクセスする

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

実際のウェブに関する主な指標に関する 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」

Web Vitals 拡張機能は、（CrUX API からの）ユーザーのページ エクスペリエンスの概要、CWV のリアルタイム値、現在のページへの現在のアクセスに関する主な指標の両方を提供します。

Core Web Vitals の各値を示す拡張機能のレポート（INP の値を含む）

Chrome 用の Web Vitals 拡張機能をインストールします。

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

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

DevTools の [Lighthouse] パネルの新しい期間モードを使用すると、Lighthouse を起動して、必要に応じてテストページを操作し、その間に発生した状況に関するレポートを取得できます。このレポートには INP と監査が含まれており、応答性の問題を診断するのに役立ちます。

同じ一連のインタラクションは、Lighthouse のユーザーフローを使用して自動化できます。Lighthouse 9.6 では、ユーザーフローで INP を利用できます。

ツールの提供状況の詳細

  • Chrome ユーザー エクスペリエンス レポート（CrUX）
    • BigQuery: INP は interaction_to_next_paint として利用可能
    • CrUX API: INP は interaction_to_next_paint として利用可能
    • 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 のサポートが含まれています
  • Chrome 拡張機能「Web Vitals」
    • CrUX API から利用できる場合は、ローカルの INP 測定と INP フィールド データが含まれます
  • Lighthouse
    • DevTools の [Lighthouse] パネル: Chrome Canary の「期間」モードでの INP 測定が利用可能に（104）
    • Lighthouse npm モジュール: タイムスパンで利用できる INP 測定（合成入力に Puppeteer を使用）

今後の作業とフィードバックの依頼

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

指標の有用性や測定のしやすさなどについてフィードバックがございましたら、web-vitals-feedback Google グループにお寄せください。