このページではINP(Interaction to Next Paint）についてわかりやすく解説していきます。

計測される仕組みから、評価内容までを解説していきます。

INPの改善方法を知りたい方は「INPの改善施策」の記事をご覧ください。

INP(Interaction to Next Paint）とは

INP（Interaction to Next Paint）とは、ユーザーがWebページ上でユーザーの操作（クリック・タップ・キー押下）を行ってから、その操作に反応する画面の「次の描画」が行われるまでの応答時間を測定する指標です。

例えば、ユーザーがボタンをクリックした時に、そのクリックからメニューが開く、画像が拡大されるなど、画面に何らかの変化が表示されるまでの時間を計測します。

INPは、Webサイトの「応答性」を測る重要な要素として2024年3月からGoogleのCore Web Vitalsの新しい指標となりました。

従来のFID（First Input Delay）に代わって採用されたもので、より実用的で包括的な評価が可能になっています。

計測対象となるインタラクションの定義

INPを理解するためには、まず「インタラクション」の概念を知る必要があります。

INPは、以下の操作によって発生するインタラクションを計測対象とします。

主にマウスインタラクション、タッチインタラクション、キーボードインタラクションといったインタラクションがあり、それぞれの計測タイミングがあります。

計測の対象となる操作をここで把握しておきましょう。

INPの計測対象外のインタラクション

計測対象外となる操作もあります。

主にはページスクロール、マウスホバー、ズーム操作といった操作はINPの計測対象外となります。

下記対象外のインタラクション例です。

INPとFIDの違い

INPの前身の指標であるFID（First Input Delay）との主な違いを理解することで、なぜINPが採用されたのかがより明確になります。

主にFIDは「ページが初回操作にどれだけ早く反応し始めるか」を評価対象としてきましたが、INPに変わり「ユーザーが実際に視覚的フィードバックを得るまでの時間」を評価するように変わりました。

大きい違いとしては、計測対象の違いと測定内容の違いがあります。

INPとFIDの計測対象の違い

FIDはページ読み込み中の初回操作のみを対象とするのに対し、INPはページ滞在期間中のすべての操作が対象となり、その中で最も遅い応答時間を評価する形に変わりました。

INPとFIDの計測内容の違い

また、測定内容についても大きな違いがあります。

FIDは、入力遅延（クリックやタップ後にイベントハンドラが実行される前まで）の時間のみの計測だったのに対し、INPは入力遅延 + 処理時間 + 表示遅延（クリックやタップ後からその描画がされるまで）まで計測する形に変わりました。

この違いにより、INPはより実際のユーザー体験に近い指標として評価されるようになりました。

INPの計測される仕組みをわかりやすく解説

INPは、1つのインタラクションが完了するまでの時間を以下の3つのフェーズに分けて計測します。

1. 入力遅延（Input Delay）
2. 処理時間（Processing Time）
3. 表示遅延（Presentation Delay）

上記の図のように、3つのフェーズがあります。

INPの計測は、インタラクションが起きたタイミングで計測が開始され、そのインタラクションによる次のフレームが画面に出た時点で計測が終了となります。

それぞれ詳しく解説していきます。

入力遅延（Input Delay）

入力遅延（Input Delay）は、ユーザーがクリックやタップを行ってからブラウザがその操作を受け取ってイベントハンドラが実行される前までの時間です。

ここのインタラクションでINPの計測が開始されます。

この遅延が発生する主な原因は、メインスレッドブラウザが他のタスク（JavaScriptの実行など）で忙しくなり、ユーザーの操作に対応できないのが要因です。

ここでは、巨大な同期処理やループ/タイマー、同期レイアウト強制などが遅延の原因となるケースが多いため、これらを意識して改善をしていくと良いでしょう。

処理時間（Processing Time）

処理時間（Processing Time）はユーザー操作に対応するイベントハンドラが開始してから終了するまでの同期的な実行時間です。

ここではDOM操作や重い計算、同期レイアウト計算等が含まれます。

特に処理の最小化や分割やバッチ化や非同期処理をしていくことで、処理時間も短縮できるようになります。

表示遅延（Presentation Delay）

表示遅延（presentation delay）は、イベントハンドラの実行が終わってから、ブラウザが次のフレームを実際に描画してユーザーに視覚的変化を提示するまでの時間です。

ここの次のフレームが描画された時点でINPの計測が終了となります。

ここでは、スタイル計算、大量のレイアウトの再計算、ペイント領域、複雑なエフェクトや高コストな合成、VSYNC待ち等が原因となることが多いです。

対策はレイアウトやペイントコストの削減、コンポジットだけで済む変更（transform/opacity中心に設計）、即時の軽量フィードバック設計も有効となります。

INPの評価基準

INPの評価は秒数で評価されます。

上記の画像のように200ミリ秒以下は良好で200ミリ秒〜500ミリ秒は改善が必要で500ミリ秒以上は不良といった評価となります。

PageSpeed Insightsでも200ミリ秒以内を推奨していて、SEOの評価にも影響がある要素となります。

INPが重要な理由

INP（Interaction to Next Paint）は、ユーザーがWebページ上でユーザーの操作（クリック・タップ・キー押下）を行ってから、その操作に反応する画面の「次の描画」が行われるまでの応答時間を測定します。

この時間が短くなることで下記のようなメリットが出てきます。

ユーザー体験（UX）の向上

INPの応答の速いページは、ユーザーが「サクサク動く」と感じる快適な操作感を提供し、ユーザーがストレスを感じにくい快適な操作環境になります。

そのため、より長くサイトを利用するようになり、再度訪問する可能性が高まります。

具体的には下記のような点で向上が見受けられます。

• 離脱率の低下
• 滞在時間の増加
• 再訪率の向上

離脱率や滞在時間が増えることでユーザー体験や満足度も高まり、再訪問率もあがります。

間接的に商品の購入や問い合わせの増加などビジネス面にもプラスに繋がります。

Core Web Vitalsの向上とSEOの評価向上

GoogleはINPをCore Web Vitalsの正式な指標として2024年3月に採用し、検索ランキングファクターの一部として重要視しています。

これらの指標の評価にも繋がり、特に検索順位や流入の向上に繋がります。

流入増加により、ビジネス面でのプラスも見込めます。

INPの計測方法

INPを改善するためには、まず現在の状況を正確に把握する必要があります。

代表的にはPageSpeed InsightsやChrome DevToolsなどの計測ツールで計測できます。

それぞれの使用方法を紹介します。

PageSpeed InsightsでINPを計測する方法

PageSpeed InsightsにアクセスしURLを入力し分析ボタンをクリックするだけで計測が行われます。

手順としては下記の手順で分析ができます。

1. PageSpeed Insightsにアクセス
2. 分析したいURLを入力
3. 「分析」ボタンをクリック
4. パフォーマンスの箇所で結果を確認

計測されると下記の画像のような表示となり、赤枠の部分でINPの計測結果も表示されます。

PageSpeed Insightsの計測の特徴をまとめると下記となります。

PageSpeed Insightsでの計測の特徴

• URL入力だけで簡単に確認できる
• 1度の計測でモバイル・PC両方簡単に確認できる
• 実際の利用環境での計測値になる
• Chromeユーザーの実測値を集計

INPの改善点などの詳細はPageSpeed Insightsだと詳しく出てこないので、簡単に計測された数値だけみたい！という時におすすめです。

Chrome DevToolsでINPを計測する方法

Chrome DevToolsでは、下記の手順で分析ができます。

使用方法

1. 対象ページでF12キーを押してDevToolsを開く
2. 「パフォーマンス」タブを選択（INP計測結果が表示）
3. 操作のINPの箇所を開くとフェーズ別に確認ができる

簡単にINP数値を確認したい場合は、パフォーマンスタブをクリックし、下記のような画面でINPの計測結果が表示されます。

さらに操作のINPと表示されているところをクリックすると、フェーズ別の数値も確認できます。

どの部分に時間がかかっているのか、細分化してみたい場合はこの方法がおすすめです。

よくある質問

Q: INPが悪いとSEOに影響しますか？

A: はい、INPはCore Web Vitalsの指標の一つとして、Googleの検索ランキングに影響を与えます。ただし、コンテンツの質や関連性の方が重要な要素であることも理解しておく必要があります。

Q: モバイルとデスクトップでINPの値は異なりますか？

A: はい、一般的にモバイルデバイスの方がINPの値は高くなる傾向があります。これは、モバイルデバイスの処理能力がデスクトップよりも低いためです。

Q: INPの改善にはどのくらい時間がかかりますか？

A: 改善内容によって異なりますが、基本的な最適化であれば数週間から数ヶ月で効果が現れます。ただし、根本的な改善には時間がかかる場合があります。

まとめ

INP（Interaction to Next Paint）は、現代のWebサイトにとって非常に重要な指標です。

ユーザーの操作に対する応答性を測定し、実際のユーザー体験と直結する指標として、SEOの観点からも無視できない要素となっています。

改善には技術的な知識が必要ですが、JavaScriptの最適化、DOM構造の改善、画像の最適化など、段階的にアプローチすることで大幅な改善が期待できます。

ユーザーファーストの視点を持ちながら、継続的な改善を行っていくことが、長期的な成功につながるでしょう。

INPの改善を通じて、ユーザーにとってより快適で使いやすいWebサイトを構築していきましょう。