INPの最適化方法：2026年に43%のサイトが不合格となるCore Web Vital

INPとCore Web Vitalsの新時代を理解する

あなたのサイトのユーザーエクスペリエンスは多くの要因に依存しますが、速度と応答性は極めて重要です。2026年には、Core Web Vitals（ページの体験を評価するためのGoogleの指標）が、INP（Interaction to Next Paint）の重要性の高まりとともに新たな様相を呈します。フロントエンド開発者やパフォーマンス管理者にとって、INPを理解し最適化することはもはや選択肢ではなく、必須事項です。もしあなたのサイトが操作時に固まるなら、INPが悪役である可能性が高いです。

この実践的なガイドでは、INPを解き明かし、なぜINPが2026年に最も重要なCore Web Vitalとなったのかを説明し、サイトを最適化するための具体的な手順とテクニックを紹介します。ユーザーに最高のインタラクション体験を提供するために準備はできていますか？さあ、始めましょう！

主なポイント

• INPとは何か：ユーザーのすべてのインタラクションの応答性を測定する指標です。
• INPが重要な理由：FIDに取って代わり、2026年に最も不合格率の高いCore Web Vitalとなっています。
• INP不良の一般的な原因：サードパーティスクリプト、フレームワークのハイドレーション、ロングタスク。
• 最適化テクニック：ロングタスクの分割、視覚的更新の最適化、状態管理。
• 必須ツール：PageSpeed Insights、Chrome DevTools、その他の診断および監視ツール。

2026年のCore Web Vitals：新たなシナリオ

Core Web Vitalsは、ウェブページの読み込み、インタラクティブ性、視覚的安定性の観点からユーザーエクスペリエンスを測定するためにGoogleが定義した指標群です。2026年の主要な3つの指標は以下の通りです。

• LCP（Largest Contentful Paint）：ビューポート内で表示される最大のコンテンツ要素の読み込み時間を測定します。良好なLCPは2.5秒以内です。
• CLS（Cumulative Layout Shift）：視覚的安定性、つまりページの要素が読み込み中に予期せずどれだけ移動するかを測定します。良好なCLSは0.1以内です。
• INP（Interaction to Next Paint）：ページに対するユーザーのすべてのインタラクションの遅延を測定します。良好なINPは200ミリ秒以内です。

INPが大きな課題となっています。以前のFID（First Input Delay）が最初のインタラクションの応答時間のみに焦点を当てていたのに対し、INPはすべてのインタラクション（クリック、タッチ、キー入力）の75パーセンタイルを評価します。これは、75番目に遅いインタラクションの応答時間がINPスコアを定義することを意味します。合格基準は200ミリ秒であり、サイトの43%がこの基準を満たせず、INPは2026年に最も問題のあるCore Web Vitalとなり、合格率はわずか57%です。

INPの解明：インタラクションの解剖学

INPを最適化するには、ユーザーインタラクションの応答時間全体を構成する3つのフェーズを理解することが不可欠です。

1. 入力遅延（Input Delay）：ユーザーがインタラクションを開始した時点（例：ボタンをクリックした時点）から、ブラウザがイベントの処理を開始するまでの時間です。
2. 処理時間（Processing Time）：ブラウザがイベントに関連付けられたJavaScriptコードを実行するのにかかる時間です。
3. 表示遅延（Presentation Delay）：イベントの処理が完了してから、ブラウザが画面に視覚的な更新をレンダリングできるようになるまでの時間です。

INPはこれら3つのフェーズの合計です。いずれかのフェーズで大幅な遅延が発生すると、ユーザーにとって遅く、イライラする体験につながる可能性があります。リンクをクリックしてもページが応答しなかったり、コンテンツが更新されなかったりする状況を想像してみてください。これがINP不良の典型です。

INP不良の最も一般的な原因

問題の根本原因を特定することが、解決への第一歩です。特にReactやNext.jsのようなフレームワークで開発された最新のサイトでは、いくつかの原因が繰り返し見られます。

• 重いサードパーティスクリプト：広告、トラッカー、ソーシャルメディアウィジェット、その他のサードパーティスクリプトは、貴重なCPUリソースを消費し、メインスレッドをブロックしてインタラクションの処理を遅延させる可能性があります。
• フレームワークのハイドレーション：Reactのようなフレームワークでは、ハイドレーションはサーバーでレンダリングされたHTMLをクライアントでインタラクティブにするプロセスです。このプロセスが長すぎたり、最適化されていなかったりすると、初期読み込み後にメインスレッドをブロックするロングタスクが発生する可能性があります。
• ロングタスク（Long Tasks）：メインスレッドで完了するのに50ミリ秒以上かかるJavaScriptタスクです。メインスレッドを長時間ブロックするタスクは、ユーザーインタラクションへの応答を遅延させ、INPに直接影響を与える可能性があります。

