INP(Interaction to Next Paint)が測っているのは、ページが表示されるまでの速さではありません。ボタンを押したり、メニューをタップしたりしてから、画面がそれに応じて実際に変化して見えるまでの「待たされ感」です。表示自体は一瞬で終わっているのに、クリックしても何も起きない数百ミリ秒があると、INPは悪化します。
「表示は速い」と「操作が速い」は別の話
ページの読み込み速度を測る指標(LCPなど)は、画像やテキストが画面に出てくるまでの時間を見ています。一方でINPが見ているのは、その後の話です。ユーザーが実際にボタンを押したりフォームに入力したりしたとき、ブラウザがその操作をどれだけ速く処理し、画面に反映できているかがINPの対象です。
表示速度の指標だけを見ていても、この問題は見つかりません。
何が反応を遅らせるのか
ボタンを押すと、その操作に対応する処理(多くはJavaScript)が実行され、その結果が画面に描画されるまでがINPの対象です。JavaScriptに限った話ではなく、描画そのものが重い場合も遅さの原因になります。ブラウザが別の重い処理に手を取られていると、ユーザーの操作への反応は後回しにされます。これが待たされる正体です。
よくある原因は次のようなものです。
- ページ読み込み時に大量の広告タグや計測タグが同時に動いていて、ブラウザが手一杯になっている
- 入力のたびに、画面全体を再計算するような作りになっているフォームや検索窓
- 一見軽そうなアコーディオンやタブの切り替えが、裏で不要な処理を毎回やり直している
- 遅れて読み込まれた画像やフォントの反映によるレイアウトの再計算が、ちょうど操作のタイミングと重なる
どれも「表示が遅い」わけではなく、「ブラウザが今まさに忙しい」という状態です。ユーザーからは、ページは出ているのに反応だけがもたつく、という形で体感されます。
数値より先に見るべきもの
INPの数値そのものを追いかける前に、まず自分でサイトを操作してみることをおすすめします。検索窓に文字を打つ、メニューを開く、カートに追加するボタンを押す。その一つひとつで「押した実感」から「画面が変わる」までに間があるかどうかです。間があるなら、そこがどんな処理をしているかを疑う価値があります。
逆に、操作してみて特に引っかかりを感じないなら、数値上わずかに基準を超えていたとしても、体験としての優先度は高くないことが多いです。数値は目安であって、それ自体が目的ではありません。
改善は「軽くする」より「順番を変える」こと
INPの改善というと、JavaScriptを減らす話だと思われがちですが、実際には「何を後回しにできるか」を整理する作業であることが多いです。ユーザーの操作に直接関係のない処理(計測タグ、裏側でのデータ送信など)を、操作への反応より後に回すことで、メインスレッドの混雑が原因だった場合には改善につながります。ただし、これは広告や計測の仕組みそのものを作り変える必要がある場合もあり、見た目ほど簡単な修正では済まないこともあります。
表示速度の作り込みは、こうした操作性の細部まで含めた設計の積み重ねです。集客設計への考え方では、検索から来た人が実際にページでどう待たされているかという視点も扱っています。