CoreWebVitals(コアウェブバイタルズ)のモニタリングを可視化ができるSpeedCurveダッシュボード機能のご紹介

GoogleのCoreWebVitals(コアウェブバイタルズ)、を正しく理解しようとするのは、いま多くの人のやることリストの最上位にあります。年末年始のセールシーズンに間に合うように、SpeedCurveでは新しいVitalsダッシュボードを用意して、2021年のジャンプスタートを支援します。

SpeedCurveを忠実に使おうとするなら、パフォーマンスデータの視覚化は大切です。RUMとSyntheticデータの両方を活用し最も大切なことに対して対処するようにしましょう。

重要な各メトリックは、ダッシュボードのセクションに表示され、推奨のしきい値に対して、現在のポジションを表示します。

サマリービューは、スナップショットとしてデザインされており、単に見るだけでサイトがどこあるかを理解できます。各セクションを展開すれば、それぞれの指標の詳細が明らかになります。各データセットの最良の部分がレバレッジされ、うまくいけばその過程で改善指導することができます

Largest Contentful Paint (LCP)

ダッシュボードで最初に重要なのは、Largest Contentful Paint(LCP)です。各セクションが展開されると、バイタルバーからの「しきい値」がヒストグラムと時系列チャートに含まれます。時系列と一緒に分布を確認すると、異常を特定したり、パフォーマンス特性が異なるユーザーポケットの特定に役立ちます。

 

RUM(リアルユーザーモニタリング)だけで、ペイントのイベントを視覚化することはできません。これを行うには、シンセティック(合成)テストから取得したLCPの前後のフレームを調べる必要があります。LCPの精度は向上し続けていますが、2つのフレーム間で示される要素を特定することで、メトリックの精度とLCPに影響する要素の検証に役立ちます。

First Input Delay (FID) と Total Blocking Time (TBT)

これらのメトリックは2つとも、バイタルダッシュボードに表示されます。

FIDだけに焦点を当てている場合は、だめなJavaScriptによって引き起こされるエクスペリエンス低下というリスクをユーザーに与える可能性があります。 (詳細はこちら

JavaScriptがユーザーどのように影響しているかをより理解するために、合計のブロッキング時間と、最初の入力遅延の両方を調べることに価値があると考えていますRUMを使用して、長いタスク、最長のタスク、長いタスク数をキャプチャしますが、シンセティック(合成)テストにより、これらの違反者がなんであるかが示されます。TBTセクションの表は、特定のテストの詳細へのリンクとともに、責任のあるドメインを示しています。下は、実用的なデータです。

Cumulative Layout Shift (CLS)

TammyのCLSに関する投稿、およびMarkによる新しい視覚化をご覧になった方は、CLSの理解とデバッグ支援方法について、多くの時間を費やしてきたことをご存知でしょう。これら記事には、スコアを理解し、レイアウト変化を特定するのに役立ちます。

SpeedCurveご利用者様からよくある質問

SpeedCurveでRUMを使用していない場合はどうなりますか?

心配しないで。 他の誰かがRUMを持っているなら、それはいいでしょう。 (そうでない場合は、お気軽にテストトライアルで、RUMをお試しください。)

Vitalsの理解には重要なので、どこかでRUMを使用していることを確認してください。

 

ただし、RUMを使用していない場合でも、このダッシュボードを使用してほしいので、デフォルトでシンセティック(合成)データが表示されます。

 

SyntheticおよびRUMにページラベルを追加する

デフォルトでは、RUMと合成データの一致を試みます。これを正しく行うために、Vitalsに踏み込むための柔軟性を高めるために、RUMとSyntheticのページラベルを一致させて設定することが重要です。ここここで 詳しく説明ます

Web Vitalsの詳細はどこで確認できますか?

 

Copyright © 2021 SpeedCurve Limited. All Rights Reserved.

 

 

※この記事はSpeedCurve社の英文情報を元に、内容を分かりやすく編集、翻訳した記事です。

>サイトが重い、ファーストビューが速く表示されないこんなお悩み、ご相談ください。

サイトが重い、ファーストビューが速く表示されないこんなお悩み、ご相談ください。