コアWebバイタル：Googleのガイド＆＃x27;のWebパフォーマンスメトリック

GoogleのコアWebバイタルとそのプロモーション方法を理解してください

コアポイント：

• コアWebバイタルは、Googleが実際のユーザーエクスペリエンスを測定するために使用する重要なパフォーマンスメトリックであり、パフォーマンス評価を簡素化し、ウェブサイトの所有者と開発者が最も重要な改善に集中することを支援します。これらの3つのメトリックは、最大コンテンツ描画（LCP）、最初の入力レイテンシ（FID）、および累積レイアウトオフセット（CLS）です。これは、荷重速度、インタラクティブ性、視覚安定性を評価します。
• lcp測定パフォーマンスの読み込みと、ビューポートに表示される最大の画像またはテキストブロックのレンダリング時間を報告します。 fid応答速度を測定し、ユーザーがページと対話する時間とブラウザがイベントハンドラーの処理を開始するまでの時間を記録します。 cls視覚の安定性を測定し、予期しないコンテンツの動きを評価します。これは、通常、広告の上の画像の後にDOMが変更されるか、現在のスクロール位置がロードされます。
• コアWebメトリックの改善には、画像の最適化、ブラウザキャッシュの活用、レンダリングのブロックリソースの最小化、重要なレンダリングパスの優先順位付けなど、Webサイトの側面を最適化する必要があります。 Googleは、ウェブサイトのパフォーマンスレポートに基づいて特定の推奨事項を提供します。これらのメトリックを重視するWebサイトは、負荷時間が短く、インタラクティブ性が向上し、より安定した視覚体験がある傾向があり、ユーザーの満足度が向上し、検索エンジンのランキングが改善されます。

Googleは、ユーザーが優れたWebエクスペリエンスを持っていることを望んでいるため、検索結果でランク付けされるWebサイトもより速く読み込まれます。もちろん、これは大きな単純化ですが、2つのサイトを同様のコンテンツと視聴者と比較していると仮定すると、ロードウェブサイトがより速い結果でランク付けされるはずです。ただし、このメトリックを測定するGoogleの方法は常にややとらえどころのないものであるため、コアWebメトリックを導入して、ウェブサイトの所有者と開発者に非常に必要な明確さを提供します。 残念ながら、「パフォーマンス」は数十のメトリックをカバーする一般用語です...

最初のバイト時間、レンダリングを開始、CPUの使用法、JavaScriptヒープサイズ、最初の意味の描画、最初のCPUアイドル、DOM読み込み、ページのフルロード、インタラクション時間、スタイルが1秒あたりの再計算

など。 さまざまなツールが異なる結果セットを返し、どこから始めればよいかを知ることは困難です。

GoogleのWeb Metricsプログラムは、パフォーマンスの評価を簡素化し、最も重要な改善に集中するのに役立つように設計されています。コアWebメトリックは、実際のユーザーエクスペリエンスを反映する重要なパフォーマンスメトリックです。いくつかのメトリックは、Chrome DevtoolsのLighthouseパネル、PageSpeed Insights、およびGoogle検索コンソールによって報告されています。

Web-Vitals JavaScriptライブラリは、Webサイトにアクセスする実際のユーザーから、より現実的なメトリックを測定するのに役立ちます。結果は、さらに分析するためにGoogleアナリティクスまたはその他のエンドポイントに公開できます。

Googleは75パーセンタイルを使用することをお勧めします。これは、同じメトリックに対して複数の結果を記録し、最高から最悪まで順番に並べ替えてから、4分の3の値を分析することをお勧めします。したがって、ウェブサイトの訪問者の4分の3がこのレベルのパフォーマンスを経験します。

現在のコアWebメトリックは、最大コンテンツの描画、最初の入力遅延、および累積レイアウトオフセットであり、それぞれロード、インタラクティブ性、視覚的安定性を評価します。

最大コンテンツ図面（lcp）

lcpの測定ロードパフォーマンス - コンテンツの速度速度。

ページの読み込みやdomcontentloadedなどの歴史的な指標は、ユーザーエクスペリエンスを常に反映しているとは限らないため、この点で常に問題があります。たとえば、ネタバレはほぼすぐに表示される可能性がありますが、さらにAJAXリクエストがロードされているように見えるのに時間がかかる場合があります。

最大コンテンツ図面（LCP）は、ビューポートに表示される最大の画像またはテキストブロックのレンダリング時間を報告しています。 2.5秒未満の時間は良いと見なされますが、4.0秒以上は悪いと見なされます。

LCPで考慮される要素の種類には、

が含まれます

