次のペイントへのインタラクション (INP)

Web 開発が進化し続けるにつれて、ユーザー エクスペリエンスを優先し続けるために Web サイトのパフォーマンス測定も進化する必要があります。 Interaction to Next Paint (INP) は、ユーザー インタラクションに対する Web ページの応答性を評価する Core Web Vital メトリクスです。 これは、ユーザーがページを訪問する全期間にわたって発生するすべてのクリック、タップ、およびキーボード操作の応答時間を観察します。 最終的な INP Web バイタルは、外れ値を無視した最長のインタラクションに基づいています。 Google は間もなく、Web サイトがユーザー インタラクションを処理するまでの時間を測定する新しい Core Web Vital 測定として INP を使用する予定です。 Google は最も人気のある Web ブラウザであり、米国には 2 億 4,600 万人のユニークな Google ユーザーがいるため、Web サイトはそのアルゴリズムに合わせて最適化する必要があります。

FIDの交換

最初の入力遅延 (FID) は、2024 年 3 月にインタラクションから次のペイントへのインタラクションに置き換えられる予定です。FID は最初のインタラクションの入力遅延のみを考慮するため、全体像を説明するものではありません。 実際、FID では、イベント ハンドラーの実行にかかる時間や次のフレームの表示の遅延は考慮されていません。

FID から INP への移行は、Web パフォーマンスの測定方法の変化を示しています。 最初のインタラクションだけに焦点を当てるのではなく、Web サイト全体の効率が考慮されます。 ユーザー エクスペリエンスは最初のインタラクション後に終了するわけではないため、その後のすべてのインタラクションを認識することが重要です。 これにより、Web 開発者は Web サイト全体のパフォーマンスを総合的に向上させることが求められます。 研究によると、サイトの読み込み時間をわずか 10 分の 1 秒短縮するだけで、小売 Web サイトのコンバージョン率が 8.4% 増加したことがわかっています。

測定方法

ほとんどの Web サイトでは、最悪のレイテンシーを持つ「次のペイントへのインタラクション」値が報告されます。 ただし、多数のインタラクションが行われる Web サイトの場合、ランダムなエラーにより、応答しないサイトで INP が異常に高くなる可能性があります。 この問題に対処するために、サイトに 50 を超えるインタラクションがある場合、50 のインタラクションごとに最も多いインタラクションを無視します。 サイトのインタラクションが 50 件以下の場合は、最も高い値が使用されます。 この点に加えて、外れ値をさらに除去する方法として、すべてのページビューの 75 パーセンタイルも使用します。つまり、ページの 75% が良好のスコアを取得すれば、INP 基準に合格します。 これにより、応答性をより適切に測定できるようになります。

INP は現場でも実験室でも測定できます。 ただし、現場の実際のユーザーからのデータにより、パフォーマンスのより包括的な感触が得られることに注意することが重要です。

現場で

