ウェブサイト・インタラクションの最適化：INPとユーザー・エクスペリエンスを向上させる主な戦略

インタラクション・トゥ・ネクスト・ペイント（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価値を測定するにはどうすればよいですか？

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

PageSpeed Insightsの結果について

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

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

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

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

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

INPの最適化方法

1、JavaScriptの最適化

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

JavaScriptを最適化する方法

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

2、ウェブワーカーを使用

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

Web Workerの設定方法

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

1. main.jsこのファイルは、Web Workerを起動し、Web Workerとの通信を管理するために使用されます。
2. worker.js(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 {
  
}

もう一つはworker.jsネットワークワーカーのタスクが含まれています。以下はその例です：

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

これらのスクリプトをWebサイトに組み込むには、特定のテクノロジーまたはプラットフォームのドキュメントを確認し、標準的な手順に従ってください。

WordPressをお使いの場合はwp_enqueue_scriptFunctions には、テーマの Functions.php ファイルに Web Worker スクリプトが含まれています。

3.長いタスクの分解

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

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

長い仕事をどのように分解しますか？

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

4.入力応答性の優先順位付け

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

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

5.即時フィードバックの提供

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

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

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

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

INPのビジネス上の利点

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

概要

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

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