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/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173949835734928.jpg" 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要素用のスペースを予約します（場合によっては）transformを使用します。 opacity
パフォーマンス優先度コアWebメトリックは時間の経過とともに開発されますが、LCP、FID、およびCLSメトリックの評価は、最も重要な問題を特定するのに役立ちます。最初に迅速でシンプルなパズルを解決します - 彼らは通常、最大のROIを持っています：
サーバー圧縮とhttp/2またはhttp/3
を有効にします以上がコアWebバイタル：Googleのガイド＆＃x27;のWebパフォーマンスメトリックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
