Interaction to Next Paint (INP): WordPress 最適化ガイド

公開: 2024-01-31

Next Paint または INP へのインタラクションは、Google の Core Web Vitals 指標に追加された最新の機能であり、WordPress ウェブサイトの所有者にとって重要になります。 これはサイトのユーザー エクスペリエンスの品質を判断するためのもう 1 つの尺度であり、SEO にも影響します。

INP は、Web サイトがユーザー入力にどれだけ早く応答するか、たとえば、訪問者がボタンをクリックしてからどれくらいで効果が現れるかを追跡します。 おそらく、素早い反応が好ましいのは当然のことでしょう。

最大コンテンツフル ペイント、累積レイアウト シフト、最初の入力遅延と同様に、コア ウェブ バイタルのこの部分を解決する方法を理解できるように、WordPress で次のペイントへのインタラクションを最適化する方法に関する詳細なガイドをまとめました。 この記事では、INP とは何か、INP を気にする必要がある理由、INP を測定する方法、そして最も重要なことに、INP を改善する方法について説明します。

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

Interaction to Next Paint (INP) は、Web 開発者にとってますます重要になっているパフォーマンス指標です。 2024 年 3 月までに、Google の Core Web Vitals の一部として First Input Delay (FID) を置き換える予定です。

WordPress で次のペイントへのインタラクションのシンボルとしてペイントする人々

INP は、ユーザーが Web ページと最初に対話した瞬間の測定を開始します。 インタラクションとは、たとえば、マウスのクリックやキーの押下などです。 測定は、ページがその入力に視覚的に応答するまで継続されます。 その点で、INP は、FID が提供するものよりもサイトの応答性を調べるためのはるかに包括的な方法です。

2 つの指標の主な違いは、測定の範囲と深さにあります。 FID は、最初のユーザー操作からブラウザがリクエストの処理を開始するまでの遅延を定量化します。 INP はさらに進化します。 まず、ユーザーのインタラクションから次回ページが更新されるまでのプロセス全体を訪問者の観点から測定します。 これには、入力遅延、処理時間、およびプレゼンテーション遅延の全サイクルが含まれます。

入力位相
画像ソース: web.dev

さらに、Interaction to Next Paint は、最初のインタラクションだけでなく、ユーザーがページにアクセスする間、対象となるすべてのインタラクションのレイテンシを監視します。 このメトリクスは、最も遅い応答時間に焦点を当てて、UI 応答の最悪の 2% を報告します。 このアプローチにより、INP はページの最悪の場合のユーザー エクスペリエンスの最も現実的な尺度を反映するようになります。

どうしてそれが重要ですか？

INP は、Web サイト上のユーザー エクスペリエンスを理解し、改善するために不可欠です。 これは、FID よりも全体的な応答性を示す信頼性の高い指標です。 良好な INP 値は、ユーザー インタラクションに対する視覚的な応答が迅速であることを示します。 ただし、スコアが低いと、ユーザー エクスペリエンスがイライラする可能性があります。

INP の重要性は、SEO ランキングへの影響にもあります。 これを Core Web Vitals 指標に組み込むことで、Google は Web サイトのパフォーマンスにおけるユーザー エクスペリエンスの重要性を強調しています。 ユーザー操作後の視覚的なフィードバックがより迅速に表示される Web サイトは、検索ランキングで支持される可能性があります。 しかし、これは逆もまた真であることを意味します。大幅な遅延が発生した Web サイトはランキングに悪影響を与える可能性があります。

INPの原因は何ですか?

