「Interaction to Next Paint（INP）」を解決！
ウェブサイトのパフォーマンスは、ユーザーの満足度やSEOに大きく影響します。特に、Interaction to Next Paint（INP）は、ユーザーの操作に対してページがどれだけ素早く反応できるかを測定する重要な指標です。
INPが悪いと、クリックやタップをしても反応が遅く感じられ、ユーザー体験が損なわれます。この記事では、PageSpeed InsightsでINPが悪いと表示された場合に、どこを確認し、どのように改善すればよいかを初心者にもわかりやすく解説します。
INPとは何か？
Interaction to Next Paint（INP）とは、ユーザーがページ上で操作を行ってから、次に画面が更新されるまでの時間を測定する指標です。
対象となる操作には、クリック、タップ、キーボード入力などがあります。たとえば、ボタンを押したのに反応が遅い、メニューを開くまでに時間がかかる、入力フォームの反応が重いといった状態は、INPの悪化につながります。
PageSpeed Insightsでは、INPの目安は以下のように分類されます。
- 良好：200ミリ秒以内
- 要改善：200ミリ秒超〜500ミリ秒以内
- 遅い：500ミリ秒超
Core Web Vitalsでは、実際のユーザー体験をもとにした75パーセンタイルの値が重視されます。つまり、一部の速い環境だけでなく、多くのユーザーにとって快適に操作できているかが重要です。
INPとFIDの違い
以前は、応答性の指標としてFID（First Input Delay）が使われていました。しかし、現在はINPがCore Web Vitalsの応答性指標として使われています。
FIDは最初の入力遅延だけを測定する指標でした。一方、INPはページ滞在中に発生した複数の操作をもとに、全体的な応答性を評価します。そのため、INPの方が実際の使い心地に近い指標といえます。
INPが悪化する主な原因
INPが悪化する原因は、主にブラウザのメインスレッドが忙しくなり、ユーザー操作への反応が遅れることです。特にJavaScriptの影響が大きくなります。
JavaScriptの実行時間が長い
JavaScriptの実行に時間がかかると、ユーザーの操作に対する反応が遅れます。重い処理、不要なスクリプト、非効率なコード、複雑なイベント処理などが原因になります。
メインスレッドがブロックされている
ブラウザのメインスレッドは、JavaScriptの実行、HTMLやCSSの解析、レイアウト計算、描画などを担当しています。このメインスレッドが他の処理で埋まっていると、ユーザーの操作にすぐ反応できません。
長いタスクが発生している
ブラウザ上で長時間続く処理があると、その間は他の操作が待たされます。特に、50ミリ秒を超えるような長いタスクが多いページでは、INPが悪化しやすくなります。
DOMが複雑になりすぎている
ページ内のHTML要素が多すぎたり、複雑な構造になっていたりすると、レイアウト計算や描画に時間がかかります。特に、クリック後に大きなDOM変更が発生するページでは注意が必要です。
外部スクリプトが多い
広告、アクセス解析、SNS埋め込み、チャットツール、タグ管理ツールなどの外部スクリプトが多いと、メインスレッドの負荷が増えます。自分で書いたコードだけでなく、外部サービスもINP悪化の原因になります。
INPを改善するための具体的な解決策
INPを改善するには、ユーザー操作後に発生する処理を軽くし、画面更新までの時間を短くすることが重要です。
PageSpeed Insightsで遅い操作を確認する
まずはPageSpeed Insightsで、INPの評価を確認します。フィールドデータがある場合は、実際のユーザー環境でのINPを確認できます。
さらに詳しく調べる場合は、Chrome DevToolsのPerformanceパネルを使い、クリックやタップ時にどの処理が重くなっているかを確認します。
JavaScriptを最適化する
JavaScriptの最適化は、INP改善で最も重要な対策の1つです。
- 不要なJavaScriptを削除する：使っていない機能やプラグインのスクリプトを減らします。
- コード分割を行う：最初からすべてのJavaScriptを読み込まず、必要なタイミングで必要な分だけ読み込みます。
- 処理を軽くする：クリックや入力のたびに重い処理を実行しないようにします。
- イベント処理を見直す：スクロール、入力、クリックなどのイベントで過剰な処理を行っていないか確認します。
- JavaScriptを圧縮する：Terserなどを使い、ファイルサイズを小さくします。
asyncとdeferを適切に使う
外部JavaScriptを読み込む場合、asyncやdeferを使うことで、HTMLの解析や描画を妨げにくくできます。
ただし、asyncは読み込み完了後すぐに実行されるため、スクリプトの順番に依存する場合は注意が必要です。一般的なサイトでは、順番を保ちやすいdeferの方が扱いやすい場合があります。
<script src="example.js" defer></script>すべてのスクリプトに機械的に付けるのではなく、動作確認を行いながら設定しましょう。
長いタスクを分割する
1つの処理が長く続くと、その間にユーザー操作が待たされます。重い処理は小さく分割し、ブラウザが途中で入力や描画を処理できるようにします。
- 重い処理を一度に実行しない：大量のデータ処理やDOM更新をまとめて行わないようにします。
- 処理を分割する：短い処理に分けて、ブラウザが操作に反応できる余地を作ります。
- 不要な再計算を避ける：同じ計算やDOM取得を何度も繰り返さないようにします。
Web Workerを活用する
重い計算処理やデータ処理がある場合は、Web Workerを使ってメインスレッドの外で処理する方法があります。
ただし、Web WorkerはDOMを直接操作できないため、すべての処理に使えるわけではありません。画像処理、検索処理、大量データの計算などに向いています。
DOM操作を減らす
クリックやタップのたびに大量のDOMを変更すると、レイアウト計算や描画が重くなります。
- DOM要素を増やしすぎない：不要な入れ子や大量の要素を減らします。
- 一度に大きな変更をしない：必要な部分だけを更新します。
- レイアウトの再計算を減らす：サイズ取得とスタイル変更を何度も交互に行わないようにします。
CSSを最適化する
CSSもINPに影響することがあります。特に、複雑なセレクタや大量のスタイル、重いアニメーションは描画負荷を高めます。
- 未使用のCSSを削除する：使っていないCSSを減らします。
- 複雑すぎるセレクタを避ける：過度に深いセレクタや広範囲に影響する指定を見直します。
- 重いアニメーションを避ける：幅や高さ、位置を頻繁に変更するアニメーションは負荷が高くなりやすいです。
- transformやopacityを活用する：比較的軽いアニメーションに置き換えられる場合があります。
外部スクリプトを見直す
外部スクリプトは便利ですが、INPを悪化させる原因にもなります。特に、ファーストビュー付近で広告やSNS埋め込み、チャットツールを多く読み込んでいる場合は注意しましょう。
- 使っていないタグや計測スクリプトを削除する。
- 広告やSNS埋め込みを必要な場所だけに限定する。
- チャットツールなどは、ユーザー操作後に読み込むことも検討する。
- タグマネージャー内に不要なタグが残っていないか確認する。
画像やリソースを最適化する
画像の最適化はLCPほど直接的ではありませんが、ページ全体の負荷を下げることでINP改善にも役立つことがあります。
- 適切なサイズで提供する：表示サイズに合わせた画像を使います。
- WebPやAVIFを利用する：画像の容量を減らし、読み込み負荷を軽くします。
- 遅延読み込みを使う：画面外の画像には
loading="lazy"を指定し、初期読み込みを軽くします。
<img src="example.webp" alt="サンプル画像" loading="lazy" width="600" height="400">以下のページでは、画像をWebP形式に変換・圧縮できます。圧縮前後を比較しながら圧縮率を指定できます。
WordPressサイトで特に確認したいポイント
WordPressでは、テーマやプラグイン、広告タグ、アクセス解析タグなどがINPに影響することがあります。
- 不要なプラグインを停止または削除する。
- 重いスライダー、ポップアップ、チャット機能を見直す。
- 広告やSNS埋め込みを入れすぎない。
- キャッシュ系プラグインでJavaScriptの最適化を試す。
- JavaScriptの遅延設定後は、メニューやフォームが正常に動くか必ず確認する。
- テーマが重い場合は、軽量なテーマへの変更も検討する。
用語の解説
メインスレッド
メインスレッドとは、ブラウザがページ表示やユーザー操作への応答を行う中心的な処理場所です。JavaScriptの実行、CSSの解析、DOM操作、レイアウト計算、描画などが行われます。ここが忙しくなると、クリックやタップへの反応が遅くなります。
長いタスク
長いタスクとは、ブラウザのメインスレッドを長時間占有する処理のことです。目安として50ミリ秒を超える処理は長いタスクとされ、ユーザー操作への応答を妨げる原因になります。
Web Worker
Web Workerは、ブラウザでバックグラウンド処理を行うための仕組みです。メインスレッドとは別の場所でJavaScriptを実行できるため、重い計算処理などを分離できます。
コード分割
コード分割とは、大きなJavaScriptファイルを小さな単位に分け、必要なタイミングで必要な部分だけを読み込む方法です。初期読み込みや実行負荷を減らすことができます。
DOM
DOMとは、HTML文書をブラウザが扱いやすい形にした構造のことです。DOMが大きく複雑になるほど、変更や描画に時間がかかりやすくなります。
最も取り組みやすい解決策
初心者が最初に取り組みやすいのは、不要なJavaScriptやプラグインの見直しです。
特にWordPressでは、使っていないプラグイン、重いスライダー、ポップアップ、チャットツール、広告タグ、SNS埋め込みなどを減らすだけでも、INPが改善することがあります。
次に、JavaScriptのdefer設定、長いタスクの分割、外部スクリプトの読み込みタイミングの見直しを行うと、さらに応答性を改善しやすくなります。
INPは「ページが表示される速さ」ではなく、「操作したときの反応の速さ」を見る指標です。表示速度だけでなく、クリックやタップ後の動きが重くないかを意識して改善していきましょう。
まとめ
- INPは、クリック・タップ・キーボード操作などに対するページの応答性を測る指標です。
- 良好なINPの目安は200ミリ秒以内です。
- 2024年3月以降、INPはFIDに代わるCore Web Vitalsの応答性指標として使われています。
- 主な原因は、JavaScriptの実行時間、メインスレッドのブロック、長いタスク、重いDOM、外部スクリプトなどです。
- まずはPageSpeed InsightsやChrome DevToolsで、どの操作が遅くなっているかを確認することが大切です。