インタラクション・トゥ・ネクスト・ペイント（INP）とは何ですか？

Interaction to Next Paint (INP)は、ウェブページの応答時間を測定するコアウェブバイタルの指標です。2024年3月に従来のFID（First Input Delay）に取って代わる。FIDとINPを理解するFIDは、サイトが最初に読み込まれたときのみ応答性を測定するのに対し、INPは、サイト訪問中のユーザーのアクションに対するサイトの応答時間を調べる。

INPは、ボタンをクリックしたときなど、ユーザーのアクションに対するウェブページの反応の速さを測定する指標です。次のような仕組みになっています：

1. ユーザー操作ボタンをクリックするなど、ウェブページ上で何らかのアクションを行います。
2. リクエストを送信新しいコンテンツを読み込むために、ブラウザがウェブサイトのサーバーにリクエストを送信します。
3. コンテンツへのアクセスサーバーはリクエストを処理し、新しいコンテンツをブラウザに送り返します。
4. 表示内容ブラウザがコンテンツを受信し、ページに表示します。
5. 計測時間ブラウザは、あなたがクリックしてからコンテンツが完全に表示されるまでにかかった時間を計算し、INPスコアとして報告します。

なぜINPが重要なのか？

• ユーザー・エクスペリエンスの向上INPスコアが低いということは、ウェブページがレスポンシブであり、ユーザーが結果を見るのに待つ必要がないことを意味する。
• 検索エンジン最適化（SEO）に役立つINPは、Googleがウェブサイトのエクスペリエンスを評価するために使用する要素の1つで、検索結果での順位に影響します。INPスコアが高ければ、検索結果で上位に表示されやすくなります。
• 直帰率の低減ウェブページがレスポンシブであれば、ユーザーは待ち時間で離脱するのではなく、より多くのコンテンツを見るためにページにとどまる可能性が高くなります。

INPと他のコアネットワークメトリクスの違い

INPは、累積レイアウトシフト(CLS)や最大コンテンツ描画(LCP)といった他の指標とは異なります。CLSはウェブページ上のコンテンツ移動の頻度と大きさを測定し、LCPはページ最大のコンテンツ要素の読み込みが完了する速度に焦点を当てます。

INPの測定方法は？

INP値はミリ秒（ms）で表されます。理想的なINP値は200ミリ秒未満であるべきで、これは非常に反応の良いウェブサイトを反映しています。INP値が200ミリ秒から500ミリ秒の間にある場合は、パフォーマンスを改善できる可能性があることを示し、500ミリ秒を超える場合は、レスポンスが遅く、最適化する必要があると考えられます。

何がINP値に影響するのですか？

INP値、すなわちウェブサイトがユーザーのアクションに反応する速度は、いくつかの要因に影響される可能性がある：

• ページのサイズと複雑さ大きなページや複雑なページでは、ユーザーのアクションに応答するのに時間がかかることがあります。
• ロードされたJavaScriptとCSSファイルの数ロードされるファイルが多ければ多いほど、サイトがユーザーのアクションに反応するのに時間がかかる可能性があります。

ウェブサイトのINP価値を測定するには？

利用するグーグル・ページスピード・インサイトINPやその他のウェブサイトのパフォーマンス指標を測定するツールです。このツールは、お客様のウェブサイトを調査し、ベストプラクティスに従って最適化するための改善案を提供します。また、モバイルデバイスやデスクトップコンピュータでのウェブサイトの読み込み速度も表示されます。

PageSpeed Insightsの結果について

PageSpeed Insightsは2種類の結果を提供する：

• 実際のユーザーデータ実際のChromeユーザーからのデータをレポート上部に表示。
• ラボデータこの部分のデータは、管理された条件下でのテストに基づいており、詳細な技術的洞察と最適化に関する推奨事項を提供している。

以下のレポートは同じ測定基準を示していますが、Google Lighthouse上で動作する管理されたラボ環境からのものです。このデータは、新機能をリリースする前のテストに使用できます。

