2026.02.09

#77 フロントエンドの健全性判断をより簡単に！Experience Vitalsアプリのご紹介

Dynatrace
Tips
Application
RUM
Dynatrace Apps 紹介シリーズ

目次

開く

     

    皆さまこんにちは、IIMサポートチームです。  
     
    このブログではDynatraceのTips等、
    気軽に読めて皆さまのお役に立てるようなコンテンツを配信しています。
     
    ＊文中、斜体になっている単語はDynatrace画面上/ドキュメント内で使用される用語となります
    　例）Service、Host など
    ＊青色の色掛部分は操作対象のボタンを表しています

     

     

    今回のテーマはExperience Vitalsアプリです。
    ついにSaaS Version1.330にて、Sessionデータも正式にGrailに対応しました！
    上記に伴い、新しくリリースされたフロントエンドの状態を確認する入口となるのがアプリ「Experience Vitals」。

    今回はこのアプリをご紹介いたします。

     

    フロントエンドの健全性判断をより簡単に！Experience Vitalsアプリのご紹介

    今まで、フロントエンドの情報は、ナビゲーションメニュー「Frontend」や「Web」「Mobile」から確認していましたが、
    これらに変わるのが、アプリ「Experience Vitals」です。


    今まで通り、フロントエンドのセッションデータをソースとして、リクエストやエラー、インタラクション（クリック、スクロールといったユーザ操作）等のユーザイベント情報と、セッションの開始/終了時刻やデバイス・アクセス拠点といった識別子等のサマリーイベント情報の可視化ができることはもちろんですが、Webサイトの健全性を把握するための指標である「Core Web Vitals」をより簡単に確認できるようになりました。
    今までもメトリクスとしてデータは保持していたため、データの確認やダッシュボード表示したりすることはできたのですが、能動的に確認や設定をする必要がありました。

    これらが、アプリ「Experience Vitals」では、デフォルトでグラフ表示や閾値違反の発生状況確認、異常検知に関するヘルスアラートにも対応し、Webサイトの健全性判断がより簡易的にできるようになりました。

     

    Core Web Vitalsとは？

    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が良い。
    ＜目安＞
    ・良好：2.5秒未満
    ・注意が必要：4秒以下
    ・不良：4秒を超える

    INP

    操作してから反応が現れるまでの「タイムラグ」を図る指標。​
    ユーザーが操作してからシステムが反応する前に生じた遅延を示す指標なので、数字は小さい方がベター。クリックしても反応が現れず、再度クリックしてしまうようなケースは高い数値を示す​​。

    数値はミリ秒で表し、値が小さいほどUXが良い。

    ページ読み込み後のユーザのすべての操作のうち、最も遅かった操作が計測対象となる。
    ＜目安＞
    ページビューの75P（70Pとするケースもある）にて判断する
    ・良好：200ミリ秒未満
    ・注意が必要：500ミリ秒以下
    ・不良：500ミリ秒を超える

    CLS

    「累積レイアウト変更」の意味で、視覚要素の安定性を示す指標。​
    ユーザーが意図せぬレイアウトのずれがどれぐらい発生したかを、独自の「レイアウトシフトスコア」で表す。​​

    数値はスコア（単位なし）で表し、値が小さいほどUXが良い。
    ＜目安＞
    ・良好：0.1未満
    ・注意が必要：0.25以下
    ・不良：​0.25を超える
    ※ページをユーザが利用している間に、「表示中の画面内（ビューポート内）で」「ユーザ操作がないのに」発生したずれを、影響受けた範囲の広さと最大移動距離を基にスコアを算出して合計している​

     

     

    参考URL：

    Google社Web.dev - Web Vitals

     

    アプリ「Experience Vitals」でCore Web Vitalsを確認する

    Experience Vitalsアプリは、Dynatrace SaaSの新UI環境でのみ利用できる機能となります。

    [アプリ] > [Experience Vitals]よりご利用いただけます。

     

    DynatraceTips77-1

    　　　　　　　　　　　　　　　　　　　　　　#77-Experience Vitalsアプリ

     


    アプリを開くと、概要ページが開き、Frontend（全体）、Web。Mobile毎に概要を確認できます。

    表示されている数値は、左からそれぞれ、
    ①モニタリング無効数（Unmonitored）/②不健全な状態数（Unhealthy）/③健全な状態数（Healthy）、を指します。
    　※①②は該当のエンティティがない場合、表示されません

    ②の「不健全な状態」とは、以前はエラー発生やユーザアクション継続時間の遅延、予期せぬ高負荷等が検知対象でしたが、
    Core Web Vitalsの計測結果による「注意が必要/不良」な状態も検知できるようになっています。


    フロントエンドアプリケーション毎に状態を確認する場合は、対象メニュー（[Web]、等）をクリック、もしくはページ最上部の
    [Explorer]をクリックし、詳細ページに遷移します。

     

    尚、Core Web Vitalsをはじめとして、各種データを確認できるDashboardsやNotebooksも提供されており、
    データの確認の仕方もDashboards/Notebooks内に記載されていますので、何をどう見たらいいか‥と迷う場合は、
    ここから確認するも良いかもしれません。

                       DynatraceTips77-2

    　　　　　　　　　　　　　　　　　　　　　　　　#77-Experience Vitals概要ページ

     

    フロントエンドアプリケーション毎の状態を確認できます。
    Health alartsには、「不健全な状態」に関するアラート、ページロード時間やエラー率と合わせて、Core Web Vitalsの各指標の結果を確認することができます。（Core Web Vitalsが表示されていない場合は、[Column hidden]から表示/非表示を調整してください。）

     

    　　　　　DynatraceTips77-3

    　　　　　　　　　　　　　　　　　　　　　　　　#77-Frontends一覧ページ

     

    また、気になるフロントエンドアプリケーションをクリックすると、さらに詳細画面が開きます。
    Web Viatls指標を中心とした各種グラフが用意されており、また上部には各種指標の状態（緑：良好、黄色：注意が必要、赤：不良）が表示されます。右上[Analyze performance]をクリックすると、全画面表示に切り替わります。

     

    　　　　　DynatraceTips77-4

    　　　　　　　　　　　　　　                                  #77-Frontends_詳細ページ①　

    　　　　　DynatraceTips77-6

    　　　　　　　　　　　　　　　　　　　　　        #77-Frontends_詳細ページ②

     

    Experience Vitalsアプリでデータを参照するために必要な設定

    Grailへのセッションデータ取り込みは、以下の設定をご対応ください。

    • 新UI）[アプリ]＞[Settings classic]＞[Web and mobile monitoring]＞[Enablement and cost control]
    • 旧UI）[Settings]＞[Web and mobile monitoring]＞[Enablement and cost control]

    [Enable New Real User Monitoring Experience]を有効化

     

    ※2026年2月現在、RUM Classicを無効化して、New RUM Experienceのみを有効化することはできません。
    　尚、本機能を有効化した場合、New RUM Experienceに基づいたライセンスが消費されます。　    　

    　　　　　DynatraceTips77-7

    　　　　　　　　　　　　　　　　　　　　　 #77-New RUM Monitoring設定


     

    ユーザセッションデータを確認する場合は？

    ユーザセッションデータを確認する場合は、アプリ「Users & Sessions」が提供されていますので、ご利用ください。
    ただし、一部データはアプリ未対応のため、ページ遷移時にClassicページにリダイレクトされますのでご留意ください。

    [アプリ]＞[Users & Sessions]
    DynatraceTips77-8


    まとめ

    Webサイトでは、表示速度や応答性といったフロントエンド側の性能がユーザ体験を大きく左右します。
    Core Web Vitalsを用いることで、Webサイトの状態を継続的に可視化し、問題の早期検知、影響範囲の特定や改善ができ、
    結果として、離脱防止や満足度向上につながり、ビジネス成果の最大化にも寄与します。
    便利になったExperience Vitalsアプリを利用して、まずはWebサイトの状態を可視化してみませんか？

     

    #77 フロントエンドの健全性判断をより簡単に！Experience Vitalsアプリのご紹介については、以上となります。 
    お読みいただきありがとうございました！ 

     

    ※記事執筆時 Dynatrace SaaS Version：1.330

     

     

     

     

     

    コメント一覧

     

    執筆者

    S.N.　

    営業技術本部 カスタマーサクセス統括部 Dynatrace技術サービス部　部長

     

    関連記事