INP Web Vitals に加えて、Real User Monitoring (RUM) からのフィールド データは、どのような特定のインタラクションが INP 値自体の原因となったか、インタラクションがページ読み込み中か読み込み後に発生したか、インタラクションの種類 (クリック、キーを押す、またはタップします）。

さらに、Web サイトを Chrome ユーザー エクスペリエンス レポートに含めることができる場合は、PageSpeed Insights の CrUX から INP フィールド データを取得できます。 表示される情報には、INP の元のレベルの画像と、可能であればページレベルのデータが含まれます。 CrUX の主な欠点は、問題があることを見つけるのには役立ちますが、問題が何であるかを理解するのに十分な情報が得られないことです。 一方、RUM は、インタラクションの遅延につながる Web ページ、ユーザー、またはユーザー インタラクションの詳細を検査するのに役立ちます。 INP を特定のインタラクションに帰すると、無駄な努力や推測を防ぐことができます。

研究所で

理想的には、フィールドデータによって Web サイトのインタラクションが遅いと結論付けられたら、ラボテストを開始する必要があります。 フィールド データが利用できない場合は、実験室で低速のインタラクションを再現する方法があります。 たとえば、ユーザー フローを追跡し、途中でインタラクションをテストしたり、メイン スレッドが最もビジーになるときであるページの読み込み中にページを操作したりできます。

ウェブサイトの最適化

インタラクションから Next Paint までウェブサイトを最適化すると、SERP で上位にランクされるようになります。 最適化の最初のステップは、問題を特定することです。 フィールドテストとラボテストを実行して、Web サイト上のどのインタラクションが最も遅いかを把握します。

入力遅延

入力遅延は、ユーザーが Web ページ上でインタラクションを開始すると始まり、インタラクションの実行を開始するイベント コールバックで終了します。 入力遅延の長さは、スクリプトの読み込み、解析、フェッチ処理、タイマー関数、または相互にオーバーラップして発生するその他の対話など、ページ上の他のアクティビティに依存する可能性があります。 原因が何であれ、Web 開発者の目標は入力遅延を減らして INP Web Vitals を改善することです。

入力遅延を短縮する主な方法の 1 つは、ページ読み込み中のスクリプト評価に関連する長いタスクが発生する可能性を減らすことです。 ブラウザーは、JavaScript が実行された後でも、構文の検証、マシンが理解できるように 1 と 0 にコンパイルし、最終的にタスクを完了するなど、避けられない複数のタスクを内部で完了する必要があります。 これらの各ステップを完了するのにかかる時間を短縮するための措置を講じると、入力遅延が減少します。

イベントコールバック

Next Paint の測定へのインタラクションは、入力遅延だけでは終わりません。 ユーザー操作に応じて迅速に実行されるようにイベント コールバックを最適化すると、INP Web Vitals も改善されます。 一般に、割り当てる作業をできる限り少なくすると、イベント コールバックが最も効率的に短縮されます。 ただし、Web サイトの対話ロジックが複雑すぎる場合は、イベント コールバックを分離して、集計作業がメイン スレッドをブロックする長いタスクになるのを避けることができます。

もう 1 つの効果的な手法は、イベント コールバック内のコードを構造化して、実行される内容を制限することです。 これはより高度なテクニックですが、ビジュアル更新を適用するために必要なロジックだけを実行し、他のすべてを後続のタスクに延期することで、コールバックが軽くなり、レンダリング時間が短縮されます。

レンダリングの問題を引き起こす可能性があるもう 1 つは、要素のスタイルが同じタスク内で 2 つのタスク間で一時停止せずに読み取られ、更新される場合です。 この問題を回避するには、Web 開発者は代わりに、最初にスタイルを読み取り、次に window.requestAnimationFrame 関数を使用して書き込み操作をキューに入れる必要があります。これにより、レンダリングの問題を回避できます。

プレゼンテーションの遅延

プレゼンテーション遅延は、イベント コールバックの終了からブラウザが次のフレームを描画する時点までの時間です。 プレゼンテーションの遅延を減らすと、Interaction to Next Paint の値が大幅に向上します。

ドキュメント オブジェクト モデル (DOM) サイズを最小限に抑えると、ページを迅速にレンダリングできるようになります。 DOM サイズを最小化する最も簡単な方法は、初期サイズを小さくすることです。 DOM サイズを小さくすると、ブラウザーが読み取るコードが少なくなるため、Web サイトが高速になります。これは、DOM の更新をより速く処理できることも意味します。

結論

FID から INP への置き換えは、Web 開発における重要な変化を示しています。 世界中で 51 億 8,000 万人のインターネット ユーザーがいることから、Web サイトのパフォーマンスをますます効率化する必要があることは明らかです。 これらのユーザーの多くは、平均よりもインターネット速度が低く、低スペックのデバイスを使用しています。 Google がそもそも Core Web Vitals (CWV) レポートをリリースしたのはこれが理由です。高速機能を持つユーザーだけでなく、すべてのユーザーにアクセスできるように Web サイトを最適化できるようにするためです。 INP への移行により、最初の入力遅延だけを超えて最適化する必要があるため、対話性とユーザー エクスペリエンスが優先されるようになりました。

INP Web バイタルは、ユーザーがページを訪問する全期間を通じて発生するすべてのクリック、タップ、およびキーボード操作の応答時間を考慮して、Web サイト上の最悪の遅延期間に基づいて割り当てられます。 次のペイントへのインタラクションは、現場でより現実的に測定することも、ラボでより分析的な目的で測定することもできます。 Web サイトを INP 用に最適化するには、長いタスクを減らして入力遅延を減らし、イールド技術を使用してイベント コールバックを短縮し、レイアウト スラッシングを回避し、DOM サイズを最小限に抑えてプレゼンテーション遅延を削減します。 INP について学ぶことは、2024 年 3 月に起こる大きな変化に向けて Web サイトを準備することになります。

Web サイトの最適化に関するサポートが必要な場合は、Coalition Technologies の専門家に今すぐお問い合わせください。