サイトのINPデータが利用できない場合は、総ブロッキング時間（TBT）を確認できます。この指標は、サイトがロードされている間、ページがユーザーのアクションに反応しない時間を把握するのに役立ちます。

診断結果のセクションには、サイトのユーザーエクスペリエンスとパフォーマンスを向上させるために役立つ、サイトのコアウェブメトリクスを改善するための提案も掲載されています。

INPを最適化する方法

1、JavaScriptの最適化

JavaScriptは多くのウェブサイトで重要な役割を果たし、インタラクティブな機能を追加する役割を担っています。しかし、JavaScriptコードが効率的に実行されないと、ブラウザのメインスレッドで実行され、ウェブページのレンダリングも担当するため、ウェブサイトの応答性が低下する可能性があります。

JavaScriptを最適化し、ウェブサイトの応答性を高めるには？

1. JavaScriptファイルの縮小ファイルサイズを小さくすることで、JavaScriptの読み込みと実行を速くすることができます。
2. GZip圧縮を有効にするこれは、ウェブサイトのファイルサイズを縮小し、データ転送を高速化するための一般的な方法です。
3. JavaScriptフレームワークの使用AngularJSやjQueryのようなフレームワークは、JavaScriptコードをより効率的に整理・管理し、実行を向上させるのに役立つ。
4. コンテンツ・デリバリー・ネットワーク（CDN）の利用CDNはユーザーに近いサーバーからJavaScriptファイルを提供することができ、ロード時間を大幅に短縮することができます。

2、ウェブ・ワーカーを使う

あなたのウェブサイトには、計算負荷の高い画像、動画、データ処理タスクが多く含まれているとします。Web Workerを使えば、これらの重いタスクをバックグラウンドのスレッドに移動させることができ、Webページが遅延したりフリーズしたりせず、ユーザー体験がよりスムーズになります。

Web Workerの設定方法

Web Workerを使うには、2つのJavaScriptファイルを用意する必要がある：

1. main.jsこのファイルは、ウェブ・ワーカーを起動し、ウェブ・ワーカーとの通信を管理するために使用されます。
2. ワーカー(Web Worker Script）：このファイルには、バックグラウンドで実行されるコードが含まれています。

従うmain.jsの例：

// main.js
if (window.Worker) {
  // 新しい Worker インスタンスを作成する
  const myWorker = new Worker('worker-script.js'); // ワーカーにメッセージを送る。
  // ワーカーにメッセージを送信する
  myWorker.postMessage('Hello Worker!'); // Worker からのメッセージを聞く。
  // Worker からのメッセージを聞く
  myWorker.onmessage = function(e) { // ワーカーからのメッセージをリッスンする。
    myWorker.onmessage = function(e) { console.log('ワーカーからメッセージを受け取りました', e.data); }; // ワーカーからのメッセージを待ちます。
  }; } else { console.log('ワーカーからメッセージを受信', e.data); } // ワーカーからのメッセージを聞く。
} else {
  console.log('Your browser does not support Web Workers.'); }; } } } } } }
}

もうひとつはワーカーネットワークワーカーのタスクが含まれている。以下はその例である：

// worker.js
onmessage = function(e) { // メインのスクリプトからメッセージを受信しました。
  console.log('Message received from main script', e.data); // 重い計算やデータ処理をここで行う。
  // 重い計算やデータ処理をここで行う。
  // 次に、メイン・スクリプトにメッセージを送り返す。
  postMessage('Hello Main Script!'); }.
}

これらのスクリプトをウェブサイトに組み込むには、特定の技術やプラットフォームのドキュメントを確認し、標準的な手順に従ってください。

ワードプレスユーザーの場合はwp_enqueue_scriptFunctionsには、テーマのFunctions.phpファイルにWeb Workerスクリプトが含まれています。

3.長いタスクの分解