ユーザー インタラクションに対する Web ページの応答性に関連するさまざまな要因が、Interaction to Next Paint (INP) メトリクスに影響を与えます。 要因は入力遅延、処理時間、プレゼンテーション遅延の 3 つのフェーズに大別できます。

  • 入力遅延: このフェーズは主に、JavaScript のいわゆる長いタスクの影響を受けます。 ブラウザーがすでにビジー状態であるときにユーザー操作が発生した場合、ブラウザーは操作を処理する前にタスクを完了する必要があるため、顕著な遅延が発生します。
  • 処理時間: このフェーズでは、ブラウザがユーザーの入力に応答するまでにかかる時間をカバーします。 ここでの遅延は多くの場合フラストレーションをもたらし、すぐにフィードバックが得られないために訪問者が同じページ要素を繰り返しクリックする「怒りのクリック」として現れることもあります。
  • プレゼンテーション遅延: 最終フェーズは、イベント コールバックの完了から、ブラウザーがインタラクションの結果を示す次のフレームをレンダリングできるまでの時間です。

高INPの主な要因

INP 測定期間全体を通じて、次のような複数の要因により遅延が発生する可能性があります。

  • JavaScript タスクが 50 ミリ秒を超える場合、それらは長いタスクとみなされます。 これらはメインスレッドをブロックし、ブラウザーがユーザーの次の操作を処理する能力を遅らせる可能性があります。
  • インタラクションが処理されると、ブラウザーは変更を反映するために次のフレームをレンダリングする必要があります。 Web ページが大きいか複雑な場合、またはレイアウト スラッシング (ブラウザがスタイルやレイアウトを過剰に再計算する) などの問題がある場合、次のフレームの表示が遅れる可能性があります。
  • ロードしてインタラクティブになるために大量のリソースを必要とするページでは、INP で遅延が発生する可能性があります。 これには、大きな画像、ビデオ、または CSS と JavaScript を多用するページが含まれます。
  • 追跡スクリプトや分析スクリプトなどのサードパーティのスクリプトやツールを使用すると、読み込み時間や処理時間が長くなり、ページの応答性に影響を与える可能性があります。
  • ネットワーク接続が遅い場合や遅延が長い場合も影響を受ける可能性があります。

INPはどのように測定しますか?

Interaction to Next Paint (INP) を測定することは、WordPress サイトのインタラクティブ性と応答性を理解し、改善するための鍵となります。 ありがたいことに、Web サイトのパフォーマンスを把握するのに役立つツールがいくつかあります。

  • PageSpeed Insights — これについてはおそらくよくご存知でしょう。 ページの URL を入力すると、INP 値を含む詳細なレポートが表示されます。
  • Chrome DevTools: デフォルトで Chrome に組み込まれているブラウザ開発者ツールは、入力遅延、処理時間、プレゼンテーション遅延など、INP の詳細な内訳を提供します。
  • SpeedVitals Core Web Vitals Checker: このツールは、INP を含むさまざまなパフォーマンス メトリックを測定する Core Web Vitals Checker を提供します。 Chrome ユーザー エクスペリエンス レポート (CrUX) API を介して、実際のユーザーからのフィールド データを提供します。
  • Lighthouse: Chrome DevTools 内で利用できるもう 1 つのツールである Lighthouse は、Web サイトのパフォーマンスの詳細な分析に使用できます。

上記のソリューションのほとんどは、簡単にアクセスできるように INP スコアを表示するだけです。

ページスピードの洞察における次のペイントへのインタラクション

測定するときは、ラボ データ (制御された環境で実行される合成テスト) とフィールド データ (ユーザーからの実際のパフォーマンス データ) の両方を考慮することが重要です。

この包括的なアプローチにより、さまざまなシナリオやユーザー エクスペリエンスにおける Web サイトの INP パフォーマンスをより明確に理解できるようになります。

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

Chrome チームは、適切な Interaction to Next Paint (INP) スコアを決定するための明確なベンチマークを提供しています。 これらのガイドラインでは、Web ページの応答性のレベルを示すために INP スコアを 3 つの異なる範囲に分類しています。

次のペイント スケールへのインタラクション
画像ソース: web.dev

上でわかるように、200 ミリ秒以下の INP が理想的であると考えられます。 INP が 200 ～ 500 ミリ秒の範囲にある場合は、改善の余地があることを意味します。 500 ミリ秒を超える INP スコアには不良のフラグが立てられます。

