Core Web Vitals — Chrome に組み込まれるようになりました

DevTools のこれらの数字が何なのか疑問に思ったことはありますか?

今年の初めに、Google は DevTools に Core Web Vitals のブラウザ内プレビューを導入しました。この記事では、Core Web Vitals (CWV) とは何か、なぜ重要なのか、そしてどのように改善できるのかについて詳しく説明します。

Core Web Vitals (CWV) は、Google Chrome のパフォーマンス タブに新しく追加されました。 CWV は、Google が Web ページの全体的なユーザー エクスペリエンスを評価するために使用する一連の指標です。彼らはパフォーマンスの 3 つの重要な側面に焦点を当てています:

最大のコンテンツフル ペイント (LCP)

LCP は、Web ページの読み込み速度の尺度です。高速 LCP は、ユーザーがページ上の最も重要なコンテンツの操作をすぐに開始できることを示します。

ドキュメントによると:

優れたユーザー エクスペリエンスを提供するには、サイトはページ訪問の少なくとも 75% で LCP が 2.5 秒以下になるよう努める必要があります。

LCP を最適化するためのベスト プラクティス:

• 画像を最適化し、ファイル サイズを削減します。
• レンダリングをブロックするリソースを最小限に抑えます。
• ブラウザのキャッシュを活用します。
• サーバーの応答時間を改善します。
• CDN を使用します。
• 詳細については、こちらをご覧ください。

インタラクティブペイント(INP)

INP は、ボタンをクリックしたりフォームに入力したりするときのページの応答性の尺度です。 INP が速い場合は、ページの応答性が高く、動作が遅い、または応答しないと感じないことを示します。

ドキュメントによると:

優れたユーザー エクスペリエンスを提供するには、Web サイトは次のペイントまでのインタラクションが 200 ミリ秒以下になるように努める必要があります。

INP を最適化するためのベスト プラクティス:

• JavaScript の実行時間を最小限に抑えます。
• メインスレッドをブロックするような長いタスクは避けてください。
• 重要なタスクを優先し、重要でないタスクは延期します。
• イベント処理と入力処理を最適化します。
• 詳細については、こちらをご覧ください。

累積レイアウトシフト (CLS)

CLS はページの視覚的な安定性を測定するもので、ページが読み込まれた後に要素が予期せず移動する頻度を評価します。予期しないレイアウトの例はここにあります。

CLS が低いということは、ページが視覚的に安定しており、ユーザー エクスペリエンスを混乱させる可能性のある予期しないレイアウトの変更を受けていないことを示します。ドキュメントによると:

優れたユーザー エクスペリエンスを提供するには、サイトの CLS スコアが 0.1 以下になるように努める必要があります。

CLS を最適化するためのベスト プラクティス:

• 動的コンテンツ用のスペースを予約します。
• 寸法が指定されていない画像は避けてください。
• フォント表示を使用: フォントを切り替えます。
• JavaScript によって引き起こされるレイアウトの変更を最小限に抑えます。
• 詳細については、こちらをご覧ください。

Core Web Vitals が重要なのはなぜですか?

ユーザー エクスペリエンス: ウェブサイトの成功には、優れたユーザー エクスペリエンスが不可欠です。 Core Web Vitals は、ユーザーが Web サイトのパフォーマンスと使いやすさをどのように認識するかに直接影響します。

検索エンジンのランキング: Google は、Core Web Vitals がランキング要素であることを示しています。 Core Web Vital スコアが低い Web サイトは、検索結果でのランクが低くなる可能性があります。

コンバージョン率: 高速で安定した Web サイトは、訪問者を顧客に変える可能性が高くなります。

結論：

Core Web Vitals の改善に重点を置くことで、より良いユーザー エクスペリエンスを生み出し、Web サイトの検索エンジンのランキングを向上させ、Web サイトのコンバージョン率を高めることができます。

以上がCore Web Vitals — Chrome に組み込まれるようになりましたの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。