メインコンテンツまでスキップ

Page Performance Monitoring

Page Performance Monitoring画面では、RUM(Real User Monitoring)によって収集された特定のRUM Groupのページ別呼び出し数順位、Core Web Vitals(LCP・INP・CLS)指標、ページロード時間分布、AJAXパフォーマンス指標を1つの画面でリアルタイムに確認できます。

左側メニューでアプリケーション > Page Performance Monitoringを選択してください。

Page Performance Monitoring 全体画面

画面はPage Calls per Second (Top 5)順位、Core Web Vitals(LCP/INP/CLS)、Page Load Time、AJAX Performance Metricの4つの領域で構成されます。画面上部には現在選択されているRUM Group名が表示されます。

左側FiltersパネルのRUM Group項目は、他の画面のように複数の対象をチェックボックスで同時に選択する方式ではなく、default・180helmのように上位カテゴリでまとめられた一覧からラジオボタンでRUM Groupを1つだけ選択する構造です。選択した1つのRUM Groupのデータのみが画面全体に反映されます。

Page Calls per Second順位を確認する​

Page Calls per Second (Top 5)一覧では、選択したRUM Groupで秒間呼び出し数が多いページURLの上位5件を確認できます。

Page Calls per Second 順位

  • 各項目には順位、ページURL、秒間平均呼び出し数が表示されます。
  • 項目をクリックすると、画面右側に該当ページの詳細分析パネルが開きます。

トラフィックが集中しているページを素早く把握し、パフォーマンス点検の優先順位を決める際に役立ちます。

Core Web Vitalsを確認する​

Largest Contentful Paint (LCP)、Interaction to Next Paint (INP)、Cumulative Layout Shift (CLS)の3つのチャートでは、選択したRUM GroupのCore Web Vitals指標の推移をP75(75パーセンタイル)基準で確認できます。

Core Web Vitals チャート

  • LCP: ユーザーがページをリクエストした時点から、最も大きなコンテンツ要素がレンダリングされるまでにかかった時間(秒)です。
  • INP: ユーザーの操作後、次の画面が描画されるまでにかかった時間(ms)です。
  • CLS: ページロード中に発生したレイアウトシフトの累積値です。

各チャート下部のCategory表では、値がPoor(赤)/Needs Improvement(オレンジ)/Good(緑)のどれに該当するかを件数で確認できます。チャートタイトル横の?アイコンにマウスを合わせると、指標の説明と等級基準値を確認できます。

参考

LCP・INP・CLSはGoogle Core Web Vitals基準に従い、Poor/Needs Improvement/Goodの3区分で分類して表示されます。

Page Load Time分布を確認する​

Page Load Time領域では、選択した期間に収集された個別ページロード履歴を時間帯別分布チャートで確認できます。

Page Load Time チャート

  • チャート右上にはTotal(全体件数)、Normal Count(正常処理件数)、Exception Count(例外発生件数)が表示されます。
  • Normal(青い点)は正常に処理されたページロード、Exception(赤い点)は閾値を超過したりエラーが発生したページロードを示します。

右上の[Filter]ボタンをクリックすると、照会条件を詳細に絞り込めます。

Page Load Time Filter ポップアップ

  • Page Information: Page Load Time (s)の範囲を指定したり、Exception Onlyトグルをオンにして例外が発生したページロードのみを表示できます。
  • User Information: User IDを追加したり、Browser、OSを選択して特定のユーザー環境のページロードのみをフィルタリングできます。

特定のユーザーやブラウザ環境でのみ繰り返されるパフォーマンス問題を絞り込んで確認する際に活用します。

チャート上でマウスを使って四角い領域を対角線にドラッグすると、ドラッグした区間だけを拡大した詳細パネルが画面右側に開きます。

Page Load Time ドラッグ詳細パネル

  • Individual Page Load Timeチャートでは、ドラッグで選択した区間のページロード時点と所要時間を点で拡大して確認できます。
  • 下部のPage Listでは、該当区間に含まれる個別ページロード履歴を一覧で確認できます。選択した区間にロード履歴がない場合、一覧は空になります。

短い区間をドラッグして拡大すると、瞬間的に集中したページロードや特定時点の異常パターンを詳細に確認できます。

AJAX Performance Metricを確認する​

AJAX Performance Metric領域では、選択したRUM Groupで発生したAJAXリクエストのパフォーマンス指標を4つのチャートで確認できます。

AJAX Performance Metric チャート

  • Average Calls per Second: 秒間平均AJAX呼び出し数です。
  • Average Response Time: AJAXリクエストの平均応答時間(Response Time)とコールバック処理時間(Callback Time)です。
  • Error Occurrence Rate: 全AJAXリクエストのうちエラーが発生した割合です。Network Error、Request Error (4xx)、Server Error (5xx)の種類別に区分して表示されます。
  • Average Data Transfer Volume: AJAXリクエスト・レスポンスでやり取りした平均データサイズ(Sent/Received)です。

Error Occurrence Rateが継続的に高い区間が見られる場合は、該当ページの詳細分析パネルでAJAX Request Historyタブを確認し、原因となったリクエストを絞り込めます。

ページ詳細情報を確認する​

Page Calls per Second順位一覧でページURLをクリックすると、画面右側に詳細分析パネルが開きます。

Page Performance Monitoring 詳細パネル

このパネルはWeb Application画面のPage Analysisタブでページをクリックしたときに開く詳細パネルと同じです。Page Detail、Load Timeline、Resource Timeline、AJAX Request History、Metricタブの構成と各タブの詳細内容は、該当のドキュメントを参照してください。