Interaction to Next Paint (INP)

Interaction to Next Paint（INP）の定義

Interaction to Next Paint（INP）は、Core Web Vitals指標のひとつで、ユーザーが操作（ボタンのクリック、タッチスクリーンのタップ、キーボードキーの押下など）を開始してから、ブラウザが次のビジュアル更新を描画するまでの経過時間を追跡することで、ウェブページの応答性を測定します。GoogleのChromeチームにより2022年5月に実験的指標として導入され、2024年3月に正式なCore Web VitalとなったINPは、First Input Delay（FID）に代わる主要な応答性指標です。FIDがページ上での最初の操作の遅延のみを測定していたのに対し、INPはユーザーセッション全体のすべての操作を観察し、より包括的な応答性評価を実現します。この変化は、ユーザーがページで過ごす時間の90％がロード後であるという現実を反映し、セッション全体を通した一貫した応答性がユーザー満足度やSEOパフォーマンスに不可欠であることを示しています。

応答性指標の歴史的背景と進化

INPの導入は、Googleがウェブサイトの応答性をどのように測定・評価するかにおける大きな進化を示しています。長年、**First Input Delay（FID）**はCore Web Vitals内の主要な応答性指標として、最初のユーザー操作の入力遅延のみに注目していました。しかし、調査や実際のテストにより、FIDのアプローチには大きな制限があることがわかりました。FIDはイベントハンドラーの実行開始までの遅延のみを計測し、操作の処理やビジュアル応答の描画に要する時間を無視していました。また、最初の操作のみを対象とするため、セッション後半で応答性が悪くても良いFIDスコアになる場合があり、全体の応答性を正確に反映できていませんでした。こうした制限を受けて、Google Chromeチームは2021年から代替指標の検討を開始し、2022年5月にINPを実験的指標として発表。約2年にわたるコミュニティテストとフィードバックを経て、2024年3月12日にINPは正式なCore Web Vitalとなり、FIDを完全に置き換えました。この転換は、実際のブラウジング体験をより正確に反映するユーザー中心のパフォーマンス指標を提供するというGoogleの姿勢を示しています。

Interaction to Next Paintの仕組み：技術的内訳

INPは応答性を、ユーザー操作の3つのフェーズ—入力遅延、処理時間、表示遅延—の追跡によって測定します。入力遅延は、ユーザーが操作を開始してから関連イベントハンドラーの実行が始まるまでの時間で、長いタスクやバックグラウンド処理によるメインスレッドのブロックが原因となります。処理時間は、イベントハンドラーのコールバック全体が実行されるのに要する時間で、ユーザー操作に反応するJavaScriptコードなどが含まれます。表示遅延は、イベントハンドラー完了からブラウザが次のフレームを描画するまでの時間で、レイアウト再計算やスタイル更新・描画作業などが該当します。INPの総値は、これら3つの要素の合計です。特にINPはページ内すべての操作の98パーセンタイルで計算され、ページに多数の操作があった場合、最悪の2％は外れ値として除外し、大多数のユーザーが体験する応答性を報告します。50回未満の操作しかない場合は、最も悪い操作がINPとして報告されます。このパーセンタイル方式により、まれなパフォーマンス低下が全体評価を過度に悪化させることを防いでいます。

比較表：INP vs. FID vs. 他のパフォーマンス指標

パフォーマンス閾値と実世界の統計

GoogleはINPのパフォーマンス閾値を75パーセンタイル（モバイル・デスクトップごと）で定義しています。INPが200ミリ秒未満なら応答性良好とされ、ユーザー操作への即時のビジュアル反応が保証されます。INPが200～500ミリ秒なら「改善が必要」、500ミリ秒超は「悪い」とされ、ユーザーが遅延を感じやすくなります。2024年のHTTP Archive・Web Almanacの調査によれば、モバイルウェブサイトの74％、デスクトップの97％が良好なINPスコアを達成しており、モバイルとデスクトップ間で23ポイントの性能差があることがわかります。これは通常、モバイル端末の処理能力やネットワーク条件がデスクトップより不安定なためで、モバイルファースト開発においてINP最適化が極めて重要である理由となっています。

INPのCore Web Vitalsにおける役割とSEOへの影響

INPは、Googleがページ体験と検索順位を評価する3つのCore Web Vitals指標の1つで、Largest Contentful Paint（LCP）（読み込み性能）やCumulative Layout Shift（CLS）（ビジュアル安定性）と並びます。GoogleはCore Web Vitalsがランキング要因であることを明言しており、INPスコアが悪いページは検索結果での可視性が低下する可能性があります。このため、INP最適化はユーザー体験だけでなくSEOの観点からも不可欠です。実際、RedBus（オンラインバスチケットプラットフォーム）は、INPを870～900msから350～370msに改善したことで売上が7％増加しました。具体的には、スクロールイベントハンドラーのデバウンス、入力コンポーネントの状態管理最適化、不要な再描画の削減などの施策を実施。この事例はINPの改善がコンバージョン増加や離脱率減少、ユーザー維持率向上などのビジネス指標に直結することを示しています。ECサイトやSaaSなどユーザー操作が重要なビジネスにとって、INP最適化は高いROIをもたらします。

INPを改善するための主要な最適化戦略

