WordPress で次のペイント (INP) へのインタラクションを最適化する方法

公開: 2023-09-22

Interaction to Next Paint (INP) は、ページ上のすべてのユーザーインタラクションの待ち時間を測定する Web ページの応答性メトリックです。 Web サイトの INP 指標の最適化は、Web サイトの速度、ユーザーエクスペリエンス、SEO において重要な役割を果たします。

最初の入力遅延 (FID) 指標の多くの制限に対処するための実験的指標として 2022 年に発表されましたが、Google は、INP が 2024 年 3 月にコアウェブバイタル指標として FID に代わると宣言しました。

この投稿では、INP の基本、INP が FID に置き換わる理由、サイトの INP 指標を測定および改善する方法について説明します。

興奮した？さあ行こう！

Web ページの応答性を測定することの重要性

遅い Web サイトを好む人はいません (Google も含めて!)。そして、遅い Web サイトほど早くユーザーを Web サイトから遠ざけるものはありません。

Largest Contentful Paint (LCP) などの指標は、ページの読み込み速度を示す優れた指標です。これが、Core Web Vitals 指標である理由です。

しかし、ページが読み込まれてユーザーがそこに留まった後はどうなるでしょうか? LCP はページのインタラクティブ性を測定しません。 Google によると、ユーザーはページが読み込まれた後、そのページに時間の 90% を費やします。したがって、ページのライフサイクル全体 (開いてから閉じるまで) の応答性を測定することが重要です。

ページの読み込み速度は速いものの、応答性が低い Web サイトは依然として遅い Web サイトであり、その結果、ユーザーエクスペリエンスが低下します。たとえば、モバイルナビゲーションメニューを開くのに時間がかかったり、オンラインショッピングカート内の商品を更新したりするのに時間がかかります。

ここで、Web ページの応答性の測定が役に立ちます。応答性の良い Web サイトは、ユーザーの操作に迅速に応答します。そして、この反応は視覚的なフィードバックの形でなければなりません。

より長い時間を必要とする複雑なインタラクションの場合でも、優れたユーザーエクスペリエンスを維持するには、何らかの視覚的な合図 (読み込みアニメーションなど) をユーザーに提示することが非常に重要です。

次のペイントまでのインタラクション (INP) と最初の入力遅延 (FID) : 違いは何ですか?

Web ページのユーザーエクスペリエンスを測定するのは非常に困難です。合計ブロック時間 (TBT) やインタラクティブまでの時間 (TTI) などの指標を使用して、ページの応答性を把握できますが、これらは実際のユーザーエクスペリエンスを示すものではありません。

たとえば、ページの TBT または TTI が高速であっても、ページの操作方法によってはユーザーが遅く感じることがあります。逆も同様です。

FID を入力します。これは、Web ページ上でのユーザーの最初のインタラクションを直接測定します。具体的には、現場での実際のユーザーエクスペリエンスを測定します。

最初の入力遅延 (FID) の制限

その名前が示すように、FID は「最初の入力」に対するブラウザーの応答の「遅延」のみを測定します。

つまり、これはページ読み込み応答性の指標、つまり JavaScript コードが読み込まれて実行される速さの指標であり、ページ読み込み後にユーザーの操作にページがどれだけ早く応答するかという実行時の応答性の指標ではありません。

第一印象は重要ですが、必ずしも全体像を伝えるとは限りません。 FID は Web ページの応答性の測定方法を改善しましたが、Web ページを開いてから閉じるまで、ユーザーが Web ページとどのように対話するかを正確に測定するわけではありません。

たとえば、FID は、次のフレームを表示する際の遅延時にイベントハンドラーを実行するのにかかる時間を測定しません。

Interaction to Next Paint (INP) とは何ですか?

INP は、クリック、タップ、キー押下などのユーザー操作に対するページの全体的な応答性を測定します。

インタラクションには複数のグループハンドラーを含めることができます。たとえば、携帯電話のタッチスクリーンをタップすると、ページの背景で一連のイベントが開始されることがあります。いずれの場合も、INP は、ユーザーがインタラクションを開始してから、ブラウザーが視覚的なフィードバックを含む次のフレームを表示するまでの、ページの最長の遅延です。

ユーザーの最初のインタラクションにブラウザーが応答するまでにかかる時間を測定するだけの FID とは異なり、INP はページ上のすべてのユーザーインタラクションを観察し、全体的なスコアを提供します。

そのため、INP は第一印象を超えて、すべてのユーザーインタラクションをサンプリングし、ページの応答性をより信頼できる指標にします。

