Core Web Vitals は、Google がランク付けする 3 つの指標 (LCP、CLS、INP) を表示します。これらは、表示しているページ上でライブで測定され、Google のしきい値に照らして評価され、各数値の背後にある正確な要素まで追跡されます。
Core Web Vitals はページのランク付けの一部を決定しますが、通常の測定方法は扱いにくいです。ラボ ツールは、誰も経験しない合成負荷をスコア付けします。 Search Console は、実際のユーザーを 4 週間遅れで URL バケットにグループ化してレポートします。どちらも、目の前のページのどの要素に問題があるのかを教えてくれません。
このツールは、ユーザーが実際に見ているページを使用しながら測定します。 LCP、CLS、INP にはそれぞれ、その値、Google が公開しているしきい値に対する Good、Needs work、Poor の評価を示すタイルと、自分が座っている位置を示すバーが表示されます。遅いサーバーによって引き起こされる遅い LCP は、重いイメージによって引き起こされる問題とは異なるため、FCP と TTFB はコンテキストのためにそれらと並んでいます。
この定義は Chrome が CrUX に報告するものと一致します。これは、Search Console と数値を比較する場合に重要です。 CLS は、すべてのシフトを素朴に加算するのではなく、セッション ウィンドウを使用します。つまり、ウィンドウは 1 秒のギャップの後、または 5 秒で終了し、最も悪いウィンドウが優先されます。 INP はインタラクション レイテンシの 98 パーセンタイルであり、通常の訪問では単に最も遅いインタラクションに相当します。 LCP は、Chrome とまったく同じように、最初の操作で変更を停止します。
最も便利なのは、すべての数値が帰属されることです。パネルには、最大のペイント要素、シフトした要素、および最も遅いインタラクションの名前が表示され、[表示] ボタンでそれらのいずれかにスクロールし、ページ上でアウトラインを表示します。 CLS が 0.31 であることを知る代わりに、コンテンツを押し下げているバナーが表示されます。コピーレポートでは、すべてがチケットのテキストとして渡されます。
ページを使用すると 3 つのランキング指標が更新されます。スクロールすると CLS が移動し、クリックして入力すると INP が移動します。それぞれは、Google の基準に照らして、「良い」、「作業が必要」、または「悪い」と評価されます。
最大のペイント要素、シフトした要素、および最も遅いインタラクションに名前を付けます。 [表示] を押していずれかの項目までスクロールし、ページ上で直接アウトラインを表示します。
CLS はギャップが 1 秒、上限が 5 秒のセッション ウィンドウを使用し、INP はインタラクション レイテンシの 98 パーセンタイルで、LCP は最初のインタラクションでフリーズするため、数値は Search Console と一致します。
First Contentful Paint と Time To First Byte は主要 3 の隣に位置するため、間違った最適化を開始する前に、遅いサーバーと重いヒーロー イメージを区別できます。
イベント タイプと関連する要素との最も遅いインタラクションをリストするため、遅いドロップダウンやフィルターを推測するのではなく見つけることができます。
ワンクリックですべてのメトリクス、評価、問題のあるセレクターをプレーン テキストとしてコピーし、チケット、プル リクエスト、またはクライアントの電子メールに貼り付けることができます。
1 か月後に Search Console から確認するのではなく、新しいテンプレートで LCP、CLS、INP が緑色になっていることを公開前に確認します。
Search Console は、URL のグループが CLS に失敗したことを通知します。このツールでそのうちの 1 つを開き、どの要素がシフトしているかを正確に確認します。
ページをスクロールして CLS が上昇するのを確認し、[表示] を押して、コンテンツを移動させている遅延読み込み広告、バナー、または Web フォントの輪郭を表示します。
フィルター、メニュー、モーダルをクリックして選択し、最も遅いインタラクションのリストを読んで、どのコントロールに数百ミリ秒もかかっているかを見つけます。
数値を記録し、修正を展開してから、同じページを再度測定し、2 つのレポートを並べて比較します。
DevSuite Pro ドックで Core Web Vitals アイコンをクリックします。ページに既に記録されているものを使用して、メトリック タイルがすぐに表示されます。
LCP はページのロードの開始時のみ意味があるため、信頼できる読み取り値が必要な場合は、パネルを開いた状態でリロードしてください。
ページ全体をスクロールして CLS を実行し、クリック、タップ、入力して INP 測定値を生成します。タイルは進むにつれて更新されます。
LCP 要素、レイアウト シフト ソース、または遅いインタラクションの横にある [表示] を押します。ページがスクロールしてその概要が表示されるため、どの要素が関与しているかが曖昧になりません。
[レポートのコピー] をクリックすると、すべての指標、評価、セレクターのプレーンテキストの概要が表示されます。 CLS と INP を最初から再起動するには、[リセット] を押します。
