Interaction to Next Paint (INP)

Interaction to Next Paint (INP)

Interaction to Next Paint (INP)とは

Interaction to Next Paint (INP)の基礎知識

Interaction to Next Paint (INP)は、 2024 年 3 月以降にFirst Input Delay (FID) に代わるCore Web Vital メトリックです。

この指標では、ユーザーがページにアクセスする全期間を通じて発生する対象となるすべてのインタラクションのレイテンシ(通信の遅延時間)を観察することで、ユーザーインタラクションに対するページの全体的な応答性を評価します。

INP は Core Web Vitals 指標であるため、Google のランキング アルゴリズムで使用される全体的なページエクスペリエンスに貢献します。

Interaction to Next Paint (INP)と First Input Delay (FID)の違い

2024 年 3 月以降にFirst Input Delay (FID) に代わるInteraction to Next Paint (INP)。どのような違いがあるか紹介します。

FID は最初のインタラクションのみを考慮し、入力遅延のみを測定します。INP は読み込みから終了までのすべてのページ インタラクションを追跡します。INP は、ページのライフサイクル全体を通じて応答性を徹底的に評価するため、FID よりも信頼性の高い指標となります。

Google のデータによると、ユーザーが Web サイトに費やす時間のほとんどは、Web サイトが読み込まれた後です。そのため、INP は FID よりもはるかに効果的にページのインタラクティブ性を測定できます。

Interaction to Next Paint (INP)の計測方法

INP 値が低いということは、ページがユーザーの操作に対して非常に応答性が高いことを意味します。具体的には、INP は次のことを測定します。

  • マウスのクリック:マウスのクリック後、どれくらいの速さでメニューのドロップダウンが表示されますか?

  • タッチスクリーンのタップ:タップ後にボタンが押される速度、またはリンクの下線が表示される速度はどれくらいですか?

  • キーを押す:テキストを入力するためにキーを押した後、どのくらい早く検索バーまたはフォームに文字が表示されますか?

「マウスのクリック」「タップ」「キーの押下」の3つが主要なタイプのユーザー インタラクションになります。

例えば、マウスクリックを例にします。

  1. ユーザーはボタンをクリックするなど、Web ページを操作します。

  2. ブラウザは、新しいコンテンツを求めるリクエストを Web サーバーに送信します。

  3. Web サーバーは新しいコンテンツをブラウザに送信します。

  4. ブラウザはページ上に新しいコンテンツをレンダリングします。

  5. ブラウザーは、新しいコンテンツのレンダリングにかかるまでに時間を測定し、それを INP スコアとして報告します。

つまり、入力遅延と処理時間とプレゼンテーション遅延の合計時間と考える事ができます。

理想的なInteraction to Next Paint (INP)のスコア

Interaction to Next Paint (INP)の理想的なスコア

優れたユーザー エクスペリエンスを提供するには、Web サイトは次のペイントまでのインタラクションが200 ミリ秒以下になるように努める必要があります。ほとんどのユーザーがこの目標を達成していることを確認するには、モバイル デバイスとデスクトップ デバイス間で分割されたページ読み込みの 75 パーセンタイルを測定するのが適切なしきい値です。

INP が200 ミリ秒以下である場合は、ページの応答性が良好であることを意味します。

INP が200 ミリ秒を超え、500 ミリ秒以下である場合は、ページの応答性を改善する必要があることを意味します。

INP が500 ミリ秒を超える場合は、ページの応答性が低いことを意味します。

引用:Interaction to Next Paint (INP)|web.dev

マーケティング活動において、Interaction to Next Paint (INP)どのような影響がありますか?

Interaction to Next Paint (INP)は、 2024 年 3 月以降にFirst Input Delay (FID) に代わるCore Web Vital メトリックです。Core Web Vitals のランキング要素の一部であることの意味と仕組みを理解することが重要です。

読み込み時間が遅いとユーザーがページから離脱し、ビジネスのチャンスを逃してしまう可能性があります。

Interaction to Next Paint (INP) の測定方法

Google PageSpeed Insights は、 INP と Web サイトのパフォーマンスを測定するための一般的なオプションです。

フィールドデータ

  • Chrome User Experience Report

  • PageSpeed Insights

  • Search Console (Core Web Vitals Report)

  • web-vitals JavaScriptライブラリ

FID の測定には実際のユーザーが必要となるため、ラボ環境では測定できません。しかしながら、Total Blocking Time (合計ブロック時間、TBT) 指標はラボ環境でも測定可能です。実際のユーザー環境での FID との相関性も高く、ラボ環境での TBT の改善による最適化は、実際のユーザーに対する FID の改善にも繋がるはずです。

Interaction to Next Paint (INP) を向上させるポイント

Web ページのサイズや複雑さ、ロードされる JavaScript ファイルや CSS ファイルの数など、さまざまな要因が INP 値に影響を与える可能性があります。

INP の問題を解決するには、開発者はページ サイズの削減、画像とスクリプトの最適化、静的リソースのキャッシュなどの手法を使用する必要があります。

FLOURISHでは、Web サイトのパフォーマンスに関するクライアントの状況に応じたサポートを提供しています。現在お困りの場合、またはこれからSEOやWebサイトの再設計、Webサイトの定期的な最適化どうしたら良いか悩んでいるケースでもまずはお気軽にお問合せください。

ご相談やお仕事の依頼など
お気軽にお問い合わせください。

CONTACT