開発者は、INPを短縮しページ応答性を高めるために実証済みの複数の戦略を活用できます。入力遅延の削減には、scheduler.yield() APIを用いた長いタスクの分割、非重要なJavaScript実行の後回し、サードパーティスクリプトの最適化などでメインスレッドのブロックを避けます。処理時間の最適化には、イベントハンドラーのコールバックを必要最低限に絞り、デバウンスやスロットリングで実行頻度を制御し、Reactのようなフレームワークではメモ化で不要な再レンダリングを防ぎます。表示遅延の短縮には、DOMの複雑さを減らし、CSSコンテインメントで描画範囲を限定したり、非重要なビジュアル更新を遅延させたりします。さらに、Chrome DevToolsでインタラクションをプロファイルし、どの関数やスクリプトがINP遅延の主因か特定し、影響が最も大きい最適化から優先的に改善します。Real User Monitoring（RUM）は、どの要素のどの操作が遅いか、どのインタラクションが多いかといったデータを提供し、データ駆動型の最適化判断が可能です。web-vitals JavaScriptライブラリを活用すれば、INPをプログラム的に測定し分析プラットフォームに送信でき、継続的なモニタリングと改善が行えます。

INPの測定方法とツール

INPは実ユーザーデータ（フィールドデータ）とラボテストの両方で測定できますが、実ユーザーによるフィールドデータが最も現実的なパフォーマンスを反映します。Google PageSpeed Insightsは**Chrome User Experience Report（CrUX）**のデータに基づき、ページの75パーセンタイルINPを表示します（十分なトラフィックがある場合）。Google Search ConsoleではCore Web Vitals内にINPレポートがあり、応答性が悪いページの特定や改善の追跡が可能です。Chrome DevToolsのパフォーマンスタブでは、個別のインタラクションの入力遅延・処理時間・表示遅延の内訳を記録・解析できます。web-vitals JavaScriptライブラリを使えば、本番環境でINPを測定し、独自の分析基盤にデータ送信が可能です。Real User Monitoring（RUM）ソリューション（DebugBear、Datadog、New Relicなど）は、INPの詳細な分析や遅延原因となるスクリプト・コンポーネントの特定をサポートします。INP Debuggerツールはクリック可能なページ要素を自動特定し、ラボ環境で操作をシミュレーションして遅い操作を発見できます。INP最適化を徹底するには、CrUXでの基礎パフォーマンス把握、RUMによる本番の問題操作特定、DevToolsでの根本原因の調査・検証という複数の手法を組み合わせるのが効果的です。

INPとAI検索の統合：AmICitedユーザーへの示唆

ChatGPT、Perplexity、Google AI Overviews、ClaudeなどAI駆動型検索システムがウェブコンテンツを参照・引用する機会が増す中、ページの応答性はAI評価や引用パターンにも影響し始めています。INPが直接AIによる引用可否を左右するわけではありませんが、応答性が悪いページはエンゲージメント指標（直帰率、滞在時間、操作深度など）が低迷し、こうした指標が間接的にコンテンツ品質シグナルに影響する可能性があります。またAIシステムはユーザー体験シグナルを重視する傾向が強まっており、操作に即応できるページは技術的にも信頼性や専門性が高いと評価されやすくなります。AmICitedでAI回答中のブランド・ドメイン掲載状況をモニタリングする組織にとっても、INPは全体的なコンテンツ最適化戦略の一部となります。応答性（良好なINP）と高品質・権威性のあるコンテンツの両立は、AIからの引用獲得にも有効です。さらにAIがユーザー体験指標をより高度に評価するようになれば、良好なINPスコアの維持はAIによる引用パターンにもますます重要な役割を果たすと考えられ、従来SEOだけでなくAI検索での可視性向上のためにもINP最適化が欠かせません。

今後の進化とINPに関する新たな考慮事項

ウェブパフォーマンスの分野は進化を続けており、INP自体もブラウザ機能やユーザー期待の変化に合わせて改良される可能性があります。GoogleはChromeバージョンごとのINP計測方法の変更を詳細に記録したchangelogを公開しており、継続的な改善やバグ修正が進められています。最近では、Long Animation Frames（LoAF）APIの導入により、どのスクリプトが描画遅延の原因かをより詳細に特定できるようになり、INP最適化の精度が向上しています。また、alertやconfirmダイアログはChrome 127以降INP計測から除外されるなど、どのようなユーザー操作が有意義かも見直されています。今後は、インタラクションごとのパフォーマンス予算設定やフレームワークレベルの最適化が進み、INP最適化は開発ワークフローに統合される傾向が強まるでしょう。モバイルデバイスがウェブトラフィックの主流となり、ユーザーの応答性期待値も上昇するなか、良好なINPスコアの維持は今後も競争優位の鍵となります。INPは一時的な最適化項目ではなく、ユーザー中心かつ高性能なウェブ体験を構築する上で基盤となる指標と位置付けるべきです。

INP最適化のための必須チェックリスト

• PageSpeed Insights・Search Console・Real User Monitoringツールで現状のINPパフォーマンスを監査
• RUMデータやChrome DevToolsで遅い操作を特定し、どの要素やユーザーアクションが遅延要因か把握
• scheduler.yield()や非同期パターンで長いタスクを分割し、ページロードやバックグラウンド処理中の入力遅延を防止
• イベントハンドラーの最適化（処理時間短縮、頻繁なイベントのデバウンス、非重要処理の後回し）
• DOMの複雑さを最小化し、イベントハンドラー完了後の表示遅延・描画時間を短縮
• コード分割や遅延読み込みで初期JavaScript実行やバックグラウンド処理を削減
• サードパーティスクリプトの最適化（非重要スクリプトの遅延実行、PartytownでのWeb Worker利用、不要な統合の排除）
• React.memo、Vueのcomputedプロパティ、Next.jsのコード分割などフレームワーク固有の最適化で不要な再レンダリング防止
• RUMなどで継続的にモニタリングし、INPの改善やユーザー影響前の劣化検知を徹底
• ローエンドのモバイル端末など実機テストを行い、多様なユーザーハードウェアでの応答性を検証