「Interaction to Next Paint (INP)」を解決！
ウェブサイトのパフォーマンスは、ユーザーの満足度やSEO（検索エンジン最適化）に大きく影響します。特に、Interaction to Next Paint (INP)は、ユーザーの操作に対する反応の速さを測定する重要な指標です。INPが遅いと、クリックやタップに対して表示が遅延するため、ユーザー体験が損なわれる可能性があります。この記事では、PageSpeedInsightsにおけるINPの改善方法を詳しく解説します。
INPとは何か？
Interaction to Next Paint (INP)は、ユーザーの操作（クリックやタップなど）に対して次の画面描画が行われるまでの時間を測定する指標です。具体的には、ページがインタラクションを受けてから、その結果が表示されるまでにかかる時間を示します。
PageSpeedInsightsでは、INPの目標値が以下のように設定されています：
- 良好：200ミリ秒以内
- 要改善：200ミリ秒〜500ミリ秒
- 遅い：500ミリ秒以上
この指標を改善することで、ユーザーがウェブサイトを操作したときの応答性が向上し、より快適な体験を提供することができます。
INPが悪化する原因
INPが悪化する原因にはいくつかの要因があります。それぞれの原因に対して、具体的な解決策を紹介します。
JavaScriptの実行時間が長い
JavaScriptの実行が遅いと、ユーザー操作に対する応答が遅れます。特に、重い処理や非効率なコードが原因で、ブラウザが次の描画を行うまでの時間が増加することがあります。
メインスレッドのブロック
ブラウザのメインスレッドが他のタスクでブロックされていると、ユーザーの操作に対する応答が遅れます。たとえば、大量のJavaScriptやCSSの解析、画像のデコードなどが同時に行われている場合、描画が遅れることがあります。
長いタスクの実行
ブラウザが長時間実行するタスク（50ミリ秒以上）があると、他の操作がブロックされるため、INPのスコアが悪化します。
INPを改善するための具体的な解決策
INPの改善には、以下の具体的な対策が効果的です。これらの方法を組み合わせることで、応答性を大幅に向上させることができます。
JavaScriptの最適化
JavaScriptの最適化は、INPを改善するために非常に重要です。以下の方法で、JavaScriptの実行時間を短縮できます。
- コード分割（Code Splitting）：JavaScriptを1つの巨大なファイルとせず、複数のファイルに分割し、必要な部分のみをロードすることで、初期の実行時間を短縮します。
- 不要なコードの削除：使っていないJavaScriptを削除し、コードベースを軽量化します。
- 非同期実行：JavaScriptを非同期で実行することで、メインスレッドのブロックを防ぎます。次のコード例は、JavaScriptを非同期で読み込む方法を示しています。ただし、JavaScriptが予期せぬ動きをすることがあるので、必ず動作確認をしてください。
<script src="example.js" async></script>- 圧縮ツールを使用：UglifyJSやTerserなどのツールを使って、JavaScriptを圧縮し、ファイルサイズを小さくすることができます。
メインスレッドの作業を軽減する
メインスレッドの作業を軽減することで、INPのスコアを向上させることができます。
- 長いタスクの分割：1つのタスクが長時間続く場合、それを分割して小さなタスクにすることで、メインスレッドのブロックを防ぎます。
- Web Workerの使用：Web Workerを使ってバックグラウンドで処理を行うことで、メインスレッドの負荷を減らします。
CSSの最適化
CSSもINPに影響を与えることがあります。特に、不要なCSSが多い場合、レンダリングが遅れることがあります。
- 未使用のCSSの削除：使用していないCSSを削除し、スタイルシートを軽量化します。
- 重要なスタイルをインライン化：重要なCSSをHTML内にインライン化することで、最初の描画を速めることができます。
- 遅延読み込み：必要な場合にのみスタイルシートを読み込むことで、初期のレンダリング時間を短縮します。
画像やリソースの最適化
画像やその他のリソースの最適化も、INPの改善に寄与します。
- 適切なサイズで提供：表示するサイズに合わせて画像をリサイズし、無駄なデータを減らします。例えば、600pxで表示しているにもかかわらず元の画像が4000pxとなっているときは元の画像を最初から600pxにしましょう。
- 最新のフォーマットを使用：WebPなどの軽量な画像フォーマットを使用することで、ファイルサイズを減らし、読み込み時間を短縮します。
- 遅延読み込み（Lazy Loading）：画像やリソースを遅延読み込みすることで、初期の読み込み時間を短縮します。次のコード例のように設定します。
<img src="example.jpg" alt="サンプル画像" loading="lazy">
用語の解説
わかりにくい用語について説明します。
メインスレッド
メインスレッドとは、ブラウザがページをレンダリングしたり、ユーザーの操作に応答したりするための中心的な処理を行うスレッドです。JavaScriptやCSSの解析、DOM操作などがメインスレッドで行われます。これがブロックされると、操作の応答性が悪化します。
Web Worker
Web Workerは、ブラウザでバックグラウンド処理を行うための技術です。メインスレッドとは別のスレッドでJavaScriptの実行ができるため、複雑な計算やデータ処理を行いながらも、メインスレッドのパフォーマンスに影響を与えません。
コード分割（Code Splitting）
コード分割とは、大きなJavaScriptファイルを小さな部分に分割し、必要な部分のみをロードすることで、初期ロードの時間を短縮する技術です。これにより、ページの表示速度が向上します。
最も取り組みやすい解決策
最も取り組みやすい解決策は、JavaScriptの最適化と非同期実行の設定です。特に、非同期実行を利用することで、メインスレッドのブロックを防ぎ、応答性を大幅に改善できます。これに加えて、画像の遅延読み込みを導入することで、さらにパフォーマンスを向上させることが可能です。
これらの対策を組み合わせ、継続的にサイトのパフォーマンスをチェックすることで、ユーザー体験の向上とSEO効果の向上が期待できます。