ユーザーがたくさんの商品データや画像で埋め尽くされたEコマースサイトを閲覧する際、大きすぎて最適化されていないJavaScriptタスクのサイトは、多くのリソースを消費し、サイトの速度を低下させます。その結果、ユーザーのクリックやスクロールにさえタイムリーに反応しない、読み込みの遅いページになってしまう可能性があります。

これを避けるために、このような大きなタスクを小さなタスクに分割することで、ブラウザーがより柔軟になり、1つの大きなタスクにブロックされないようにすることができる。

長いタスクをどのように分解するか？

1. タイムアウトの設定JavaScriptのセットタイムアウト関数を使えば、タスクを将来の時点に延期できるので、メイン・スレッドを占有し続けることはない。
2. アイドル・コールバックのリクエスト使用リクエストアイドルコールバック APIは、ウェブページの主な機能を妨げることなく、ブラウザがアイドル状態のときにタスクを実行できるようにします。

4.インプットの応答性を優先する

ウェブページがユーザーのアクションに素早く反応できるようにすることは、良いユーザー体験を提供するための鍵です。ここでは、ウェブサイトがユーザーの入力に素早く反応するためのテクニックをいくつかご紹介します：

1. クリティカルでないJavaScriptを延期するページがロードされたときにすぐに実行する必要のないJavaScriptコードもあります。
2. チョーク関数の呼び出し頻度をコントロールする。例えば、scrollイベントにおいて、関数は数百ミリ秒に一度しか実行されない。
3. 振り出す: イベント（ウィンドウのサイズ変更など）が頻繁にトリガーされる場合、デジッタリング技術を使用すると、イベントが一定期間停止するまで関数の実行を遅らせることができます。
4. パッシブ・イベント・リスナーの使用スクロールやクリックなどのイベントに対して、受動的とマークされたイベントリスナーは、イベントハンドラの完了を待たずに他のタスクを続行するようブラウザに指示することができます。

5.即時フィードバック

なぜ即時フィードバックが重要なのか？

ウェブサイトが何のフィードバックもなくユーザーのリクエストを処理すると、ユーザーは不安を感じたり、フォームの送信やボタンのクリックを繰り返したりすることがあります。即座にフィードバックを提供することは、ユーザーエクスペリエンスを向上させるだけでなく、サイトがレスポンシブであるという感覚をユーザーに与えます。

即座にフィードバックを与える一般的な方法には、次のようなものがある：

1. ロードインジケータデータの読み込み中やページのジャンプ中に、回転するローディングアイコンやプログレスバーを表示し、ユーザーに処理中であることを伝えます。
2. 確認ポップアップショッピングカートに商品を追加するなど、ユーザーが特定の操作を行うと、その操作が成功したことを確認するためのメッセージボックスがポップアップ表示されます。
3. フォーム検証のフィードバック例えば、メールアドレスが書式に適合しているかどうかをチェックし、書式が正しくない場合は直ちに警告メッセージを表示します。

INPのビジネス上の利点

あるエコノミック・タイムズINPを増やすと、ウェブサイトの直帰率が50%も大幅に下がるという研究結果があります。直帰率が低いということは、通常、ユーザーのエンゲージメントや満足度が高いということであり、どのようなビジネスサイトにとっても有益なことです。

概要

INPは、ユーザーのアクションに対するウェブサイトの応答性を測定する重要なパフォーマンス指標です。INPが最適化されていると、ユーザーエクスペリエンスが向上するだけでなく、検索エンジンのランキングも向上し、直帰率も減少します。

INPを最適化するために、JavaScript実行の最適化、バックグラウンドタスクへのWeb Workersの使用、メインスレッドのブロッキングを避けるための長いタスクの分割など、いくつかの戦略について議論した。さらに、ローディングインジケータ、確認ポップアップ、フォーム検証フィードバックを通じて、サイトがアクティブでレスポンシブであるという認識をユーザーに与えるために使用できる即時フィードバックの重要性を強調しました。