Interaction to Next Paint (INP) の問題を特定して修正する：ステップバイステップガイド
RUMデータ、Chrome DevTools、LoAF APIを使用して、Interaction to Next Paintの問題を特定し、修正する方法を学びます。
Interaction to Next Paint (INP) の問題を特定し修正する
このページはInteraction to Next Paint (INP)シリーズの一部です。INPは、ユーザーの操作から次の視覚的な更新までの遅延を追跡し、サイトの応答性を測定します。優れたINPスコアは200ミリ秒未満です。500ミリ秒を超えると不良と評価されます。INPが初めての場合は、まずINPハブページで全体像を確認してください。
2025 Web Almanacによると、モバイルオリジンの23%が依然としてINPで不合格となっています。該当する場合は、次の手順に従ってください。Search Consoleで問題を確認し、Real User Monitoring (RUM)データで根本原因を診断します。その後、ローカルで再現し、各INPフェーズに的を絞った修正を適用します。
INPのヒント: ページの読み込みの初期段階でユーザーが操作した場合、INPは大幅に悪化することがほとんどです。そのため、INPのデバッグでは、すべての操作とページの読み込み状態を記録してください。
Table of Contents!
ステップ1: Search ConsoleでINPを確認する
最初のステップは、実際にINPの問題があるか確認することです。コードを変更する前に、推測ではなく実際のfield dataに基づいて作業できるよう、Google Search Consoleで問題を検証してください。
Google Search Consoleにログインします。左側のメニューでCore Web Vitalsをクリックし、モバイルまたはデスクトップを選択します（ヒント: ほとんどの場合、INPの問題はモバイルで最初に表面化するため、モバイルから始めてください）。
ここには、現在サイトに存在するCore Web Vitals関連のすべての問題の概要が表示されます。これらの問題のいずれかがINPに関連している場合、問題が存在することが確認できます。
ステップ2: Interaction to Next Paintの問題を特定する
Google Search ConsoleはURLグループ以外の情報を提供しないため、Interaction to Next Paintの問題の原因を特定することはできません。そのため、開発者の多くは手探りで作業を進めます。使用していないJavaScriptを削除したり（常に良い考えです）、main threadを分割したり（これも良い考えです）し始めますが、それだけでINPが完全に修正されることはほとんどありません。
だからこそ、INPを改善する際は、何が起きているかを正確に把握する必要があります。以下の4つの重要な質問への答えが必要です。
どの要素を操作したときにINPスコアが悪化するか。 通常、悪いINPスコアは単一の要素ではなく、問題の組み合わせによって引き起こされます。最も悪いものから順に、一つずつ対処する必要があります。
これらの操作はいつ発生するか。 ページの読み込みの初期段階で発生するのか、それともメインページが完全に読み込まれた後でも発生するのか。
これらの操作はどこで発生するか。 すべてのページで発生するのか、それとも特定のページでのみ発生するのか。
これらの操作をどうやって再現するか。 すでにお気づきかもしれませんが、INPの問題を再現するのは困難です。そのため、悪いINPスコアを出しているデバイスの特性を模倣し、成功に向けた環境を整える必要があります。
RUMトラッキングを設定する
これらの質問に答えるには、実際のユーザーを追跡し、Interaction to Next Paintで発生する可能性のある問題を記録し始める必要があります。RUMトラッキングを有効にする方法はいくつかあります。最初の方法は、Web Vitalsライブラリを使用して、結果を独自の分析バックエンドに送信することです。この方法の利点は、安価で柔軟性が高いことです。欠点は、追加の作業が多くなる可能性があることです。
Core Web Vitalsデータを独自のバックエンドに送信する代わりに、数多く存在するRUMツールのいずれかを使用するのも良い方法です。私たちはまさにこのユースケースのためにCoreDashを開発しました。CoreDashは、低コストで高速かつ効果的に機能するRUMツールです。もちろん、他にも多くのRUMソリューションが存在し、それらも機能します（ただし価格は高くなります）。
高いINPを引き起こす要素ごとの遅い操作を見つける
最も悪いINPスコアを引き起こしている、最も遅い操作を見つけることから始めます。CoreDashで「INP metric by Elements」順にページをリストアップすると、最も遅い操作が表示されます。最初の行をクリックして、これらの操作で指標をフィルタリングします。
悪いINPの操作がいつ発生するかを見つける
次に、フィルタリングされたURLを読み込み状態（load state）で並べ替えます。これにより、INPの根本原因についてより深い洞察が得られます。この例では、DOMコンテンツが読み込まれたときに高いINPが発生しています。これは、スクリプトは解析されたものの、非同期スクリプトやページのサブリソースがまだ読み込まれていないことを意味します。この場合、ページの読み込みが完全に終わる前の早い段階でのクリックがINPの悪化を引き起こしています。
影響が最も大きい読み込み状態をクリックして、さらにフィルタを作成し続けます。
高いINPスコアの原因となっているURLを見つける
最後に、最も遅い操作が発生した要素と該当する読み込み状態でフィルタリングした後、INPが最も悪いURLを確認します。この例では、特定のページセットで明確に発生していることがわかります。
デバイスの特性を見つける
高いInteraction to Next Paintを引き起こす遅い操作、読み込み状態、URLを特定したら、どのようなタイプの訪問者が最も悪いINPスコアを引き起こしているかを確認します。デバイスのメモリ、帯域幅、画面サイズ、その他のハードウェア特性を調べます。これらの特性を特定したら、問題の再現と記録に進みます。
Long Animation Frames (LoAF) APIを使用したINPの診断
Long Animation Frames API (LoAF)は、どのスクリプトや関数が遅い操作を引き起こしているかを正確に教えてくれます。古いLong Tasks APIとは異なり、LoAFはスクリプトのURL、関数名、フレームごとのタイミングの内訳を提供します。CoreDashなどのツールからのRUMデータと組み合わせると特に役立ちます。
以下のオブザーバーは、50ミリ秒を超えるフレームのLoAFエントリを収集し、スクリプトの帰属、期間、ブロック時間をキャプチャします。
// INP原因特定のためLong Animation Framesを監視
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
// 50msを超えるフレームのみをログ出力
if (entry.duration > 50) {
console.log('Long Animation Frame:', {
duration: entry.duration,
blockingDuration: entry.blockingDuration,
renderStart: entry.renderStart,
styleAndLayoutStart: entry.styleAndLayoutStart,
scripts: entry.scripts.map(script => ({
sourceURL: script.sourceURL,
sourceFunctionName: script.sourceFunctionName,
invokerType: script.invokerType,
invoker: script.invoker,
duration: script.duration
}))
});
}
}
});
observer.observe({ type: 'long-animation-frame', buffered: true }); LoAF APIは、どのスクリプトがINPの各フェーズに影響しているかを明らかにします。scripts配列は正確なソースファイルと関数名を伝え、renderStartとstyleAndLayoutStartは処理時間と描画遅延を区別するのに役立ちます。LoAFは現在Chromium専用（Chrome 123以降）であるため、FirefoxやSafariのデバッグでは、代わりにPerformanceパネルのトレースとRUMデータに依存してください。JavaScriptの非同期読み込み（asyncとdefer）がこれらのタイミングにどのように影響するかについては、専用のガイドを参照してください。
ステップ3: 高いINPスコアを引き起こす操作を再現しデバッグする
このデータを手に入れたら、根本原因の修正を始められます。
成功への準備: INPが失敗する状況を再現する
次に行うべきことは、失敗しているINPを再現することです。INPが失敗している可能性のある状況を模倣して実行します。
ChromeのPerformanceパネルを使用します。Chromeのデベロッパーツール（Ctrl+Shift+I）を開き、Performanceパネルを選択します。トップバーで、CPU Throttle（通常のモバイルデバイスをエミュレートするために4x slowdownに制限）、Network Throttle（平均的なモバイルデバイスを模倣するためにFast 3Gプリセットを選択）を設定し、ハードウェアの同時実行数（hardware concurrency）を4または8に設定して平均的なモバイルデバイスを模倣します。
利用可能なメモリが少ない状態でChromeを読み込むには（ネットワークとCPUの設定を下げるだけで十分な場合も多いですが）、DockerコンテナでChromeを起動し、割り当てるメモリを減らしてください。
ページを再読み込みして操作し、Core Web VitalsビジュアライザーでINPを確認する
ここで条件をシミュレートし、INPスコアがRUMデータで報告されたものと一致することを確認します。
ページを再読み込みし、適切なタイミングで適切な要素をクリックします。
パフォーマンストレースでINPをデバッグする
これは、これまでのステップで準備してきた目的の瞬間です。特定の操作がなぜ悪いInteraction to Next Paintスコアを引き起こしているのかを特定する時が来ました。
Chromeのデベロッパーコンソール（Ctrl+Shift+I）を開き、Performanceパネルに移動します。今度は円形の矢印アイコンをクリックして、ページを再読み込みし、記録を開始します（またはCtrl+Shift+Eショートカットを使用します）。記録が実行されている間に、悪いINPを引き起こす要素を操作します。数秒後、記録を停止してタイムラインを調べます。「Interactions」トラックで操作イベントを探し、「Main」トラックで対応するタスクを検査して、各フェーズでどのコードが実行されているかを正確に確認してください。
パフォーマンストレースの読み方
ChromeのPerformanceパネルでは、操作は「Interactions」トラックに色付きのバーとして表示されます。それをクリックすると、総INP時間とその内訳が表示されます。下の「Main」トラックには、操作中に実行された個々のタスクが表示されます。以下に注意してください。
- イベントハンドラ前のタスク: これらは入力遅延の原因となります。
- イベントハンドラ自体: これが処理時間です。
- ハンドラ完了後のレンダリング作業: これが描画遅延です。
これらの発見をLoAFデータと比較し、トレースで特定されたスクリプトがRUMツールの帰属データと一致することを確認します。これは、JavaScriptのスクロールハンドラが問題を引き起こしていないかを確認する良い機会でもあります。
ステップ4: INPの問題を修正する
どの操作が遅く、その理由は何かがわかりました。次は修正です。Interaction to Next Paintは、入力遅延、処理時間、描画遅延の3つのフェーズに分けられます。
各フェーズには異なるアプローチが必要です。以下はその概要です。完全な最適化ガイドについては、リンク先を参照してください。
入力遅延を最小化する:
入力遅延は、ページでの操作からイベントコールバックの実行が開始されるまでの時間です。ある程度の入力遅延は避けられませんが（ブラウザがコールバックをスケジュールする時間が必要です）、最小限に抑えることは可能です。
- long taskを避ける。タスクが実行されるたびにmain threadがブロックされ、イベントコールバックが待機状態になります。これは、早い段階でのクリックを最適化する際に特に重要です（その時点ではほとんどのスクリプトが実行中であるため）。JavaScriptのブロックを減らす戦略については、JavaScriptのasyncとdeferに関するガイドを参照してください。
- 新しいタスクを作成する際は注意する。たとえば、
setTimeout()を介した定期的なタスクや、mouseoverイベントのコールバックなど、INPイベントの前に発生する可能性が高いタスクです。 - 早い段階での操作を測定して評価する。インタラクティブな要素（サイト内検索要素など）が早く表示され、後から読み込まれるJavaScriptによって制御されている場合、その要素を操作しても即座にレイアウトの更新はトリガーされません。機能を優先するか、正しく機能するようになるまで要素を非表示または無効にしてください。
- Web Workerを使用して、ブラウザのmain thread外でJavaScriptを実行する。Web Workerを使用すると、スクリプトをmain thread外で実行できます。これにより、main threadのブロックを防ぎ、INPの入力遅延の問題を回避できます。
- あれば便利なサードパーティ製スクリプトは、ブラウザのアイドル時間に読み込む。スクリプトには重要度の違いがあります。重要なスクリプトを優先し、重要度の低いスクリプトはブラウザのアイドル時間に読み込むようにしてください。たとえばチャットスクリプトなどです。実用的なテクニックについては、JavaScriptを遅延させる14の方法のガイドを参照してください。
処理時間を最小化する
- 不要なコードを削除する。不要なコードとは、依然として実行される古いコードや、特定のページでは不要であるにもかかわらずCPU時間を消費している新しいコードのことです。これは、INPを即座に改善するための最も簡単な方法です。
- 次の描画の前に実行する必要のないコードを遅延させる。コードを、INPの前に実行しなければならない重要なコードと、重要でないコード（アナリティクスの送信など）に分割し、
requestIdleCallback()メソッドを使用して描画イベントの後にスケジュールします。 - 描画の前に実行しなければならないコードを最適化する。コードを確認し、遅い部分や非効率な部分を書き直します。
- 即座にフィードバックを提供する。複雑なタスクや遅くなる可能性のあるタスクでは、メインのコードを実行する前に即座にフィードバックを提供します。
描画遅延を最小化する
- DOMを小さくシンプルに保つ。ネストされたDOMノードが多数あるページをレンダリングするよりも、ネストされていない少数のシンプルなDOM要素（HTMLノード）があるページをレンダリングする方が、ブラウザにとってはるかに簡単です。過大なDOMサイズの修正に関する詳細を確認してください。
- content-visibilityを使用して画面外のコンテンツを遅延レンダリングする。content-visibilityは、画面外のコンテンツのレンダリングを遅らせ、そのコンテンツを必要なタイミングでレンダリングすることで、ページの可視部分のレンダリングを高速化します。
迅速な修正: scheduler.yield()でmain threadにyieldする
重要な作業とそうでない作業の間でmain threadにyieldすると、3つのINPフェーズすべてが一度に改善されます。scheduler.yield() APIは、これを行うクリーンな方法を提供します。APIをまだサポートしていないブラウザのfallbackを備えた、再利用可能なヘルパー関数を以下に示します。
async function yieldToMain() {
if ('scheduler' in window && 'yield' in window.scheduler) {
return await window.scheduler.yield();
}
return new Promise((resolve) => {
setTimeout(resolve, 0);
});
}
// イベントハンドラでの使用例
async function handleButtonClick() {
// 重要な作業: UIの更新
updateVisualFeedback();
// yieldしてブラウザに描画させる
await yieldToMain();
// 重要でない作業: アナリティクス、ロギング
sendAnalyticsEvent('button_click');
logInteraction();
} 各INPフェーズの詳細
各フェーズには独自の最適化戦略があります。
- 入力遅延: ユーザーの操作からイベント処理の開始までの時間を最小限に抑える方法を学びます。入力遅延は通常、3つのフェーズの中で最も短いですが、ページの起動時など、main threadがスクリプトの実行で忙しいときに急増します。
- </b>処理時間: 操作中に実行されるイベントハンドラコードを最適化します。ほとんどのページでは、ここで最適化の努力の大部分が報われます。
- 描画遅延: イベント処理に続くレンダリングと描画の作業を減らします。巨大なDOMを持つ複雑なページでは、これが最大のフェーズになることがよくあります。
3つのフェーズすべてにまたがる追加の戦略については、JavaScriptスクロールを廃止してINPを改善するおよびJavaScriptのasyncとdeferの選択に関するガイドを参照してください。