FID と同様に、INP スコアが低いということは、ユーザー入力に対するページの応答性が高いことを意味します。

INPはどのように計算されますか?

ほとんどの Web サイトでは、最終的な INP メトリクスが最も長いインタラクションとなります。ただし、外れ値もいくつか存在します。

たとえば、Web ページのほとんどがテキストと画像である場合、ユーザーとの対話はそれほど多くありません。ただし、多くのインタラクティブな要素 (テキストエディターやゲームなど) を含む動的なページの場合は、多数のインタラクションが発生します。このような場合、ランダムな遅延により、応答性の高いサイトのページの INP スコアが低下する可能性があります。これを克服するために、INP は 50 のユーザーインタラクションごとに 1 つの最も高いインタラクションを無視します。

ほとんどのページではインタラクションが 50 よりはるかに少ないため、心配する必要はありません。さらに、INP はすべてのページビューの 75 パーセンタイルのみを考慮するため、予期しない外れ値がさらに除去されます。

最終的な INP スコアは、ほとんどのユーザーが経験することを反映しています。

注: INP では、ホバリングとスクロールのアクションは考慮されません。ただし、キーボードでスクロールすると、INP によって測定されるイベントがトリガーされる場合があります。いずれにせよ、ページのスクロールは INP によって測定されません。ユーザーがページを操作しない場合、そのページの読み込みで INP スコアが返されない可能性もあります。

適切な INP スコアとは何ですか?

ユーザーはさまざまなデバイスで Web サイトを閲覧している可能性があります。そして、各 Web サイトは独自のものにすることができます。したがって、単一の指標に基づいて Web サイトの応答性を「良い」または「悪い」と判断するのは困難です。しかし、それこそが INP が達成しようとしていることです。

Google には、サイトの INP スコアが良いか悪いかを確認するための簡単なグラフがあります。

優れた応答性: INP スコアが200 ミリ秒未満。
改善が必要: INP スコアが200 ～ 500 ミリ秒。
応答性が悪い: INP スコアが500 ミリ秒を超えています。

前述したように、INP は、デスクトップとモバイルデバイスにまたがる、記録されたすべてのページ読み込みの 75 パーセンタイルを考慮します。

INPの測定方法

INP は、現場 (実際のユーザーからのデータ) と実験室 (速度テストツールからのデータ) の両方で測定できます。

現場での INP の測定

現場で INP を測定するには、Chrome ユーザーエクスペリエンスレポート (CrUX) とリアルユーザーモニタリング (RUM) の 2 つの方法があります。

CrUX データは、オプトインした Chrome ブラウザユーザーから収集されます。Web サイトが CrUX 評価の対象となる場合は、Google の PageSpeed Insights 速度テストツールを使用して INP を測定できます。

Google は、Core Web Vitals プログラムの Web サイトを評価するための公式データセットとして CrUX を使用しています。ただし、何らかの理由 (主に訪問者が非常に少ない) で Web サイトが CrUX に適格でない場合は、Web サイトにコードを追加して独自のフィールドデータを収集する必要があります。その後、このフィールドデータを RUM プロバイダーにフィードして、より詳細な分析を行うことができます。

ほとんどの Web サイトにとって、PageSpeed Insights は、INP および関連するすべての Core Web Vitals メトリクスを測定するのに十分なツールです。

ただし、CrUX では、その結果に関する詳細な情報は提供されません。メトリクスをさらに理解して改善したい場合は、RUM ソリューションに投資することをお勧めします。これらのツールの使用方法については、この記事の範囲を超えています。 2 つの人気のある無料 RUM ソリューションである Datadog と New Relic をチェックしてください。

注: INP を測定すると、現場のデータと実験室のデータの間に明らかな違いが見つかる場合があります。理想的には、実際のユーザーがどのような体験をしているかの尺度が得られるため、現場から指標を収集する必要があります。このデータを使用して、INP をさらに最適化できます。これについては後のセクションで説明します。

フィールドデータを使用しない INP の測定

ラボでは INP を測定できませんが、CrUX の資格を得るサイト訪問者がほとんどいない、または RUM に投資する十分なリソースがないなど、何らかの理由でフィールドデータを測定できない場合でも、次の方法で潜在的な INP スコアを向上させることができます。研究室で遅いインタラクションを見つける。

注:上で述べたように、実験室で INP を測定することはできません。以下の提案は、実際の INP メトリクスの大まかなイメージを示すだけです。 INP のようなフィールド指標を予測するためにラボの測定値に依存することはできません。実際のユーザーが Web サイトをどのように使用するかを正確にシミュレートしていないからです。

