今回のテーマはExperience Vitalsアプリです。
ついにSaaS Version1.330にて、Sessionデータも正式にGrailに対応しました!
上記に伴い、新しくリリースされたフロントエンドの状態を確認する入口となるのがアプリ「Experience Vitals」。
今回はこのアプリをご紹介いたします。
今まで、フロントエンドの情報は、ナビゲーションメニュー「Frontend」や「Web」「Mobile」から確認していましたが、
これらに変わるのが、アプリ「Experience Vitals」です。
今まで通り、フロントエンドのセッションデータをソースとして、リクエストやエラー、インタラクション(クリック、スクロールといったユーザ操作)等のユーザイベント情報と、セッションの開始/終了時刻やデバイス・アクセス拠点といった識別子等のサマリーイベント情報の可視化ができることはもちろんですが、Webサイトの健全性を把握するための指標である「Core Web Vitals」をより簡単に確認できるようになりました。
今までもメトリクスとしてデータは保持していたため、データの確認やダッシュボード表示したりすることはできたのですが、能動的に確認や設定をする必要がありました。
これらが、アプリ「Experience Vitals」では、デフォルトでグラフ表示や閾値違反の発生状況確認、異常検知に関するヘルスアラートにも対応し、Webサイトの健全性判断がより簡易的にできるようになりました。
Google社が提供している「Web Vitals(ウェブバイタル)」という品質シグナルの統合ガイドに掲載されています。
サイト健全性を図る指標で、サイトやコンテキストに依存するものも多々ありますが、共通する重要なシグナルとして提唱されているのが、「Core Web Vittals」として挙げている3つの指標です。
・LCP(Largest Contentful Paint):ページの読み込みパフォーマンスの尺度
・INP(Interaction to NextPaint):応答性の尺度
・CLS(Cumulative Layout Shift):視覚的安定性の尺度
応答性の尺度は、以前は「INP」ではなく、「FIP(First Input Delay)」という初回入力遅延(ユーザが第一印象として感じるサイトのインタラクティブ性や反応速度を図る尺度)とされていました。
しかし、ユーザが「実際に体感するページの応答性」を図る場合、初回だけではなくページの全体的な応答性を指標とすべきとのことから、現在は「INP」に置き換えられました。
各指標の意味とデータの見方は以下の通りです。
| 指標 | 意味 | 見方 |
|
LCP |
ユーザ認識としてのページ表示速度を図る指標。 |
数値は秒で表し、値が小さいほどUXが良い。 |
|
INP |
操作してから反応が現れるまでの「タイムラグ」を図る指標。 |
数値はミリ秒で表し、値が小さいほどUXが良い。 ページ読み込み後のユーザのすべての操作のうち、最も遅かった操作が計測対象となる。 |
|
CLS |
「累積レイアウト変更」の意味で、視覚要素の安定性を示す指標。 |
数値はスコア(単位なし)で表し、値が小さいほどUXが良い。 |
参考URL:
Experience Vitalsアプリは、Dynatrace SaaSの新UI環境でのみ利用できる機能となります。
[アプリ] > [Experience Vitals]よりご利用いただけます。
#77-Experience Vitalsアプリ
アプリを開くと、概要ページが開き、Frontend(全体)、Web。Mobile毎に概要を確認できます。
表示されている数値は、左からそれぞれ、
①モニタリング無効数(Unmonitored)/②不健全な状態数(Unhealthy)/③健全な状態数(Healthy)、を指します。
※①②は該当のエンティティがない場合、表示されません
②の「不健全な状態」とは、以前はエラー発生やユーザアクション継続時間の遅延、予期せぬ高負荷等が検知対象でしたが、
Core Web Vitalsの計測結果による「注意が必要/不良」な状態も検知できるようになっています。
フロントエンドアプリケーション毎に状態を確認する場合は、対象メニュー([Web]、等)をクリック、もしくはページ最上部の
[Explorer]をクリックし、詳細ページに遷移します。
尚、Core Web Vitalsをはじめとして、各種データを確認できるDashboardsやNotebooksも提供されており、
データの確認の仕方もDashboards/Notebooks内に記載されていますので、何をどう見たらいいか‥と迷う場合は、
ここから確認するも良いかもしれません。
#77-Experience Vitals概要ページ
フロントエンドアプリケーション毎の状態を確認できます。
Health alartsには、「不健全な状態」に関するアラート、ページロード時間やエラー率と合わせて、Core Web Vitalsの各指標の結果を確認することができます。(Core Web Vitalsが表示されていない場合は、[Column hidden]から表示/非表示を調整してください。)
#77-Frontends一覧ページ
また、気になるフロントエンドアプリケーションをクリックすると、さらに詳細画面が開きます。
Web Viatls指標を中心とした各種グラフが用意されており、また上部には各種指標の状態(緑:良好、黄色:注意が必要、赤:不良)が表示されます。右上[Analyze performance]をクリックすると、全画面表示に切り替わります。
#77-Frontends_詳細ページ①
#77-Frontends_詳細ページ②
Grailへのセッションデータ取り込みは、以下の設定をご対応ください。
[Enable New Real User Monitoring Experience]を有効化
※2026年2月現在、RUM Classicを無効化して、New RUM Experienceのみを有効化することはできません。
尚、本機能を有効化した場合、New RUM Experienceに基づいたライセンスが消費されます。
#77-New RUM Monitoring設定
[アプリ]>[Users & Sessions]
Webサイトでは、表示速度や応答性といったフロントエンド側の性能がユーザ体験を大きく左右します。
Core Web Vitalsを用いることで、Webサイトの状態を継続的に可視化し、問題の早期検知、影響範囲の特定や改善ができ、
結果として、離脱防止や満足度向上につながり、ビジネス成果の最大化にも寄与します。
便利になったExperience Vitalsアプリを利用して、まずはWebサイトの状態を可視化してみませんか?
#77 フロントエンドの健全性判断をより簡単に!Experience Vitalsアプリのご紹介については、以上となります。
お読みいただきありがとうございました!
※記事執筆時 Dynatrace SaaS Version:1.330