これらのスコアは、クリック、タップ、およびキーボードのすべての操作を考慮した、ユーザーのページ訪問期間全体の評価から導出されます。 繰り返しになりますが、INP メトリクスは、ページのインタラクティブ性の現実的な尺度を提供するために、最悪の (または最も遅い) インタラクションに焦点を当てています。

WordPress ウェブサイトの INP を改善する方法

Web サイト上の次のペイントへのインタラクションを改善するには、WordPress サイトがユーザー入力にいかに迅速かつ効率的に応答するかを最適化できるいくつかの重要な戦略が必要です。 ここで、時間をかけてこれらの戦略を検討し、効果的に実装するためのヒントを提供しましょう。

一般的なパフォーマンスの向上

基本的なサイト改善タスクに取り組むことで、INP を大幅に改善できる場合があります。 より複雑な作業を行う前に、次の点に注意してください。

  • 信頼性が高く効率的なホスティング サービスを選択する: これは、Web サイト リソースのより迅速な配信を確保し、INP を向上させるのに役立ちます。
  • テーマとプラグインは慎重に選択してください。選択するテーマとプラグインは、Web サイトの速度と効率を損なうものではなく、Web サイトの速度と効率に貢献するものでなければなりません。
  • サイト上のプラグインの数をできるだけ少なくしてください。プラグインが減れば、読み込むコードも減ります。 また、最適なパフォーマンスを維持するために、Web サイトとそのプラグインを定期的に更新してください。
  • キャッシュ戦略を使用し、データを圧縮します。これにより、読み込みプロセスが高速化され、ユーザー エクスペリエンスが向上します。
  • CDN を使用する: コンテンツ配信ネットワーク (CDN) を使用すると、ファイル配信が高速化され、読み込み時間が短縮されます。

メインスレッドの可用性を最適化する

メイン スレッドは、ブラウザの作業パイプラインと呼ばれるものです。 Web サイトのレンダリングと実行に必要なすべてのプロセスがこのプロセスを通過します。

ブラウザのメインスレッドの代わりとしての金属パイプ

したがって、ユーザー インタラクションを処理するためには重要であり、この目的のためにその可用性を最適化することが不可欠です。 そのためのいくつかの戦略を次に示します。

  • 大規模なタスクを分割する: 大規模な JavaScript タスクを、より小さく管理しやすい塊に分割します。 これにより、単一のタスクがメイン スレッドを長時間ブロックすることがなくなり、ユーザー インタラクションをより迅速に処理できるようになります。 setTimeout や requestIdleCallback などの手法を使用すると、アイドル期間中にタスクをスケジュールするのに効果的であり、入力遅延が軽減されます。
  • スラッシングを回避する: スラッシングは、コードが通常ループ内でブラウザーにスタイルやレイアウトの再計算を繰り返し強制するときに発生します。 スラッシングを避けるために、DOM 操作とスタイルの再計算の数を最小限に抑えます。 DOM の読み取りおよび書き込み操作をバッチ処理して、リフローと再描画のサイクルを削減します。

(PS: 上記の意味がよくわからない場合は、開発者に相談するのが最善でしょう。)

遅延読み込みを追加する

遅延読み込みを実装すると、パフォーマンスが大幅に向上します。 これにより、ユーザー ジャーニーの後半まで必要のない画像やスクリプトなど、ページの読み込み時に重要ではないリソースの読み込みが遅延します。

遅延読み込みの例

これにより、メインスレッドの初期負荷が軽減され、ユーザー対話をより効率的に処理できるようになります。

JavaScriptの最適化または削除

