ナビゲーション全体を読み込み中です。

Elevate 2026へのカウントダウンが始まりました。 今すぐ登録 シカゴ、ロンドン、またはシドニーで私たちと一緒に過ごしませんか。

Partners

ドキュメント

LMアカデミー

LMコミュニティ

価格

Platform
解決策
業種
職種
結果はありません。
無料トライアル

14日間フルアクセス LogicMonitor プラットフォーム

コアウェブバイタル

次のペイントへの相互作用

Googleの最新のコアWebバイタルであるINPは、インタラクションの応答性全体を測定します。INPが何を測定するのか、FIDとの違い、そしてスコアを向上させる方法について学びましょう。

8〜12分
デントン千倉

章

    ニュースレター

    最新情報のメール配信を登録

    最新のブログ、ホワイトペーパー、電子ガイドなどを直接受信ボックスにお届けします。

    シェア

    クイックダウンロード:

    INPは、ユーザー入力から視覚的フィードバックまでのインタラクションのライフサイクル全体を測定するため、FIDよりもはるかに包括的な指標となります。

    • INPは、2024年3月にコアWebバイタルとしてFirst Input Delay（FID）に取って代わりました。

    • これはページ訪問中のすべてのユーザー操作を評価するのに対し、FIDは最初の操作の入力遅延のみを測定します。

    • 良好なINPスコアは、モバイルデバイスとデスクトップデバイスの両方で測定した場合、75パーセンタイルで200ミリ秒以下である。

    • 入力遅延を最小限に抑え、長時間の処理を分割し、DOMの複雑さを軽減することで、INPを最適化し、より高速なプレゼンテーションを実現します。

    インタラクション・トゥ・ネクスト・ペイント（INP）は、ウェブサイトのインタラクティブな応答性を評価するために新たに導入されたCore Web Vitalsの指標です。2022年5月、GoogleはCore Web Vitals指標の限界に対処するための新しい指標としてINPを導入しました。 最初の入力遅延（FID）これは、ウェブページの応答性を測定したものです。2024年3月までに、約2年間のテストを経て、 INPが正式に追加されました ウェブページの応答性を評価するための安定したコアウェブバイタル指標として、FIDに取って代わる。

    この記事ではINPについて詳しく解説し、なぜINPがFIDに取って代わったのか、そしてINPを最適化してスコアを向上させ、ウェブサイトのSEOを改善するための戦略について説明します。

    インタラクション・トゥ・ネクスト・ペイント（INP）の主要概念の概要

    以下に、この記事で取り上げる主要な概念の概要を示します。

    概念 詳細説明
    次のペイントへの相互作用インタラクションから次の描画までの時間（INP）は、Core Web Vitalsの新しい指標で、ブラウザがユーザー操作に対するフィードバックを提供するのにかかる時間を評価します。
    なぜINPはFIDに取って代わったのか？FIDは、ページ上での最初のユーザー操作における入力遅延のみを測定していました。INPは、ユーザーが操作を開始してからブラウザがフィードバックを返すまでのプロセス全体を評価することで、この問題を解決しました。
    INP測定プロセスINPは、次のようなツールを使用して測定できます。 WebPageTest, GoogleのリソースPageSpeed、そしてキャッチポイントラム。 
    INP測定ユニットミリ秒 (ms)
    許容可能なINPスコア200ミリ秒以下。モバイル端末とデスクトップ端末の両方でページ読み込み時間の75パーセンタイルを測定することで、ほとんどのユーザーが快適な体験を得られるようにすることをお勧めします。

    Interaction to Next Paint (INP) とは何ですか?

    インタラクション・トゥ・ネクスト・ペイント（INP）は、ウェブページのユーザー操作に対する応答性を測定するコアWebバイタル指標です。具体的には、ユーザー操作からウェブサイトがフィードバックを返すまでの時間を評価します。INPが考慮する主要なユーザー操作タイプは以下のとおりです。

    • マウスボタンをクリックする。
    • 物理キーボードまたは画面上のキーボードのキーを押す。
    • タッチスクリーンデバイスをタップする。

    各インタラクションは一連のイベントで構成されます。たとえば、キーボードの「キープレス」インタラクションには、次のような複数のイベントが含まれます。 キーダウン, キープレス, キーアップそのインタラクションの中で最も長い単一のイベントが、全体の遅延時間を決定します。イベント遅延は、以下の要素で構成されます。

    • 入力遅延 – ユーザーがページ上で操作を開始してから、関連するアクションまたはイベントコールバックが実行されるまでの時間。
    • 処理時間 ―システムが入力データを処理し、関連する操作を実行するのに必要な時間。
    • プレゼンテーションの遅延 – イベントハンドラを実行してから、ブラウザがユーザーに応答を表示するまでの時間。
    インタラクションのライフサイクル（source)

    GoogleはなぜFIDをINPに置き換えたのか？

    最初の入力遅延（FID）  これは、ユーザーが開始した操作（クリック、タップ、キー入力など）をブラウザが処理し始めるまでの時間を測定します。ユーザーエクスペリエンスを評価する上で優れた指標ではありますが、ユーザー操作に対するページの応答性全体を捉えるものではありません。

    この欠点を解消するため、Google Chrome Speed Metricチームは、以下の項目を捉える新しい指標の作成を検討しました。

    1. 最初の操作だけでなく、すべてのユーザー操作に対する応答性
    2. インタラクションにおける各イベントの全期間（遅延時間だけでなく）。
    3. 同じユーザー操作から発生したイベントをグループ化し、その操作におけるすべてのイベントの中で最も長い継続時間に基づいてレイテンシを定義します。
    4. ウェブページのライフサイクル全体を通して、そのページ上で行われるすべてのインタラクションに対して総合スコアを生成します。

    このレビュープロセスの結果として得られるのが「インタラクション・トゥ・ネクスト・ペイント」です。これは、ユーザーがウェブサイトを訪問する際に発生するすべてのクリック、タップ、キーボード操作の遅延を評価する、より包括的なユーザー中心の指標です。これにより、ウェブページがユーザーの操作全体にどれだけ迅速に対応できるかが分かります。 

    以下に、相違点をまとめました。

    詳細説明 最初の入力遅延次のペイントへの相互作用
    コア機能FIDは、ユーザー操作に対するページの初期応答性のみを測定する指標です。INPは、ユーザーが操作を開始した時点からブラウザが応答を表示するまでのプロセス全体を測定します。
    評価の観点からFIDは、ユーザー操作に対するページ応答の初期段階のみを評価します。INPは、ユーザーがウェブページを閲覧する際のあらゆるユーザー操作と、各操作における個々のイベントを包括的に評価します。
    ユーザーエクスペリエンスへの影響FIDは、サイトの初期読み込み時の応答性を測定する指標であり、ユーザーの第一印象に影響を与える。INPは、訪問全体を通してユーザーの操作を管理するブラウザの有効性を評価することで、一貫してスムーズなユーザーエクスペリエンスを保証します。

    次のペイントまでのインタラクションを測定する方法

    リアルユーザーモニタリング（RUM）から現場データを収集することは、実際のユーザーのブラウジング体験を捉えることができるため、INPを測定する理想的な方法です。リアルユーザーモニタリングは、ユーザーの行動をリアルタイムで追跡し、バックグラウンドでユーザーとシステムの両方を観察します。INP値に影響を与える特定のインタラクションを強調し、テストでは見落とされがちな問題に関する情報を提供するコンテキストデータを提供します。また、RUMデータを使用して、さまざまなデバイスやインターネット速度でWebサイトがどのように機能するかを検証することもできます。

    以下は、 Chromeユーザーエクスペリエンス（CrUX）レポート 詳細な実際のユーザー体験の観点からINP値を取得する。

    WebPageTest

    以下の例のガイドでは、INPを測定する方法を示します。 WebPageTest:

    1. MFAデバイスに移動する https://webpagetest.org/
    2. INPを取得するには、 ウェブバイタル 高度なテストからのテストタイプ。
    3. テストしたいウェブページのURLを入力してください。（この例では、 このURL 使用されました）
    4. 希望するテスト構成を選択してください。（モバイルまたはデバイスのいずれかを選択できます。）
    5. テストを開始し、最終結果が出るまで数秒お待ちください。
    6. ビューオプションで、パフォーマンスサマリービューに変更します。INPは、 実世界での使用状況指標 一列に並んだ 他のCore Web Vitals指標と併せて。
    WebPageTest の結果 サンプルページ

    PageSpeed​​ Insightsの

    INPを測定するには PageSpeed​​ Insightsの ツールを使用するには、ウェブサイトのURLを入力し、「分析」ボタンをクリックしてください。また、異なるデバイスの種類を切り替えて結果を確認することもできます。

     Google PageSpeed Insight Tools の結果 サンプルページ

    しかし、CrUXを活用するツールはINP値を提供し、インタラクションの問題を特定するのに役立ちますが、問題の正確な原因を特定することはできません。このような場合にRUMソリューションが役立ちます。 Catchpointのリアルユーザーモニタリングは、ウェブページの応答性や個々のユーザー操作に関する詳細情報を完全に可視化し、特定の操作にINP値を割り当てて最適化が必要な領域を特定するのに役立ちます。

    良いINPスコアとはどのようなものですか？

    良好な「インタラクションから次の描画までの時間」スコアは、応答性が高く快適なユーザーエクスペリエンスを保証します。Googleによると、200ミリ秒以下のスコアは良好とされています。モバイルデバイスとデスクトップデバイスの両方でページ読み込み時間の75パーセンタイルを測定することで、ほとんどのユーザーが快適なエクスペリエンスを得られるようにすることが推奨されます。

    INPスコアが200～500ミリ秒の場合は「改善が必要」、500ミリ秒を超える場合は「不良」と分類されます。INPスコアが「良好」から「不良」へと悪化するにつれて、サイトのSEOランキングやユーザー満足度全体に徐々に悪影響を及ぼす可能性があります。

    INPのビジネスへの影響：ケーススタディ

    レッドバス はインドを拠点とするオンラインバスチケット販売プラットフォームで、インドネシア、マレーシア、シンガポール、ペルー、コロンビアなどの国々でも事業を展開している。 ケーススタディ Googleが行った調査によると、RedBusはウェブサイトのINPを最適化することで売上が7%増加したという。

    RedBusは、以下の目的を達成するために、自社ウェブサイトのINP（情報伝達性）の向上に着手しました。

    1. インターネット速度やデバイスの性能に関わらず、アドレスのインタラクション遅延を低減します。
    2. やり取りはできるだけ迅速に行う。
    3. フロントエンドへの高速データ転送のために、APIレスポンスは軽量であることを確認してください。

    同社は、検索ページでの日付変更操作が遅いことを発見した。同様に、ユーザーが運賃をスクロールすると、複数のタスクをスケジュールするイベントリスナーがトリガーされ、操作の遅延が軽減される。これらの問題はいずれも、検索ページのINP（インタラクションパフォーマンス）の低下につながっていた。

    スクロールイベントハンドラからのデバウンス処理が行われなかったために、タスクがメインスレッドをブロックしています。ソース)

    同社は検索ページにおけるこれらの問題を軽減するためにいくつかの対策を講じた。スクロールイベントハンドラのデバウンス処理を行い、イベントリスナーによって発生するイベント数を削減した。さらに、最後から2番目のカードで新しい結果バッチを取得するように変更し、遅延読み込みをより早期に開始するとともに、ネットワークごとの取得件数を30件から10件に削減した。その結果、INP（Input Index Number）の範囲が870～900から350～370へと大幅に縮小した。

    改善は見られたものの、検索時の操作性には依然として問題があり、これは主にページ上の入力フィールドの変更イベントによって引き起こされていた。 

    この状況を最適化するため、RedBusは入力コンポーネントの状態をローカルで管理し、入力要素からのブラーイベントが発生した場合にのみ同期するようにしました。これにより、ユーザーインターフェースの再レンダリングが大幅に削減されました。ページのINPは72%向上し、ユーザーはよりシームレスな操作感を得られるようになり、企業全体の売上も7%増加しました。

    検索ページにおける改善されたINPの視覚化（ソース)

    INPを最適化する方法

    INPスコアを向上させるには、以下の戦略を実行できます。

    長い入力遅延を最小限に抑える

    入力遅延とは、ユーザーが最初に操作を開始してから、対応するイベントコールバックの実行が開始されるまでの時間です。これは操作から応答までのプロセスの最初の段階ですが、できるだけ高速に実行されるようにする必要があります。

    入力遅延の長期化に対処するために実施できる戦略には、以下のようなものがあります。

    繰り返しタイマーは避ける

    JavaScriptのsetTimeoutやsetIntervalといったタイマー関数は、それ自体が必ずしも悪いものではありません。使用する必要がある場合は、繰り返し実行されないようにし、実行中のプロセスを可能な限り最小限に抑えて、他の操作の妨げにならないようにしてください。

    デバウンス入力ハンドラ

    入力ハンドラをデバウンスすることで、一定期間内に実行されるイベントコールバックの数を制限できます。これにより、特にユーザーが短時間内に複数の操作を行っている場合のインタラクションの重複を回避できます。

    長時間の作業を分割する

    操作中にメインスレッドをブロックする長時間のタスクは、入力遅延に影響を与えます。タスクで実行される処理をできるだけ少なくすることで、メインスレッドの負荷を軽減し、操作を高速化できます。

    イベントコールバックを最適化する

    ユーザー操作に応じてトリガーされるイベントコールバックが迅速に実行されるようにする必要があります。イベントコールバックは、できるだけ少ない処理しか行わないようにする必要があります。これを実現する方法は、 メインスレッドを生成し、 これにより、タスクの実行が一時的に停止され、他のタスクが実行できるようになります。

    さらに、イベントコールバックの処理を複数のタスクに分割することで、メインスレッドが長時間ブロックされるのを防ぐことができます。setTimeout関数は、コールバックを新しいタスクで実行するため、この方法の一つとして有効です。

    レンダリング処理を優先し、イベントコールバックでは次のフレームの視覚的な更新に必要なロジックのみを実行し、その他のタスクは後回しにします。これにより、コールバックが軽量化され、レンダリング時間が短縮されます。

    プレゼンテーションの遅延を減らす

    表示遅延とは、イベントコールバックの実行が完了してからブラウザが次のフレームを描画するまでの期間のことです。フレーム遅延を回避するには、DOMサイズをできるだけ小さくしてください。DOMサイズが大きいとレンダリングに時間がかかり、表示速度が低下する可能性があります。また、CSSのcontent-visibilityプロパティを使用してHTMLを遅延レンダリングすることもできます。これにより、レンダリング時間が短縮され、INP（Infrastructure as Page：表示遅延）が改善されます。

    製品概要

    Interaction to Next Paint（INP）は、Core Web Vitalsに新たに追加された指標で、First Input Delay（FID）に代わるものです。最初の入力の遅延のみを測定するFIDとは異なり、INPはユーザーがページを訪問している間のすべてのインタラクションの応答性を評価することで、ユーザーエクスペリエンス全体を包括的に評価します。

    この変化により、INPはウェブパフォーマンスの理解と最適化のための、より独自で信頼性の高い指標となりました。ウェブ開発者はINPの最適化を継続的に監視し、改善点をより的確に特定することで、最終的に全体的なパフォーマンスとSEOランキングを向上させることができます。

    ページが実際のユーザーにどのように反応するかを把握しましょう。

    INP最適化は、ビジネス成果とSEOランキングに直接影響を与えます。LogicMonitorは、あらゆるユーザーインタラクションにおけるコアWebバイタルパフォーマンスを追跡、診断、改善するために必要な可視性を提供します。

    よくあるご質問

    INPは、LCPやCLSといった他のCore Web Vitals指標とどのように異なるのでしょうか？

    LCP（Largest Contentful Paint）は読み込みパフォーマンスを、CLS（Cumulative Layout Shift）は視覚的な安定性を測定するのに対し、INPは特にインタラクティブ性と応答性を測定します。INPは、ユーザーの訪問全体を通してページがユーザー操作にどれだけ迅速に応答するかに焦点を当てており、他の指標を補完するものです。これら3つのコアWebバイタルを組み合わせることで、読み込み、インタラクティブ性、視覚的な安定性を網羅したユーザーエクスペリエンスの包括的なビューが得られます。

    INPは具体的にどのようなユーザーインタラクションを測定し、どのようなインタラクションが除外されるのでしょうか？GoogleはなぜFIDをINPに置き換えたのでしょうか？

     INPは、マウスのクリック、キーボードのキー押下（物理キーボードまたはオンスクリーンキーボード）、タッチスクリーンデバイスのタップという3つの主要なインタラクションタイプを測定します。ホバー、スクロール、その他の受動的なインタラクションは測定しません。測定される各インタラクションには、関連するすべてのイベントが含まれ、最も長いイベントがインタラクションのレイテンシを決定します。たとえば、キーボードインタラクションには、keydown、keypress、keyupイベントが含まれます。

    ウェブサイト上でINPスコアが低い原因となっている具体的なインタラクションを特定するにはどうすればよいですか？

    WebPageTestやPageSpeed Insightsなどのツールは、Chromeユーザーエクスペリエンス（CrUX）データを使用して全体的なINPスコアを提供できます。Catchpointなどのリアルユーザーモニタリング（RUM）ソリューションは、個々のユーザー操作を詳細に可視化し、特定の操作にINP値を関連付け、最適化が必要な領域を正確に特定できるようにします。RUMツールは、ユーザーのリアルタイム操作をさりげなく追跡し、どの操作が遅延の原因となっているかに関するコンテキストデータを提供します。

    INPスコアの低さを改善するための、最も効果的な即効性のある対策は何ですか？

    最も効果的な短期的な改善策としては、入力ハンドラのデバウンス処理によるインタラクションの重複防止、メインスレッドをブロックする長時間のJavaScriptタスクの分割、DOMサイズの最小化による表示遅延の削減などが挙げられます。さらに、インタラクションを妨げる可能性のある繰り返しタイマーの使用を避け、setTimeout関数を使用してイベントコールバックを個別のタスクに分割することも有効です。これらの最適化により、INPの3つの主要コンポーネントである入力遅延、処理時間、表示遅延に対処できます。

    デントン千倉著

    テクニカルライター

    デントン・チクラは、テクニカルライターであり、長年にわたりオブザーバビリティを推進してきた人物です。彼は、サイト信頼性エンジニアやエンジニアリングチームがインターネットの回復力を強化するツールや機能を発見できるよう支援することに注力しています。監視、パフォーマンス、インフラストラクチャの交差点で活動し、複雑なシステムをより理解しやすく使いやすいものにすることで、高度な技術的詳細と実際の運用とのギャップを埋めています。彼の目標は、チームがより迅速に構築し、問題を早期に発見し、よりスマートに復旧できるよう支援し、最終的にはインターネットをすべての人にとってより良く、より信頼性の高い場所にすることです。

    免責事項: このブログで述べられている見解は著者の見解であり、LogicMonitor またはその関連会社の見解を必ずしも反映するものではありません。

    © LogicMonitor 2026 | 無断複写・転載を禁じます。 | ここで言及されているすべての商標、商号、サービス マーク、およびロゴは、それぞれの会社に帰属します。