INPは“どこで発生しているか”が重要｜実例の分析から読み解くボトルネック

INP（Interaction to Next Paint）は、単に数値を追うだけでは改善しづらい指標です。
LCPやCLSのように明確な対象があるわけではなく、ユーザー操作と画面変化のあいだの遅延を測るINPは、「どこで何が詰まっているか」を可視化しない限り、根本改善にはつながりません。

この記事では、INPが悪化するボトルネックの見つけ方と、それに対する具体的な対応策を、実例を交えて解説します。

なぜ「発生場所の特定」が重要なのか？

INPはユーザーがページ内で何らかの操作（クリック・タップ・キーボード入力）を行った際、そのインタラクションから画面が更新されるまでの時間を測定する指標です。

スコアが悪い＝すべてが遅い、とは限りません。ある特定のボタン操作やメニュー展開など、限られた場面が原因になっていることが非常に多く、該当箇所を特定しないまま、闇雲にサイト全体の速度改善を行っても意味がありません。

実例：スコアは良好なのにINPが悪いパターン

以下のようなケースでは、他のCore Web Vitals（LCP、CLSなど）が良好にもかかわらず、INPだけが悪化することがあります。

【例1】ドロワーメニューの展開が遅い

• 初期表示は高速
• しかし「ハンバーガーメニュー」をタップするとメニュー展開がもたつく
• JavaScriptでアニメーション処理やDOM再構築を伴う実装が重い

【例2】カルーセルやスライダーの矢印クリックにラグがある

• 一見スムーズに動いて見えるが、クリック後のDOM反映が遅延している
• requestAnimationFrame の処理順や transitionend イベント待機が悪さしている

【例3】フォーム入力時のバリデーションチェックが重い

• 入力中に逐次的にJavaScriptでバリデーションが走る
• 無駄な再描画が頻発して応答が鈍くなる

INPを可視化するツールと手順

具体的に「どこでINPが発生しているのか」を確認する方法は以下の通りです。

PageSpeed Insights

• ページ下部の「INP診断」セクションで、最も影響を与えているインタラクションが表示されます
• ただし、フィールドデータが無いとINPそのものが出ない場合もあります

Chrome DevTools（Performanceタブ）

• 録画しながら実際にクリックやタップ操作を行い、「Long task」や「イベント処理」のタイミングを確認
• Interactions セクションが表示される場合、INP該当の操作が赤枠でマークされる

Web Vitals Extension（2025年1月サポート終了）

• Chrome拡張機能「Web Vitals」を使用すれば、リアルタイムでINPを含むスコアが表示されます
• 特定の操作後にスコアが急落するかどうかを見て仮説を立てる

ボトルネックの代表例とその改善法

「思ったより早い」の正体を突き止める

ユーザーが「遅い」と感じるのは表示の一貫性や即時性の欠如です。
INPが高い状態では、「押してもすぐ反応しない」「読み込まれている感じがしない」といった体感的なストレスにつながります。

INPは見た目のスピードと操作のスピードのズレを数値化する指標とも言えます。だからこそ、単なる速度対策では改善できず、「どこで起きているか」を突き止めて最適化することが不可欠なのです。

INP対策の第一歩は「場所の特定」から

INP改善の出発点は、スコアの数字ではなく「発生箇所の特定」です。
実際にユーザーがどの操作でストレスを感じているかを見極め、その箇所だけに集中して改善を図るほうが、全体を手当たり次第に軽量化するより効果的です。

次回は、その中でも特に影響の大きい「JavaScriptの見直し」について、どこまで手を加えるべきか、その見極めの考え方を解説します。