• <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173949835734928.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Core Web Vitals: A Guide to Google's Web Performance Metrics">ロゴとメニューは移動しません - それらは安定した要素です。広告はDOMに追加され、その開始位置は変更されないため、安定しています。ただし、ヒーローイメージは移動します： <p> </p>ヒーローイメージは、360 x 720ピクセルビューポートで360 x 510ピクセルです。したがって、その衝撃スコアは（360 x 510） /（360 x 720）= 0.71<ol>です <li>ビューポートの高さ720ピクセルで垂直に90ピクセルで移動するので、その距離画分は90 /720 = 0.125 </li>です <li> </li>したがって、CLSは0.71 x 0.125 = 0.089 </ol>です 0.1未満のCLSスコアは良好であると見なされますが、0.25を超えるものは悪いと見なされます。この場合、患部は大きいですが、移動する距離は比較的小さいため、CLSは許容範囲内にあります。ただし、より大きな広告にはさらに注意が必要です。 <p> </p>CLSアルゴリズムは、ユーザーの相互作用の500ミリ秒以内にレイアウトオフセットを記録しません。したがって、ハンバーガーのアイコンからフルスクリーンメニューを開くなど、操作に必要なインターフェイスの更新、トランジション、アニメーションに対してページはペナルティを受けません。 <p> Chrome Devtoolsのレンダリングパネル（メニュー＆gt;その他のツール＆gt;レンダリング）は、レイアウトオフセットエリアオプションを提供します。ボックスを選択してページを更新します - レイアウトオフセットが青で強調表示されます。ネットワークパネルのネットワーク速度を変更して、負荷を遅くすることもできます。 </p> <p>fid/tbtは次のとおりで改善できます</p> <ol> <li> <code>widthおよびheightプロパティ、cssaspect-ratioプロパティ、または古い塗りつぶしのヒントを使用して、画像、ビデオ、およびiframe要素用のスペースを予約します（場合によっては）
ネットワークフォントをロードするときに、FOUT（STYLEDテキストの点滅）とFOIT（目に見えないテキストフラッシュ）を避けてください。同様のサイズの代替フォントをプリロードまたは使用すると、
ニュースレターの登録や同様の通知ボックスなど、最初のページの読み込み中に既存のコンテンツの上にDOM要素を挿入しないでください
コストがかからないアニメーションには、CSS
• およびtransformを使用します。 opacity

パフォーマンス優先度コアWebメトリックは時間の経過とともに開発されますが、LCP、FID、およびCLSメトリックの評価は、最も重要な問題を特定するのに役立ちます。最初に迅速でシンプルなパズルを解決します - 彼らは通常、最大のROIを持っています：

サーバー圧縮とhttp/2またはhttp/3

を有効にします
HTTP有効期限ヘッダーを設定することにより、ブラウザキャッシュが使用されることを確認します
できるだけ早くリソースをプリロードします
CSSとJavaScriptのマージと圧縮
未使用のリソースを削除します
CDNまたはより良いホスティングの使用を検討してください
適切な画像サイズとフォーマット
• を使用します
画像とビデオファイルのサイズを最適化します（プロフェッショナルCDNは役立ちます）
• Core Web Metrics FAQ
• コアWebメトリックとは何ですか？ コアWebメトリックは、Webページの読み込みパフォーマンス、インタラクティブ性、視覚的安定性を測定するためにGoogleによって導入されたユーザー中心のメトリックのセットです。それらは、ウェブサイトの全体的なユーザーエクスペリエンスを評価するために不可欠です。
• 3つのコアWebページインジケーターは何ですか？ 3つのコアWebメトリックは、最大コンテンツドロー（LCP）、最初の入力遅延（FID）、累積レイアウトオフセット（CLS）です。
• なぜコアWebメトリックがウェブサイトの所有者にとって重要なのですか？ コアWebメトリックは、ユーザーエクスペリエンスに直接影響するため、非常に重要です。これらのメトリックを重視するWebサイトは、負荷時間が短く、インタラクティブ性が向上し、より安定した視覚体験がある傾向があり、ユーザーの満足度が向上し、検索エンジンのランキングが改善されます。
• 私のウェブサイトのコアWebページメトリックを測定する方法は？ GoogleのPageSpeed Insights、Lighthouse、Chromeユーザーエクスペリエンスレポートなど、コアWebメトリックを測定するために使用できるさまざまなツールがあります。これらのツールは、LCP、FID、およびCLSメトリックに基づいたWebサイトのパフォーマンスに関する洞察を提供します。
• 私のウェブサイトのコアWebページメトリックを改善する方法は？ コアWebメトリックの改善には、画像の最適化、ブラウザキャッシュの活用、レンダリングのブロックリソースの最小化、重要なレンダリングパスの優先順位付けなど、Webサイトの側面を最適化する必要があります。 Googleは、ウェブサイトのパフォーマンスレポートに基づいて特定の推奨事項を提供します。
• コアWebメトリックは検索エンジンのランキングに影響しますか？ はい、コアWebメトリックはGoogleの検索アルゴリズムのランキング要因です。 Googleは、2021年5月から、ページエクスペリエンスシグナル（コアWebメトリックを含む）が検索結果のランキングに含まれると述べています。これらのメトリックのより良いユーザーエクスペリエンスを反映するWebサイトは、検索ランキングで有利になる可能性があります。

以上がコアWebバイタル：Googleのガイド＆＃x27;のWebパフォーマンスメトリックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。