レベル 2 - Core web vitalsから次のペイントスコアカードルールへ

インタラクション to Next Paint (INP) は、クリック、タップ、キーの押下などのユーザーのインタラクションに Web サイトがどれだけ早く反応するかを測定します。このスコアカードルールは、ユーザーをイライラさせたり、エンゲージメントやコンバージョンに悪影響を与える可能性のある応答性の問題を特定して修正するのに役立ちます。

このスコアカードルールについて

次のペイントルールへのこのインタラクションは、デジタルエクスペリエンス成熟度モデルのレベル 2 (プロアクティブ) の一部です。ページがユーザーインタラクションに迅速に応答するかどうかを評価し、スムーズで応答性の高いユーザーエクスペリエンスを保証します。

これが重要である理由:インタラクションの応答が遅いと、インターフェースが遅くて応答がないように感じられ、ユーザーが複数回クリックしたり、タスクを放棄したり、アプリケーションに対する信頼を失ったりする原因になります。INP スコアが速いということは、ユーザーにとってインターフェースが軽快で信頼できるものであることを示します。

このルールの仕組み

このルールは、ページのインタラクションから次のペイントまでの (INP) 時間の 75 番目のパーセンタイルが 200 ミリ秒を超えているかどうかを評価します。これは、Google の「良好な」応答性の閾値です。 INP は、ユーザーがインタラクションを開始してからブラウザが次のビジュアル更新を表示するまでの時間を測定します。

重要な注意: INP は秒単位ではなくミリ秒単位で測定されます。メトリクスは、ページ訪問中の最悪のインタラクション応答性をキャプチャします。

スコアを理解する

パス（緑）： 75番目のパーセンタイルINPが200ms以下（良好）
不合格（赤）: 75 パーセンタイル INP が 200 ミリ秒を超える（改善が必要または不良）
目標:最適なユーザー体験のために INP 時間を 200ms 未満に達成

Google の INP 閾値:

良好: 200ms以下
改善が必要: 200ms～500ms
悪い: 500ミリ秒以上

INP の測定内容: INP は、クリック、タップ、キーボード入力などのユーザーインターフェイスインタラクションの応答性をキャプチャします。インタラクションの開始からブラウザがユーザーに視覚的な応答を提示できるまでの時間を測定します。

インタラクションの応答性を理解する

INP は、インタラクション処理の 3 つのフェーズを測定します。

入力遅延

ユーザーインタラクション（クリック／タップ）からイベントハンドラーが起動するまでの時間

メインスレッドが他のタスクでビジー状態になっていることが原因です
JavaScriptの実行時間を短縮することで改善できる

処理時間

イベントハンドラの実行とアプリケーション状態の更新に費やされた時間

JavaScriptコード実行とDOM更新を含む
効率的なコードとアルゴリズムを通じて最適化できる

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

ハンドラが完了してからブラウザが視覚的な更新を表示するまでの時間

スタイル計算、レイアウト、ペイント操作が含まれます
CSSを最適化し、DOMの複雑さを軽減することで改善できます

INPが遅い場合の一般的な原因

重いJavaScriptの実行:複雑な計算がメインスレッドをブロックする
大規模なDOM操作:レイアウトの再計算を必要とする大規模な変更
非効率的なイベントハンドラ:クリック/タップハンドラ内のコードが適切に最適化されていない
サードパーティのスクリプト:インタラクション処理を妨害する外部コード

INPスコアを向上させる方法

スコアにインタラクションの応答性が低いと表示された場合は、次の手順に従ってパフォーマンスを最適化してください。

1. 遅いインタラクションを特定する

New Relicブラウザ監視を使用: INPデータを確認して、どのインタラクションが最も遅いかを特定します
インタラクションパターンを分析する:クリック、フォーム入力、ナビゲーションなど、どのユーザーアクションの応答性が低いかを把握する
デバイスとネットワークのパターンを確認する:低速 INP が特定のデバイスまたは接続タイプに影響しているかどうかを判断します。
重要なインタラクションを優先する:ユーザーのタスクとコンバージョンに不可欠なインタラクションに焦点を当てる

2. JavaScriptのパフォーマンスを最適化する

メインスレッドのブロッキングを減らす:

setTimeout()または requestIdleCallback()
負荷の高い計算タスクにはWebワーカーを使用する
必要なJavaScriptだけをロードするためのコード分割を実装する

イベントハンドラーを最適化します。

