ボタンを押しても画面がすぐ反応しない、フォームに文字を入力すると一瞬固まる――こうした「操作への反応の遅さ」を数値化した指標がINP(Interaction to Next Paint)です。2024年3月からGoogleのCore Web Vitals(ユーザー体験を測る主要指標群)の一部となり、SEOやCVR(コンバージョン率)にも影響します。この記事では、INPが何を測るのか、遅くなる典型的な原因、そして今日から着手できる改善手順を順に解説します。
INPとは何を測る指標か
INP(Interaction to Next Paint)は、ページ内でユーザーが行ったクリック・タップ・キー入力といった操作すべてを対象に、操作開始から画面上に視覚的な反応(次のペイント)が表れるまでの時間を計測します。ページ滞在中に発生した操作のうち、ほぼ最も遅かった応答時間が最終的なINPの値として採用される仕組みです。
以前使われていたFID(First Input Delay)は「最初の操作」だけを見る指標でしたが、INPはページ滞在中のすべての操作を評価するため、より実際のユーザー体験に近い指標とされています。ボタンを押した後のメニュー展開が遅い、検索ボックスに文字を打っても反映が遅れる、といった体感の悪さが数値に表れやすくなりました。
| 評価 | INPの値 | ユーザーの体感 |
|---|---|---|
| 良好 | 200ms以下 | 操作にほぼ即時反応している |
| 改善が必要 | 200ms〜500ms | 操作後にわずかな遅れや引っかかりを感じる |
| 不良 | 500ms超 | 操作しても反応が返らず、フリーズしたように感じる |
INPが遅くなる主な原因
INPの遅延はほとんどの場合、ブラウザのメインスレッド(JavaScriptの実行やレイアウト計算などを処理する単一の処理列)が長時間ブロックされることで起こります。具体的には次のような要因が重なっているケースが多く見られます。
- 1回の処理で50ms以上かかる「長時間タスク」が多数存在する(重い計算やDOM操作の連続実行など)
- サードパーティスクリプト(広告タグ、解析ツール、チャットウィジェットなど)がメインスレッドを占有している
- 入力イベント(クリックやキー入力)のハンドラー内で不要な再描画やレイアウトの再計算(リフロー)が発生している
- JavaScriptバンドルが肥大化し、初期実行やイベント処理に時間がかかっている
- 大量のDOM要素を一度に操作・更新している(巨大なリストの一括レンダリングなど)
INPを確認する方法
改善に着手する前に、現状のINPを正確に把握します。以下の方法を組み合わせると、実際のユーザー環境での値と、開発中に再現できる値の両方が確認できます。
- Google Search ConsoleのCore Web Vitalsレポートで実際のユーザーデータ(フィールドデータ)を確認する
- PageSpeed InsightsでURLを入力し、フィールドデータとラボデータ(模擬計測)の両方を見る
- Chrome DevToolsの「Performance」パネルで操作を記録し、長時間タスクを可視化する
- Chrome拡張機能「Web Vitals」でページ操作中のINP値をリアルタイムに確認する
特に「Performance」パネルでの記録は、どの処理がメインスレッドを占有しているかを特定するのに有効です。記録後に表示される「Long Tasks(長時間タスク)」の帯を確認し、どのスクリプトが原因か関数名から辿ることができます。
具体的な改善手順
原因を特定したら、以下の手順で優先度の高いものから対応します。すべてを一度に行う必要はなく、影響の大きい箇所から着手するのが効率的です。
- 不要なサードパーティスクリプトを削除、または遅延読み込み(必要になった時点で読み込む方式)に変更する
- 長時間タスクを50ms以下の単位に分割する(処理を複数のタスクに分けて、間にブラウザの描画を挟む)
- 入力イベントのハンドラー内で行っているDOM操作やレイアウト計算を必要最小限に絞る
- 巨大なリストや表は仮想スクロール(表示範囲だけを描画する手法)を検討する
- JavaScriptバンドルを分割し、初期表示に不要なコードは後回しで読み込む(コード分割)
- アニメーションやスタイル変更はCSSのtransform/opacityなど、レイアウト再計算が少ない手法に置き換える
- Performanceパネルで長時間タスクの発生箇所を特定した
- 広告タグ・解析ツールなどサードパーティスクリプトの読み込みタイミングを見直した
- 入力イベントハンドラー内の処理を軽量化した
- 巨大なDOM更新を分割・遅延させる仕組みを導入した
- 改善後に実データ(Search Console等)でINPの変化を確認する予定を立てた
よくある誤解と注意点
INP改善において陥りやすい誤解がいくつかあります。まず「画像を圧縮すればINPも良くなる」という誤解ですが、画像最適化は主にLCP(表示速度に関わる指標)の改善に効きます。INPはJavaScriptの実行効率に直結する指標であるため、画像対策だけでは改善しないケースが多いです。
また、「一度改善すれば終わり」と考えるのも危険です。新しい機能追加や広告タグの追加によって、再びメインスレッドが重くなることは珍しくありません。定期的にPageSpeed InsightsやSearch Consoleでチェックする運用を組み込むことをおすすめします。