INPを最適化するための実践的なテクニック

幸いなことに、サイトのINPを改善するために適用できるさまざまな戦略があります。Next.jsおよびReactアプリケーションのフロントエンド開発者に焦点を当てて、最も効果的なものをいくつか詳しく見ていきましょう。

1. scheduler.yield()でロングタスクを分割する

ブラウザには、レンダリングやイベント処理など、ほとんどの重要なタスクを実行するメインスレッドがあります。タスクが長すぎると（ロングタスク）、クリックへの応答のような他のタスクの処理が妨げられます。scheduler.postTask() API（または古い/特定のコンテキストではscheduler.yield()）を使用すると、適切なタイミングでタスクをスケジュールし、可能な限りブラウザに制御を譲ることができます。これにより、メインスレッドが長時間ブロックされるのを防ぎます。

// 長いタスクを分割する概念的な例
function processLargeData(dataChunk) {
  // ...チャンクの処理...
  if (moreDataToProcess) {
    return scheduler.yield().then(() => processLargeData(nextDataChunk));
  }
}

// 使用法: processLargeData(initialData);

2. requestAnimationFrameで視覚的更新を最適化する

アニメーションが必要なUI更新や、画面の視覚的状態に依存する更新には、requestAnimationFrameが理想的なAPIです。これは、ブラウザの次の再描画サイクルに合わせてアニメーション更新をスケジュールし、アニメーションをスムーズで効率的に保ち、INPに影響を与える可能性のある不要なレイアウトや再描画の問題を防ぎます。

// スムーズなアニメーションの使用例
let box = document.getElementById('myBox');
let position = 0;

function animate() {
  position += 1;
  box.style.transform = `translateX(${position}px)`;
  
  if (position < 500) {
    requestAnimationFrame(animate);
  }
}

// アニメーションを開始
animate();

3. 重要でないスクリプトを遅延させる

ページの初期レンダリングや即時インタラクティブ性に不可欠でないスクリプトは遅延させるべきです。<script>タグにdeferまたはasync属性を使用します。deferは、HTMLの解析後にスクリプトがドキュメント内の出現順に実行されることを保証し、asyncはスクリプトがダウンロードされ次第、順序を保証せずに実行します。分析や広告などのサードパーティスクリプトを遅延させることで、より重要なインタラクションのためにメインスレッドを解放できます。

4. イベントハンドラーでのDOM操作を最小限に抑える

DOM（Document Object Model）の変更はコストのかかる操作です。イベントハンドラー内では、複数の小さなDOM変更を避けてください。可能な限り変更をグループ化します。Reactのようなフレームワークでは、これはレンダリングおよび再コンシリエーションのサイクル自体によってより効率的に管理されますが、多数の直接的なDOM変更がパフォーマンスに影響を与える可能性があることを念頭に置くことは重要です。

5. 状態変更をグループ化する

Reactアプリケーションでは、連続する複数のsetState呼び出しは複数の再レンダリングにつながる可能性があります。Reactは多くの場合これを自動的に最適化しますが、複雑なケースやDOMを直接操作する場合は、複数の状態更新を1回の呼び出しにグループ化するか、setStateの関数形式（setState(prevState => newState)）を使用して、更新が統合されて実行され、不要なレンダリングが回避されるようにすることがより効率的です。

6. スクリーン外コンテンツにcontent-visibility: autoを使用する

CSSプロパティcontent-visibility: autoは、長いページの読み込みとレンダリングを最適化するための強力なツールです。これにより、ブラウザは画面外にある要素のレンダリング作業（レイアウト、ペイント）をスキップできます。ユーザーがページをスクロールすると、ブラウザはビューポートに入ってくるコンテンツをレンダリングします。これにより、初期読み込み時間が大幅に短縮され、知覚されるパフォーマンスが向上します。

.offscreen-content {
  content-visibility: auto;
}

診断と監視のための必須ツール

INPの問題を特定して修正するには、適切なツールが必要です。

• PageSpeed Insights：Core Web Vitalsを含むサイトのパフォーマンスの詳細な分析を提供します。ラボデータ（シミュレーション）とフィールドデータ（実際のユーザーデータ）を組み合わせています。
• Chrome DevTools：パフォーマンス分析のための強力なツールセットを提供します。