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

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

保留中の新しい応答性指標である Interaction to Next Paint（INP）のツールサポートの第 1 弾がリリースされました。指標の詳細については、INP 指標の公式ガイドをご覧ください。

推奨される測定

INP を測定する目的は、ページがユーザー入力にどのくらいの速さで応答するかを把握することです。現実的なデータを取得する唯一の方法は、フィールドのデータを使用して、サイトにアクセスしている実際のユーザーに対するページの応答性を測定することです。

ラボで INP を測定すると、イベントのタイミングと最適化が必要な場所をより深く理解できます。ラボツールはページを自動的に操作しないため、測定中に手動で入力するか、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` web-vitalsと DevTools コンソールでの測定方法について詳しくは、こちらをご覧ください。

ウェブに関する指標 Chrome 拡張機能

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

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

Chrome 用の ウェブに関する指標拡張機能 をインストールします。

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

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 拡張機能「ウェブに関する指標」
    • ローカルの INP 測定と、CrUX API から利用可能な場合は INP フィールド データを含む
  • Lighthouse
    • DevTools の Lighthouse パネル __: Chrome Canary（104）の [timespan] モードで INP 測定が可能
    • Lighthouse npm モジュール: タイムスパンで INP 測定が可能（合成入力には Puppeteer を使用）

今後の作業とフィードバックのお願い

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

指標の有用性から測定の容易さまで、フィードバックがありましたら、web-vitals-feedback Google グループにお寄せください。