Web Vitals Chrome ブラウザ拡張機能は、ユーザーインタラクションの遅延をテストする最も簡単な方法です。有効にした後、Web サイトの一般的なインタラクションをテストします。この拡張機能は、各対話の詳細な診断情報をコンソールに出力します。

拡張機能をインストールした後、Web ページ上の一般的なユーザーインタラクションフローを特定し、それらのインタラクションの応答性を個別にテストする必要があります。たとえば、フォームを送信したり、カートに商品を追加したりします。 web.dev の段階的な手順に従って開始できます。これは完璧な回避策ではありませんが、フィールドデータがない場合には優れた代替手段となります。

もう 1 つのオプションは、サイトの合計ブロック時間 (TBT) メトリクスを測定することです。これは INP と非常によく相関しており、集中できるインタラクションへのヒントとなる可能性があります。ページの TBT を測定する 2 つの優れたツールは、Lighthouse と PageSpeed Insights です。

ただし、TBT では、ページが読み込まれた後の遅いインタラクションは測定されないことに注意してください。

次のペイントへのインタラクションを最適化する方法 (INP)

Web サイトの INP を改善するための最初のステップは、最も遅いインタラクションを特定することです。前のセクションでは、Web サイトの最も遅いインタラクションを診断するためにフィールドデータを収集する方法を説明しました。

それを理解したら、ラボでこれらの遅いインタラクションを分析し、適切な解決策を見つけることができます。

すべてのユーザーインタラクションは 3 つのフェーズで構成されます。これらのフェーズを個別に検討して、全体的なインタラクションのレイテンシーを最適化する方法を見つけることができます。

入力遅延:これは、ユーザーがインタラクションを開始したときに開始され、インタラクションのイベントコールバックの実行が開始されたときに終了します。
処理時間:イベントコールバックが完了するまでにかかる時間。
プレゼンテーション遅延:ブラウザーが視覚的なフィードバックで次のフレームを更新するのにかかる時間。

ユーザーインタラクションの各フェーズは、最終的なインタラクションレイテンシ、つまり INP スコアに影響します。各フェーズを最適化する方法を知ることが、応答性を向上させる鍵となります。

入力遅延の最適化

入力遅延は、ユーザーインタラクションの最初の部分です。ビデオゲームをプレイする人なら誰でも、入力遅延がどれほどイライラするかを知っています。ウェブサイトでのやり取りにも同じことが当てはまります。

インタラクションに基づいて、入力遅延は数ミリ秒から数百ミリ秒に及ぶ可能性があります。これには、メインスレッドのアクティビティが忙しい、エラー、対話の重複など、複数の理由が考えられます。

理由に関係なく、イベントコールバックができるだけ早く実行を開始できるように、入力遅延を最小限に抑える必要があります。入力遅延を減らす 3 つの方法を次に示します。

ページが完全に機能するために必要なリソースの数を減らします。
大きなスクリプトの読み込みは避けてください。ブラウザによるリソースを大量に消費するスクリプト評価が必要になり、メインスレッドがブロックされるためです。スクリプトを複数のチャンクに分割し、分散することを検討してください。
コードに含める JavaScript はできるだけ少なくしてください。

イベントコールバックの処理時間の短縮

INP スコアの最適化の次の部分には、インタラクションのイベントコールバックの処理にかかる時間を短縮することが含まれます。

イベントコールバックのコードの最適化とは別に、処理時間を短縮するために実行できるアクションがいくつかあります。

メインスレッドをブロックしないでください。長いタスク (50 ミリ秒以上) をより小さなタスクに分割します。
ページに何かを埋め込んでいる場合は、使用されていないときはロードしないようにしてください。たとえば、ユーザーが再生するつもりがない場合に YouTube ビデオを読み込むのは効率的ではありません。

ここで、最高の WordPress パフォーマンスプラグインの 1 つである WP Rocket が非常に役立ちます。 「YouTube iframe をプレビュー画像に置き換える」機能を有効にして、YouTube iframe をサムネイル画像に置き換えることができます。

iframe タグは、訪問者がサムネイルをクリックした後にのみビデオをロードして再生します。 WP Rocket の強力な機能により、読み込み時間が短縮され、Core Web Vitals が向上します。

