まずやること(最短ルート)
- 重い操作(クリック/入力)を特定
- 長いタスク(Long Task)を減らす
- イベント処理とレンダリングを分割する
背景・判断のポイント
INPは“ユーザー操作に対する応答の速さ”です。原因の多くは、メインスレッドが長い処理(Long Task)で塞がり、イベント処理や描画が後回しになることです。
改善の勘所は、(1) 重い処理を減らす(不要JS/サードパーティ削減)、(2) まとめてやりすぎない(分割/遅延/仮想化)、(3) 初期化を軽くする、の3つです。
SEO文脈では、操作性の悪さが読了や回遊を落とし、間接的に不利になりやすいです。特にメニューや検索など“導線”が重いと影響が大きいです。
症状の例(あるある)
- クリックしてから反応するまでに“間”がある(特にスマホ)
- 入力フォームやメニュー操作がもたつく
- PageSpeed InsightsでINPが「不良/改善が必要」になっている
よくある原因
- 巨大なバンドルと初期化処理
- クリックで大量DOMを一気に更新している
- サードパーティスクリプトが重い
確認方法
- Chrome DevTools Performanceで長いタスクを確認
- 不要なサードパーティを一時停止して差分を見る
チェックリスト(確認漏れ防止)
- 重い操作(クリック/入力/スクロール)を特定し、再現手順を固定
- PerformanceでLong Taskの発生源(関数/ライブラリ)を特定
- 初期バンドルが大きすぎないか(不要な依存、アイコン一括読み込み等)
- サードパーティ(計測、チャット、広告)がINPを悪化させていないか
- 大量DOM更新(一覧、無限スクロール)が一気に走っていないか
対処
- JS分割、遅延読み込み、不要コード削除
- UI更新を分割(遅延/バッチ/仮想化)
- 重いサードパーティを整理
やってはいけない(悪化しやすい手)
- INPの原因を見ずに、とりあえず画像だけ軽くする(LCPは良くてもINPは別)
- 計測タグや外部スクリプトを増やし続ける(導線が死ぬ)
- 改善前後で再現条件が違い、計測がぶれる
再発防止
- 「新しい計測/チャット/広告」を入れる前にパフォーマンス予算を決める
よくある質問(Q&A)
INPは何が一番効きますか?
多くは“不要JSとサードパーティの整理”が効きます。次に、操作時のDOM更新を分割し、重い処理を遅延・分割することです。
どの操作が悪いか分かりません
まずは実ユーザーが多い導線(メニュー、検索、フォーム、CTA)を疑い、再現手順を固定します。DevToolsのPerformanceでLong Taskが出る操作が見つかりやすいです。
計測タグを外すしかない?
外すのが最速ですが、段階的に整理することもできます。遅延読み込み、不要なタグの削除、実行タイミングの見直しで改善するケースもあります。