私たちが長年慣れ親しんできた Google の Pagespeed 構造は、ウェブサイトの読み込みと配信が迅速であることを保証することを念頭に置いて構築されています。測定可能なパラメータを生成し、Chrome の市場シェアから収集された匿名データを活用することで、Google はこれらの指標を SEO 指標として使用しています。2022 年に Interaction to Next Paint (INP) が導入されたことで、焦点は単なるページ読み込み速度から、より広範な Web パフォーマンスの観点に移りました。INP は、ページの読み込み速度だけでなく、ページ上でのユーザー操作が処理される速度も測定します。基本的に、サイト ナビゲーション エクスペリエンスを Pagespeed 指標に変えます。
ケレムのブログこの概念には「一般的なインタラクション遅延」という用語が適していると示唆されており、Google も独自の動画でこれを詳しく説明しています。ただし、この指標を完全に理解するために、次のセクションでこのテーマについてさらに詳しく掘り下げていきます。
INP 期間の説明は何ですか?
INP の期間には以下が含まれます。
- ユーザーがページを操作してからイベント ハンドラーが実行されるまでの時間。
- スクリプトの実行時間。
- コードの実行からユーザーへの出力の表示までの時間。
これらのプロセスは通常数ミリ秒以内に発生しますが、モバイルデバイス、特にCPUパワーが低い古いAndroidスマートフォンでは、このような遅延（レイテンシ）が目立つことがよくあります。他のLighthouseデータと同様に、INPデータは匿名で収集され、 75パーセンタイルしたがって、目標は、ハイエンド デバイスだけでなく、平均的なデバイスでも適切に動作するアプリケーションを作成することです。
INP期間の実際の例
この概念を説明するために、私たちが毎日アクセスするインターネット ページからの実際の例をいくつか示します。
電子商取引サイトでの住所の入力
電子商取引サイトで買い物をしていて、配送先の住所を入力するとき、最初に都道府県を選択します。次に、地区を選択するための選択ボックスをクリックすると、Ajax の結果が読み込まれるまでしばらく待機し、一定の時間が経過すると地区情報が読み込まれます。これは INP の良い例です。この例でユーザー エクスペリエンスを向上させるには、Ajax プロセスをユーザーに通知する「読み込みインジケーター」を追加することが考えられます。
並べ替えの選択
商品一覧ページでフィルターを使用する場合、チェックボックスをクリックした後にフィルターされた商品が適切に管理されないと、INP が増加します。あまり複雑でない JS を使用し、フィルター操作中のユーザー エクスペリエンスを考慮すると、INP 値をできるだけ高く保つことができます。
製品写真ギャラリー
ユーザーが商品詳細ページで商品写真をクリックした後、フォトギャラリーが読み込まれるまで待つ時間は、INP に影響を与える可能性があります。
予約ボタン
「予約する」ボタンをクリックしてから次のページに移動するまでのインタラクション遅延は、INP の例です。
カートに追加ボタン
「カートに追加」ボタンをクリックしたときに、商品がカートに追加されたかどうか疑問に思う数ミリ秒の遅延が、INP を完璧に定義します。
これらの例に見られるように、INP トラップは SEO と直接的なコンバージョン率の両方に影響を与えるシナリオに存在します。
INPを改善するには？
- 最新の JS フロントエンド ライブラリを使用する: Vue、React、Angular などの最新の JS フロントエンド ライブラリを使用してパフォーマンスを向上させると、パフォーマンスと再利用性の利点が得られるため有益です。
- JS ライブラリの複雑さを最小限に抑える: あまり複雑でない JS ライブラリを使用することをお勧めします。個人的には、jQuery はできるだけ避けることをお勧めします。
許容可能なINPメトリックレベル
閾値は 良好、中程度、不良のINPレベルはそれぞれ200ミリ秒と500ミリ秒です。INP をこれらのしきい値以下に保つことは、優れたユーザー エクスペリエンスと全体的な Web パフォーマンスを維持するために重要です。
