【LCP・FID・CLS】SpeedCurveでのコアウェブバイタルのモニタリングについて

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（Total Blocking Time）セクションの表は、特定テストのリンクとともに問題あるドメインを示します。下は、実際のデータです。

Cumulative Layout Shift (CLS)

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

SpeedCurveのによるFAQ

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

RUMを利用していない場合は、トライアルでRUMをお試してみてください。RUMは、Vitalsの理解には重要です。ただし、RUMを使用していない場合でも、このダッシュボードは利用してください。デフォルトでシンセティック（合成）データが表示されます。

シンセティックとRUMにラベルを追加する

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

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

• 質問がある場合は、サポートセンターにご連絡ください。
• YouTubeチャンネル：バイタルやその他のトピックのビデオを見てください 
• もっと詳しいHP：https：//web.dev/vitals/

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

Copyright © 2021 SpeedCurve Limited. All Rights Reserved.