スクロールやサイズ変更などの頻繁なイベントをデバウンスする
多くの要素でパフォーマンスを向上させるには、イベント委任を使用します。
イベントハンドラーの外でDOMと計算をキャッシュする
インタラクションハンドラでの同期操作を避ける

コード効率を向上:

JavaScript のパフォーマンスをプロファイリングしてボトルネックを特定する
アルゴリズムとデータ構造を最適化する
未使用のコードと依存関係を削除する
効率的なDOM操作技術を使用する

3. レンダリングパフォーマンスを最適化する

レイアウトのスラッシングを軽減:

レイアウトの再計算を最小限に抑えるためにDOMの読み取りと書き込みをバッチ処理する
レイアウトプロパティの代わりに、アニメーションに CSS トランスフォームと不透明度を使用する
長いリストに仮想スクロールを実装する
強制的な同期レイアウト操作を避ける

CSS を合理化:

複雑なCSSセレクターを最小限に抑える
スタイル計算を必要とするDOM要素の数を減らす
CSSコンテインメントを使用してレンダリング作業を分離する
CSSアニメーションとトランジションを最適化する

4. パフォーマンスのベストプラクティスを実装する

最新の Web API を使用します。

オフスクリーンコンテンツにcontent-visibility実装する
スムーズなアニメーションにはrequestAnimationFrame()使用します
ブラウザのキャッシュとサービスワーカーを活用する
適切なリソースの優先順位付けを実施する

監視とテスト:

Chrome DevTools のパフォーマンスパネルを使用してインタラクションをプロファイリングする
さまざまなデバイス、特に低価格のモバイルデバイスでテストする
New Relic Browserを使用してリアルユーザー監視を実装する
INP回帰検出のアラートを設定する

実装ガイダンス

INP監視の設定

Core Web Vitalsデータ収集を有効にしてNew Relicブラウザ監視を設定する
ユーザー体験の目標に基づいて適切な測定値を設定する
最適化を実施する前にベースライン測定を確立する
さまざまなページやユーザーセグメントにわたる INP パフォーマンスを追跡するためのダッシュボードを作成します。

実用的なアラートの作成

INP パフォーマンス低下のアラートを設定します。

Good閾値: 75番目のパーセンタイルが200msを超えた場合
Poor 閾値: 75 番目のパーセンタイルが 500ms を超えるときの重大なアラート
傾向監視:前週比 20% の劣化を集計
セグメント固有のアラート:モバイルとデスクトップのパフォーマンスを個別に監視

最適化ワークフローの構築

定期的な評価: INP パフォーマンスデータの毎月のレビューをスケジュールします。
優先順位付けのフレームワーク:トラフィックが多くINPスコアが低いページに重点を置く
A/Bテスト:ユーザーセグメントを使用して最適化をテストし、改善を検証します。
エスカレーションプロセス:閾値を超えた場合にエンジニアリングが関与するための明確なパスを定義する

重要な考慮事項

カスタム評価:これらのガイドラインは基礎を提供しますが、アプリケーションごとに異なります。特定のユーザー体験の目標とビジネス目標に基づいて INP のパフォーマンスを評価します。パフォーマンス目標を設定するときは、ユーザーベース、典型的なインタラクションパターン、重要なユーザージャーニーを考慮してください。

継続的な改善: Web パフォーマンスの最適化は継続的なプロセスです。ユーザーの期待、ブラウザの機能、Web 標準は常に進化しています。定期的に INP 戦略を見直し、測定基準を更新し、最適化手法を適応させて、優れたインタラクション応答性を維持します。

総合的なアプローチ: INP は、包括的なパフォーマンス戦略の一部として使用すると最も効果的に機能します。他のCore Web Vitals (CLS および LCP) および従来のパフォーマンスメトリクスと組み合わせて、ユーザーエクスペリエンスを完全に可視化します。

次のステップ

このスコアカードルールを実装すると次のようになります。

L3 Core Web Vitals LCPスコアカードルールを確認して、Core Web Vitalsの最適化を完了します。
JavaScript エラー追跡を調べてインタラクションの問題を特定します
包括的なフロントエンド監視のためにAJAX 監視を実装する
体系的なデジタルエクスペリエンスの最適化のためのエクスペリエンス実装ロードマップを検討する

この機械翻訳は、参考として提供されています。

レベル 2 - Core web vitalsから次のペイント スコアカード ルールへ

このスコアカードルールについて.css-21sua1{background:none;border:none;width:0;padding:0;}