株式会社サイプレスCypress
ホームページ制作How to Improve INP

INPを改善する方法|操作の反応が遅いサイトの直し方

ボタンを押したのに一瞬固まる、入力してもすぐ反映されない。こうした「操作したときの反応の遅さ」を数値化した指標がINP(Interaction to Next Paint)です。INPは以前のFIDに代わってCore Web Vitalsに採用された指標で、ページ滞在中の操作全体に対する応答性を評価します。表示は速いのに操作がもたつくサイトは、このINPに問題を抱えていることが少なくありません。ここでは原因の切り分けと直し方を解説します。なお応答性の改善は快適さに直結しますが、表示速度と同様に検索順位を決める数多くの要素の一つにすぎず、改善すれば必ず順位が上がるわけではない点は前提として押さえておきましょう。

目次

  1. 01INPとは何か・FIDとの違い
  2. 02操作の反応が遅くなる仕組み
  3. 03重いJavaScriptを減らす・分割する
  4. 04入力に即座に反応を返す工夫
  5. 05外部スクリプト・タグの見直し
  6. 06INPを計測して改善を確認する
  7. 07よくある質問(FAQ)

INPとは何か・FIDとの違い

INPはユーザーがクリック・タップ・キー入力といった操作を行ってから、その結果として画面が次に描き変わるまでの遅れを測る指標です。ページ滞在中に起きた多数の操作を見て、その中でも遅かった部類の応答時間を代表値として扱います。以前使われていたFIDは「最初の操作に対する反応の遅れ」だけを見ていましたが、INPはページ全体を通じた操作の応答性を評価する点が異なります。つまり最初の一回だけでなく、使い続けたときの快適さまで含めて見る、より実態に近い指標です。2026年7月10日時点で公開されている目安では、良好とされるのはおおむね200ミリ秒以下、改善が必要とされるのが200から500ミリ秒、遅いとされるのが500ミリ秒超という区分です。この数値は確認日時点のものであり、指標や基準は変更される場合があります。最新情報はGoogleの公式ドキュメントをご確認ください。INPを意識することは、単に数値を良くするためだけでなく、ユーザーがストレスなくサイトを操作できる状態をつくることにつながります。

操作の反応が遅くなる仕組み

ブラウザは基本的に一本の主要な処理の流れ(メインスレッド)で、JavaScriptの実行も画面の描き変えも順番にこなしています。ここで実行に時間のかかるJavaScriptの処理が走っていると、ユーザーが操作しても、その重い処理が終わるまで反応を返せません。これが操作の遅れとして体感されます。特に、一度に大量の計算を行う処理、たくさんの要素をまとめて作り替える処理、外部から読み込んだ解析タグや広告関連のスクリプトが重い場合などに、この詰まりが起きやすくなります。つまりINPの改善とは、突き詰めればメインスレッドを長くふさぐ処理をいかに減らし、いかに細切れにするかという課題に行き着きます。逆に言えば、派手な機能をたくさん詰め込むほど、それらの処理が操作の応答性を犠牲にしていないかを気にかける必要が出てきます。原因を仕組みから理解しておくと、対策の狙いどころがはっきりします。特に、スライダーやアニメーション、リアルタイムに反応する検索や絞り込みといった機能は、便利さと引き換えにメインスレッドへの負荷を高めやすい部分です。こうした機能を載せる際は、操作の応答が犠牲になっていないかを計測で確かめながら進めることが、快適さを保つうえで欠かせません。

重いJavaScriptを減らす・分割する

最も効果が見込めるのは、そもそも実行するJavaScriptの量を減らすことです。使っていない機能やライブラリを取り除く、初期表示に不要なスクリプトは後から読み込むよう遅らせる、といった整理で、操作をふさぐ処理の総量を抑えられます。それでも必要な重い処理が残る場合は、一度に実行せず小さな単位に分割し、処理の合間にブラウザが操作へ反応できる隙間を作る方法があります。長く連続する処理を意図的に区切ることで、その途中でユーザーの操作を受け付けられるようになり、体感の反応が改善する傾向があります。加えて、画面の描き変えを伴わない純粋な計算処理であれば、メインスレッドとは別の場所(ワーカー)で処理させることで、操作の応答を妨げないようにする手法もあります。いずれも実装には技術的な検討が必要ですが、方針としては「重い処理を減らす・小さく分ける・別の場所に逃がす」という三つの発想で考えると整理しやすくなります。

入力に即座に反応を返す工夫

