INP による Web パフォーマンス標準の再定義

導入

ウェブのパフォーマンスはもはや技術的な詳細ではなく、ユーザーのインターネット体験を大きく変えるものです。 コア Web Vitals のブロックの最新の要素は、Interaction to Next Paint (INP) です。この新しい指標は、Web ページの応答性を測定するギャップを埋め、インタラクション遅延の最終的な指標となることを目指しており、実際に 初回入力遅延 (FID) に代わることができます。

私たちは、INP とは何か、それを気にする必要がある理由、INP を測定する方法、そして改善を促進するためにすぐに適用できるいくつかの実用的なヒントを詳しく掘り下げます。 .

INPとは何ですか？

それでは、INP とは何ですか?簡単に言うと、ボタンをクリックしたりフォームに入力したりするなど、ユーザーが Web サイトを操作してから、次の視覚的な更新が画面にポップアップ表示されるまでの経過時間を測定します。ここでの目的は、ユーザーがサイトを操作するときに実際に感じる遅延を捉えることです。

ブラウザがユーザーの入力に応答するまでにかかる時間だけを調べる FID とは異なり、INP はより広い視野を持っています。最初の遅延から視覚的な応答までのプロセス全体を検査し、サイトの応答性をより完全に把握します。

INP が重要なのはなぜですか?

1. ユーザーエクスペリエンス

正直に言って、私たちはウェブサイトを操作するとき、物事が迅速に行われることを望んでいます。顕著な遅れがあると、イライラしてしまいます。待ち時間が長いと、ユーザーが不満を抱き、エンゲージメントが低下し、さらにはサイト自体の放棄につながる可能性があります。

2. 全体的な対応力

FID はパズルの一部、つまりブラウザのメインスレッドがどれだけビジーであるかを示すだけです。しかし、それはほんの始まりにすぎません。 INP は、ユーザーが知覚する合計遅延を測定することでギャップを埋め、応答性の尺度として FID よりも確実なものとなります。

3. 将来を見据えた指標

Google は INP をランキング アルゴリズムに統合する予定であるため、今すぐ INP を把握しておくことで、後で検索ランキングで優位に立つことができます。

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

単一ページビューの INP を測定するには、次の手順を実行します:

1. セッション中のすべてのユーザー操作 (クリック、タップ、キーの押下) を追跡します。
2. 各インタラクションで画面上の視覚的な更新が行われるまでにかかる時間に注意してください。
3. そのページの INP スコアは、測定した最長のインタラクション遅延に基づいています。

このようにして、ユーザーの認識にとって重要な応答性の最悪のシナリオを確認することになります。

INP スコアリングのガイドライン:

• 良好: INP ≤ 200ms
• 改善の必要性: 200ms < INP ≤ 500ms
• 悪い: INP > 500ミリ秒

INPの診断と改善

INP とは何かを理解したところで、INP を改善する方法について説明しましょう。ユーザー インタラクションを処理するさまざまなフェーズを最適化するための戦略をいくつか示します:

1. 入力遅延を短縮する

• メイン スレッドを監査する: Chrome DevTools などのツールを使用して、メイン スレッドをブロックしているタスクを特定し、より小さく管理しやすい塊に分割します。
• JavaScript の最適化: コードをクリーンアップします。未使用の JavaScript を最小化し、圧縮し、削除します。 React などのツールを使用している場合は、同時レンダリングを利用してタスクをより効率的に分散します。

2. イベント処理の改善

• デバウンスとスロットル: スクロールやサイズ変更などの高頻度イベントの場合は、テクニックを使用して追加のプロセスをトリガーする頻度を制限します。
• パッシブ イベント リスナーの使用: パッシブ リスナーを適用することで、タッチ イベントとスクロール イベントのパフォーマンスが向上します。

3. ペイントの最適化

• レイアウトのずれを減らす: DOM の変更をできるだけ避け、常に JavaScript の代わりに CSS トランジションを使用します。
• 優先ペイントに焦点を当てる: Lighthouse を使用して、サイトのどの部分を優先的にペイントする必要があるかを判断し、それらの経路に焦点を当てます。

4. ブラウザの最適化を使用する

• 重要なリソースのプリロード: フォント、画像、スクリプトをユーザーが要求したときに利用できるように、事前に準備します。
• Web ワーカーを使用する: メイン スレッドのブロックを防ぐために、負荷の高い計算を Web ワーカーにプッシュします。

INPを測定するためのツール

INP を監視するには、次の便利なツールの使用を検討してください。

• Lighthouse: このツールはサイトの応答性を監査し、改善方法に関する実践的なアドバイスを提供します。
• Chrome DevTools パフォーマンス パネル: インタラクションのタイムラインと遅延を分析します。
• PageSpeed Insights: INP を測定するための現場からのリアルタイム データを提供し、改善のための推奨事項を提供します。

結論

INP または 次のペイントへのインタラクション は、ウェブ パフォーマンス の世界で UX を最優先にする変革的な指標です。これは、サイトが現実的なインタラクションにどの程度反応しているかを表し、ユーザーの満足度と検索エンジンの最適化において重要な要素となります。 INP について学び、それを強化するための戦略を導入することで、進化するパフォーマンス標準に対応するだけでなく、ユーザーがサイトにアクセスするたびにシームレスで楽しいエクスペリエンスを確実に楽しむことができます。このブログが気に入って、フロントエンド開発 と ソフトウェア エンジニアリング について詳しく知りたい場合は、Dev.to で私をフォローしてください。

以上がINP による Web パフォーマンス標準の再定義の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。