コード内にサードパーティのスクリプトを含めないでください。サードパーティのスクリプトを使用する場合は、Google タグマネージャーや Cloudflare Zaraz などのツールを使用すると、これらのスクリプトの読み込みを効率化できます。
不要なタスクを延期して、後で非同期的に実行します。これは、WP Rocket の組み込みの JavaScript 読み込み遅延機能を使用して有効にすることができます。

Web ページのメインスレッドは、ブラウザ内で一度に 1 つのタスクのみを処理できます。タスクには、HTML/CSS の解析、ページのレンダリング、JS コードの実行などのアクティビティが含まれる場合があります。タスクが長時間 (50 ミリ秒以上など) 実行されると、ユーザー操作を含む他のすべてのタスクが抑制されます。

場合によっては、テーマやプラグインがメインスレッドの速度を低下させていることに気づく場合があります。そのコードをあまり制御できないため、テーマまたはプラグインの作成者に問い合わせて、適切な修正を見つけることができます。

長いタスクを小さなチャンクに分割することで、メインスレッドを解放して、ユーザーとの対話を含む優先度の高いタスクを担当できるようになります。これにより、サクサクしたウェブサイトが完成します。

プレゼンテーションの遅延を最小限に抑える

ユーザーインタラクションの最後の部分は、表示の遅延です。これは、イベントコールバックが終了してから、次のフレームに視覚的なフィードバックが描画されるまでの時間です。

通常、プレゼンテーションの遅延により、ユーザーとの対話にかかる時間は最も短くなります。ただし、いくつかの方法でそれを抑えることができます。それを最小限に抑えるためのいくつかの方法を次に示します。

DOM サイズを最小限に抑えます。 ページレンダリングタスクは、DOM サイズに応じてスケールアップまたはスケールダウンします。ユーザー操作ごとに大規模な DOM を更新すると、ブラウザーにとって非常にコストがかかる可能性があります。さらに、DOM が大きいと、ページの最初の状態をレンダリングするのにより多くの時間が必要になります。詳細については、便利な DOM サイズガイドを参照してください。
オフスクリーン要素を遅延レンダリングします。 ページの読み込み時にページコンテンツの大部分がユーザーに表示されない場合、オフスクリーン要素を遅延レンダリングすることで、オンスクリーンコンテンツとの対話をより速く行うことができます。 CSS content-visibilityプロパティを使用すると、追加のコードやプラグインを追加することなく、これを簡単に実現できます。
JavaScript を使用した HTML のレンダリングは避けてください。 ブラウザーは HTML を最適に解析してレンダリングし、可能な限り最高のユーザーエクスペリエンスを提供します。 JS を使用して HTML の一部をレンダリングすることは問題なく、ほとんどのユーザーインタラクションに不可欠な部分です。ただし、JS を使用して HTML の大きなチャンクをレンダリングすると、ユーザーインタラクションの表示遅延など、Web サイトのレンダリングパフォーマンスに大きな影響を与えます。

WP Rocket でウェブサイトの INP スコアを向上させる

WP Rocket には、Web サイトのパフォーマンス上の利点を即座に提供するための多くのオプションが含まれています。ページキャッシュやキャッシュプリロードの自動有効化から、GZIP 圧縮や e コマースの最適化まで、Web パフォーマンスのベストプラクティスの 80% を適用して、アクティベーション直後に Web サイトを超高速で実行します。

WP Rocket は、アクティベーション時にほとんどの Web パフォーマンスのベストプラクティスを適用することに加えて、遅延読み込み、未使用の CSS の削除、JavaScript の最適化などの強力な機能を提供します。

最も重要なことは、WP Rocket の組み込み機能を使用して、ユーザーの操作が行われるまで JS スクリプトの実行を遅らせることができることです。これにより、最初のページの読み込み時間が短縮され、対話性が向上します。また、Largest Contentful Paint (LCP)、First Input Delay (FID)、および今後の Interaction to Next Paint (INP) などの Core Web Vitals メトリクスにも影響します。

まとめ

2024 年 3 月に INP が FID に代わって Web Vital のコア指標となるため、Web サイトがユーザーインタラクションをどのように処理するかが SEO に大きな影響を与える可能性があります。

高度にインタラクティブな Web サイトをお持ちの場合、サイトの INP の最適化は終わりのないプロセスのように思えるかもしれません。最適化すべきインタラクションが常にもう 1 つあります。新しい機能を追加しても負担はさらに増えるだけです。ただし、どこかから始めなければなりません。この記事が、あなたが正しいスタートを切るきっかけになれば幸いです。

INP スコアが向上すると、ユーザーエクスペリエンスも向上します。これには、時間と労力を費やす価値があります。