Web表示スピード研究会

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

GoogleのCoreWebVitals(コアウェブバイタルズ)、を正しく理解しようとするのは、いま多くのWeb担当者の最優先項目です。これからのセールシーズンに間に合うように、SpeedCurveでは、Vitals用に新しいダッシュボードを用意して表示スピードの改善を支援します。

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にページラベルを追加する

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

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


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

Copyright © 2021 SpeedCurve Limited. All Rights Reserved.

PSI、コアウェブバイタル、表示スピードの課題については、下記よりお問合せください。