ユーザーの操作に対しては、重い処理の完了を待たずに、まず見た目の反応だけでも即座に返すことが体感の改善に有効です。たとえばボタンを押した瞬間に押された見た目に変える、読み込み中であることを示す表示を出す、といった軽い反応を先に見せ、時間のかかる本処理はその後で進めます。これにより、実際の処理時間が同じでも「反応してくれた」という安心感が得られ、もたつきの印象が和らぎます。また、入力欄でキーを打つたびに重い処理が走る作りだと、打つほどに反応が遅くなります。こうした場合は、入力が一段落してから処理を実行するよう間引く工夫(連続する操作をまとめて扱う)で、無駄な処理を減らせます。スクロールやマウス移動など高頻度で発生する操作に重い処理を結びつけている場合も同様で、実行の頻度を抑えることが応答性の維持につながります。ユーザーの操作を止めないという視点で作りを見直すと、改善の糸口が見つかりやすくなります。

外部スクリプト・タグの見直し

解析ツール、広告、チャット、SNSの埋め込み、ヒートマップといった外部から読み込むスクリプトは、便利な一方でメインスレッドを圧迫し、INPを悪化させる原因になりがちです。まずは導入しているタグを棚卸しし、本当に必要なものだけに絞ることが第一歩です。使われていない古いタグが残っているケースは珍しくありません。残すものについても、ページの初期表示や操作の応答に割り込まないよう、読み込みのタイミングを遅らせる、非同期で読み込むといった指定を検討します。タグの管理ツールを使っている場合は、そこで読み込まれる各タグの実行タイミングを整理することも有効です。外部スクリプトは提供元の都合で挙動が変わることもあるため、導入後も定期的に影響を確認する姿勢が望まれます。機能を足すことばかりに目が向きがちですが、応答性を保つうえでは「何を載せないか」の判断も同じくらい重要です。過剰なタグの整理は、INPだけでなく全体の表示速度の改善にもつながる傾向があります。

INPを計測して改善を確認する

INPは実際にユーザーが操作したときに初めて測れる指標のため、その場で一度読み込むだけの計測では実態がつかみにくい面があります。そこで、実際の利用者の環境で測定されたデータ(フィールドデータ)を参照することが特に重要になります。PageSpeed Insightsのフィールドデータや、Search Consoleのウェブに関する主な指標のレポートで、INPが問題とされているページを把握できます。加えて、ブラウザの開発者向け機能を使い、実際にボタンを押したりフォームを操作したりしながら、どの操作でどれだけ遅れが生じ、どの処理が原因になっているかを確認します。原因となっている重い処理を特定できたら、前述の減らす・分ける・逃がす・後回しにするといった対策の中から適切なものを選び、変更後に再計測して効果を見ます。地道な計測と検証の繰り返しが応答性の向上につながりますが、これは改善を保証するものではなく、サイトの機能構成や利用状況によって効果の程度は変わる点を理解して進めるとよいでしょう。

よくある質問(FAQ)

QINPはどのくらいの値を目安にすればよいですか
A2026年7月10日時点の公開情報では、良好とされるのはおおむね200ミリ秒以下が目安とされています。ただしこの数値は確認日時点のものであり、指標や基準は変更される場合があります。最新情報はGoogleの公式ドキュメントをご確認ください。まずは実際の利用者環境のデータで現状を把握するとよいでしょう。
QINPとFIDはどう違いますか
AFIDは最初の操作に対する反応の遅れだけを見ていましたが、INPはページ滞在中の操作全体に対する応答性を評価します。最初の一回だけでなく使い続けたときの快適さまで含むため、より実態に近い指標として位置づけられています。
Q表示は速いのに操作がもたつくのはなぜですか
A表示速度と操作の応答性は別の要因で決まります。表示が速くても、操作時に重いJavaScriptがメインスレッドをふさいでいると反応が遅れます。INPの観点で、操作を妨げている処理がないかを個別に確認することが必要です。
Q外部タグを減らすとINPは改善しますか
A解析や広告などの外部スクリプトがメインスレッドを圧迫している場合は、不要なタグの整理や読み込みタイミングの調整で改善につながる傾向があります。ただし他の原因が残っていると効果が限定的になることもあるため、計測で原因を特定しながら進めることをおすすめします。
QINPの改善は自社で対応できますか
A軽微なタグ整理は自社でも可能ですが、重い処理の分割や別スレッドへの移行などは技術的な検討が必要です。ホームページ制作に対応できる会社に相談すると切り分けがスムーズです。株式会社サイプレスでもNext.jsやWordPressでの応答性改善のご相談を承っています。
C

株式会社サイプレス 編集部

MEO・SEO・AIO・AI活用支援の専門家チームが、実績に基づいた情報を発信しています。

Consultation

ホームページ制作について、専門家にご相談ください

自社の状況に合わせた具体的なアドバイスが必要な方は、お気軽にお問い合わせください。無料相談対応しています。

無料でご相談する