Core Web Vitals
Core Web Vitals（コアWebバイタル）は、ページの読み込み、インタラクティビティ、視覚的安定性を測定するGoogleの3つの主要指標です。LCP、INP、CLSの閾値と、SEOおよびAI検索の可視性への影響について学びます。...
2 分で読める
Interaction to Next Paint (INP)
Interaction to Next Paint（INP）は、ユーザーの操作（クリック、タップ、キー入力）からブラウザが次の視覚的更新を描画するまでの時間を追跡することで、ウェブページの応答性を測定するCore Web Vitals指標です。2022年5月に導入され、2024年3月にFirst Input Delay（FID）に代わり正式に採用されたINPは、最初の操作だけでなく、ユーザーセッション全体を通じたページの全体的な応答性を評価します。
Interaction to Next Paint（INP）の定義
Interaction to Next Paint（INP） は、ユーザーが操作（ボタンのクリック、タッチスクリーンのタップ、キーボードキーの押下など）を開始してから、ブラウザが次の視覚的更新を描画するまでの経過時間を追跡することで、ウェブページがユーザー操作にどれだけ迅速に応答するかを測定するCore Web Vitals指標です。2022年5月にGoogleのChromeチームによって実験的指標として導入され、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年間のコミュニティテストとフィードバック収集を経て、INPは2024年3月12日に安定版のCore Web Vitalとして正式に制定され、FIDを完全に置き換えました。この移行は、実際のブラウジング体験をより正確に反映する、ユーザー中心のパフォーマンス指標を提供するというGoogleの取り組みを強調するものです。
Interaction to Next Paintの仕組み：技術的詳細
INPは応答性を測定するために、ユーザー操作の3つの異なるフェーズを追跡します：入力遅延、処理時間、描画遅延です。入力遅延は、ユーザーが操作を開始してからブラウザが関連するイベントハンドラの実行を開始するまでの時間を表し、多くの場合、メインスレッドをブロックする長いタスクやバックグラウンド処理によって引き起こされます。処理時間は、ユーザーの操作に応答するJavaScriptコードを含む、すべてのイベントハンドラコールバックの実行に必要な時間を含みます。最後に、描画遅延は、イベントハンドラが完了してからブラウザが次のフレームを描画するまでの時間であり、レイアウトの再計算、スタイルの更新、レンダリング作業が含まれる場合があります。INPの合計値は、単一の操作におけるこれら3つの要素の合計を表します。重要なのは、INPはページ上のすべての操作の98パーセンタイルとして計算されるため、ページが多くの操作を受ける場合、Googleは最悪の2%を外れ値として無視し、大多数のユーザーが体験する応答性を報告することです。50回未満の操作しかないページの場合、INPは通常、観察された最悪の操作を報告します。このパーセンタイルベースのアプローチにより、一時的なパフォーマンスの低下が、一般的に応答性の高いサイトに不当にペナルティを与えることがないようにしています。
比較表：INP vs. FID vs. その他のパフォーマンス指標
| 指標 | 測定内容 | 範囲 | しきい値（良好） | しきい値（不良） | ステータス |
|---|---|---|---|---|---|
| Interaction to Next Paint（INP） | 操作サイクル全体（入力遅延＋処理＋描画） | セッション全体のすべての操作 | ≤ 200ms | > 500ms | 有効なCore Web Vital（2024年3月以降） |
| First Input Delay（FID） | 入力遅延のみ（イベントハンドラ実行前） | 最初の操作のみ | ≤ 100ms | > 300ms | 非推奨（INPに置き換え） |
| Total Blocking Time（TBT） | ページ読み込み中のメインスレッドブロッキング | 読み込みフェーズのみ | ≤ 300ms | > 600ms | ラボ指標（フィールド指標ではない） |
| Largest Contentful Paint（LCP） | 最大の可視要素のレンダリング時間 | 読み込みフェーズ | ≤ 2.5s | > 4s | 有効なCore Web Vital |
| Cumulative Layout Shift（CLS） | 視覚的安定性と予期しないレイアウト変更 | セッション全体 | ≤ 0.1 | > 0.25 | 有効なCore Web Vital |
Stay Updated on AI Visibility Trends
Get the latest insights on AI mentions, brand monitoring, and optimization strategies.
パフォーマンスしきい値と実際の統計
Googleは、INPパフォーマンスのしきい値をデバイスタイプ（モバイルおよびデスクトップ）別に区分したページ読み込みの75パーセンタイルで定義しています。INPが200ミリ秒未満であることは良好な応答性を示し、ページがユーザー操作に迅速に応答し、即時の視覚的フィードバックを提供することを意味します。INPが200〜500ミリ秒の間は「改善が必要」カテゴリーに分類され、ページは機能しているものの、ユーザーが満足度に影響を与える可能性のある顕著な遅延を認識する可能性があることを示しています。INPが500ミリ秒を超えると不良に分類され、ユーザーをイライラさせ、エンゲージメントやコンバージョンに悪影響を及ぼす可能性が高い深刻な応答性の問題を示しています。HTTP Archiveによる2024年Web Almanacによると、モバイルWebサイトの74%、デスクトップWebサイトの97%が良好なINPスコアを達成しており、モバイルとデスクトップの体験間に大きなパフォーマンス格差があることが明らかになりました。この23パーセントポイントの差は、デスクトップコンピュータよりも処理能力が低く、ネットワーク条件が変動しやすいモバイルデバイス向けに応答性を最適化する際に開発者が直面する継続的な課題を浮き彫りにしています。このデータは、ほとんどのサイトでモバイルユーザーがウェブトラフィックの大部分を占める中、INPの最適化がモバイルファーストのWeb開発にとって不可欠である理由を示しています。
Core Web VitalsにおけるINPの役割とSEOへの影響
INPは、Googleがページ体験を評価し検索ランキングを決定するために使用する3つのCore Web Vitals指標の一つであり、読み込みパフォーマンスのためのLargest Contentful Paint（LCP）、視覚的安定性のためのCumulative Layout Shift（CLS） と並んでいます。GoogleはCore Web Vitalsがランキング要素であると明確に述べており、INPスコアが不良のページは検索結果での表示順位が低下する可能性があります。これにより、INPの最適化は単なるユーザー体験の問題ではなく、重要なSEOの必須事項となります。INP最適化のビジネス効果は実際のケーススタディを通じて実証されています。オンラインバス予約プラットフォームのRedBusは、スクロールイベントハンドラのデバウンス、入力コンポーネントの状態管理の最適化、不要な再レンダリングの削減などの手法により、WebサイトのINPを870〜900msから350〜370msに最適化し、売上を7%増加させました。このケーススタディは、INPの改善がコンバージョン率の向上、直帰率の低下、ユーザー維持率の向上など、ビジネス指標の改善に直接的に相関することを示しています。Eコマースサイト、SaaSプラットフォーム、およびユーザー操作に依存するあらゆるビジネスにとって、INPの最適化はユーザー体験と検索の可視性の両方において高いROIをもたらす投資となります。
INP改善のための主要な最適化戦略
開発者は、INPを削減しページの応答性を向上させるために、いくつかのエビデンスに基づいた戦略を採用できます。入力遅延を削減するには、scheduler.yield() APIを使用した長いタスクの分割、重要でないJavaScript実行の遅延、サードパーティスクリプトの読み込みの最適化など、メインスレッドをブロックするバックグラウンド処理を最小限に抑える必要があります。処理時間を最適化するには、イベントハンドラコールバックを必須の作業のみに効率化し、デバウンスやスロットリングなどの手法を使用してイベントハンドラの実行頻度を制限し、Reactなどのフレームワークを活用してメモ化による不要なコンポーネントの再レンダリングを防止します。描画遅延を削減するには、DOMの複雑さを最小限に抑え、CSS containmentを使用してレンダリング範囲を制限し、重要でない視覚的更新を遅延させることで達成できます。さらに、開発者はChrome DevToolsを使用して操作をプロファイリングし、どの特定の関数やスクリプトがINP遅延に最も貢献しているかを特定し、最も効果の高い最適化を優先順位付けする必要があります。Real User Monitoring（RUM）ソリューションは、ユーザーが最も頻繁に操作するページ要素と、どの操作が最も遅いかに関する貴重なデータを提供し、データ駆動型の最適化判断を可能にします。web-vitals JavaScriptライブラリを使用すると、開発者はプログラムでINPを測定し、分析プラットフォームにデータを送信して、継続的な監視と改善を促進できます。
INPの測定：ツールと方法論
INPはフィールドデータとラボテストの両方で測定可能ですが、実際のユーザーからのフィールドデータが実際のパフォーマンスを最も正確に表します。Google PageSpeed Insightsは、Chrome User Experience Report（CrUX） のデータに基づいてINP指標を表示し、十分なトラフィックを受けるページについて実際のユーザー体験の75パーセンタイルを示します。Google Search ConsoleはCore Web VitalsセクションにINPレポートを含んでおり、サイト所有者は応答性の低いページを特定し、経時的な改善を追跡できます。Chrome DevToolsのパフォーマンスタブを使用すると、開発者は個々の操作を記録および分析し、入力遅延、処理時間、描画遅延の内訳を表示できます。web-vitals JavaScriptライブラリは、本番環境でINPをプログラム的に測定し、カスタム分析バックエンドにデータを送信する方法を提供します。DebugBear、Datadog、New RelicなどのReal User Monitoring（RUM）ソリューションは、どのスクリプトやコンポーネントが遅延に貢献しているかを示す属性データを含む、INPパフォーマンスに関する詳細な洞察を提供します。INP Debuggerツールは、クリック可能なページ要素を自動的に識別し、操作をシミュレートしてラボ環境で遅い操作を特定します。包括的なINP最適化のために、開発者は複数の測定アプローチを組み合わせる必要があります：ベースラインパフォーマンスを理解するためのCrUXデータ、本番環境での問題のある操作を特定するためのRUM、そして根本原因を診断して修正を検証するためのDevToolsです。
INPとAI検索の統合：AmICitedユーザーへの影響
ChatGPT、Perplexity、Google AI Overviews、ClaudeなどのAI駆動の検索システムがウェブコンテンツを参照・引用する機会が増えるにつれて、ページの応答性はAIシステムの評価と引用パターンにおける要素となっています。INPはAIシステムがコンテンツを引用するかどうかに直接影響するわけではありませんが、応答性の低いページはエンゲージメント指標（直帰率、ページ滞在時間、操作深度）が低下する可能性があり、それが間接的にコンテンツ品質シグナルに影響を与えます。さらに、AIシステムはソースの信頼性と関連性を評価する際に、ユーザー体験シグナルをますます重視するようになっています。ユーザー操作に迅速に応答するページは技術的な能力と専門性を示し、AIシステムが引用のためにコンテンツを評価・ランク付けする方法に影響を与える可能性があります。AmICitedを使用してブランドやドメインのAI応答での表示を監視している組織にとって、INPの理解は包括的なコンテンツ最適化戦略の一部となります。応答性が高く（良好なINP）、高品質で権威あるコンテンツを含むページは、AIシステムに引用される可能性が高くなります。さらに、AIシステムがユーザー体験シグナルの評価においてより洗練されるにつれて、良好なINPスコアを維持することはAI引用パターンにおいてますます重要な要素になる可能性があり、INPの最適化は従来のSEOだけでなく、新興のAI検索の可視性にも関連するものとなっています。
一般的なINP問題のトラブルシューティング
ほとんどの不良INPスコアは、指標の3つの要素のいずれかに起因するため、診断はどの要素が問題かを特定することから始まります。高い入力遅延は通常、メインスレッド上の長いタスク（多くの場合、バンドルされた分析や広告スクリプト）がユーザーのクリック時に実行されていることを意味し、修正方法はscheduler.yield()を使用して作業をより小さなチャンクに分割するか、重要でないスクリプトを操作ウィンドウの後まで遅延させることです。長い処理時間は通常、イベントハンドラが必要以上の作業を行っていることに起因します。例えば、入力のデバウンスを行わずにキー入力ごとにAPI呼び出しを発生させる検索ボックスや、変更された1行だけではなくリスト全体を再レンダリングするReactコンポーネントなどがあります。メモ化とスロットリングで両方を解決できます。長い描画遅延は多くの場合、CSSまたはDOMの問題です。複雑なセレクタ、レイアウトスラッシング、または深くネストされたDOMにより、ブラウザは描画前にスタイルとレイアウトの再計算を強制され、CSS containmentとDOMツリーの簡素化で直接対処できます。あまり明らかでない障害モードはサードパーティスクリプトです。これらは自社のコードが高速であっても、INPに静かに影響を及ぼす可能性があります。Chrome DevToolsのパフォーマンスタブでプロファイリングすると、遅延がどのスクリプトに起因するかを特定できます。最後に、ラボとフィールドのINPスコアが大きく異なる場合は、テストされている操作が実際のユーザーが実際にクリックするものと一致しているかどうかを確認してください。合成テストでは、RUMデータが捉える操作を見逃す可能性があります。
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の改善を追跡し、ユーザーに影響を与える前に後退を特定する
- 低スペックのモバイルデバイスを含む実際のデバイスでテストし、ユーザーハードウェアの全範囲にわたって応答性を確保する
+++