JavaScript の実行は INP に大きな影響を与える可能性があります。 JavaScript を最適化するには:

  • 不要なコードを削除する:サイト上に存在しないものはブロックできません。 したがって、INP と全体的なパフォーマンスを向上させるために、時間をかけて未使用の JavaScript と CSS を削除してください。
  • JavaScript ファイルの縮小: 不要な書式設定やコメントを削除して JavaScript ファイルのサイズを小さくすると、ファイルの読み込みが速くなり、メイン スレッドがより早く解放されます。
  • 効率的なコードを使用する: JavaScript コードのパフォーマンスを最適化します。 不必要な計算や長時間実行されるタスクを避けてください。
  • Defer Non-Critical JavaScript : 重要ではないスクリプトを非同期でロードするか、メイン コンテンツがレンダリングされるまでロードを延期します。 この主な例は、前述の分析スクリプトです。

速度低下の根本原因を見つける

速度低下の根本原因を特定することが、効果的な最適化の鍵となります。 サイトのパフォーマンスを詳細に分析するには、Google の Lighthouse や PageSpeed Insights などのツールを使用します。 これらは、大きな DOM サイズや非効率なスクリプト実行など、改善が必要な特定の領域を特定するのに役立ちます。

ページスピードの洞察診断

INPを改善するのに役立つWordPressプラグイン

上記は、Web サイトの INP スコアを改善して、より応答性が高くユーザーフレンドリーな Web サイト エクスペリエンスを実現するための一般的なヒントです。 特に WordPress の Interaction to Next Paint (INP) を改善するには、次の便利なプラグインを試すこともできます。

  • WP Rocket: キャッシュ機能で知られる WP Rocket は、コードの最適化、ファイルの縮小、データベースの最適化も提供します。
  • フライング スクリプト: このプラグインを使用すると、重要ではないスクリプトの実行を、ユーザーがタスクを完了しようとしていない時間まで遅らせることができます。
  • NitroPack: このプラグインは、WooCommerce の高度なオプション、サーバーレベルのキャッシュを提供し、重要な CSS を生成します。 技術的な最適化に詳しくない人にとっても使いやすいものです。
  • アセット クリーンアップ: これは、JavaScript の縮小、スクリプトの遅延、およびその他の最適化タスクのホスト全体を実行するためのもう 1 つの優れたオプションです。
  • WP-Optimize: このプラグインは、データベースのクリーンアップ、画像圧縮、キャッシュ機能を組み合わせています。 特にデータベースの最適化機能が役立ちます。
  • Perfmatters: Perfmatters は WP Rocket のようなオールインワン ツールと併用するのが最適ですが、多くの小規模なパフォーマンス タスクを効率的に処理するため、他のプラグインを適切に補完します。
  • W3 Total Cache: さまざまなキャッシュ方法を提供する W3 Total Cache は、さまざまな最適化の側面を詳細に制御できる、より技術的なプラグインです。
  • 自動最適化: 画像の最適化や縮小などの基本を処理します。 最良の結果を得るには、キャッシュ プラグインと組み合わせてください。

最終的な考察: WordPress での次のペイントへのインタラクションの最適化

Interaction to Next Paint (INP) は、Web ページの応答性を表す Core Web Vitals の非常に重要な側面として浮上しています。

重要なのは、オンラインでのきびきびとした魅力的なエクスペリエンスを作成することであり、これは誰もが大切にしていることです。 ここで説明する方法を使用して INP 向けに最適化すると、ユーザー エクスペリエンス、検索ランキング、全体的なパフォーマンスの向上においてサイトに多くのメリットをもたらすことができます。 それは単に技術的な調整を行うだけの問題ではありません。 これは、視聴者にとって快適でスムーズな体験を保証する方法でもあります。

ただし、INP の最適化は継続的なプロセスであり、ユーザーの対話パターンや Web サイトの更新に基づいた定期的な監視と調整が必要であることを忘れないでください。 これは 1 回で完了というものではありませんが、上記の手順でサイトを適切な状態にできるはずです。

WordPress の Next Paint へのインタラクションを改善するための追加の洞察やヒントはありますか? 以下であなたの経験を自由に共有してください。