WPM ユーザガイド
1. はじめる
IMQA WPMは、Webブラウザアプリケーションの性能データを収集してモニタリングすることができます。https://imqa.io から契約していただき、プロジェクトを作成すると、Webブラウザアプリケーションをモニタリングできるようになります。
1.1. IMQA WPM 紹介
IMQA WPMは、Webサイトユーザーの使用環境、リソースのネットワークリクエスト、コアウェブバイタル、Webサイトの利用時に発生する問題点に対する判断と分析はもちろん、意思決定のための統計やレポートまで、貴社の管理領域のEnd to Endをサポートします。
また、Webの性能低下問題が発生した場合、階層構造の分析により、リソースと環境要素と相関関係まで分析し、即時の対処とデバッグができるようにサポートします。
1.2. 対応環境
IMQAは、以下の環境、ブラウザ、解像度で快適にご利用いただけるよう対応しております。
ブラウザ
IMQA WPMは、SaaS型サービスを提供しております。以下のウェブブラウザ環境で快適にご利用いただけます。
Google Chrome(推奨)
Ver 81.0.4044.92
1920x1080
Mozilla FireFox
Ver 75.0
1920x1080
Internet Explorer
Ver 11.0.180
1920x1080
Safari
Ver 13.1
1920x1080
1.3. ログイン
http://imqa.ioホームページの画面右上メニューにある[今すぐはじめる]をクリックすると、新しいタブにログインページが表示されます。
Eメールアドレスとパスワードを入力して[LOG-IN]をクリックしてください。
パスワードを5回以上間違えると、アカウントがロックされます。アカウントを再び有効化するためには、「パスワード変更」手続きを通してパスワードを初期化する必要があります。
2. プロジェクトリスト
プロジェクトリストで新しいプロジェクトを登録すると、IMQAにWebブラウザアプリケーションを連携させることができます。チーム機能を利用して様々なプロジェクトをまとめて管理したり、ユーザー権限設定など全般的なプロジェクト管理を行うことができます。
2.1. 概要
IMQA WPMは、WebブラウザアプリケーションのメインURLをプロジェクトとして登録することによりサービスを利用することができます。プロジェクトリストは、以下のとおりに構成されています。
❶ 画面上部バー ❷ チームバー ❸ プロジェクトリスト ❹ リストビュー/カードビュー ❺ プロジェクト作成 ❻ プロジェクトカード
画面上部バー
❶ ロゴ クリックすると、プロジェクトリストのメインへ移動します。
❷ 会員メニュー ログインアカウントの会員メニューが表示されます。
インストールガイドInstallation Guide: IMQAのインストールガイドを確認できます。クリックすると、ブラウザの新しいタブに表示されます。
ユーザー設定Settings: ユーザー名とパスワードを変更することができます。ブラウザのタイムゾーンを変更すると、IMQA分析情報の表示基準時間を変更することができます。
言語設定Language Setting: IMQAの表示言語を韓国語、英語、日本語に変更できます。
ログアウトLogout: アカウントをログアウトします。
プロジェクトリスト
❶ リストビュー/カードビュー プロジェクトカードの表示方式を変更することができます。基本はリストビューで表示されます。
リストビューList View: プロジェクトがリストとして表示されます。並び順を変更したり、プロジェクトの要約指標を確認することができます。
カードビューCard View: 管理中のプロジェクトが多い場合、プロジェクトを素早く見つけることができます。
❷ プロジェクト作成 現在の位置にプロジェクトを作成します。
❸ 設定 *チームにのみ表示 [設定] アイコンをクリックすると、チーム管理メニューが表示されます。
❹ ヘッダ(整列) *リストビューにのみ表示 基本はプロジェクト名順に整列され、プラットフォーム、パッケージ名順で並べ替えることもできます。
2.2. チーム
❶ チーム作成 ❷ チームタブ ❸ チーム管理
チーム作成
任意のチーム名を入力してから[SUBMIT]または[提出]ボタンを押すとチームが作成されます。
チームタブ
所属中のすべてのチームを確認でき、チームを選択すると、以下のようにチームに関する設定ページが表示されます。
チーム名を修正したり、チームメンバーをEメールアドレスを利用して招待することができます。
Eメールアドレス追加は、IMQAに会員登録されているユーザーのみを追加できます。
チーム管理
チーム名の修正とチーム削除を行うことができます。チーム削除は、チームだけが削除され、所属中のプロジェクトは削除されませんので、ご安心ください。
2.3. プロジェクト作成
ログイン後にプロジェクト登録を通してIMQAにWebブラウザアプリケーションを連携させることができます。
プロジェクトリスト右上の[+]アイコンをクリックすると、プロジェクトを作成できるポップアップが表示されます。
① IMQA WPMサービスとチームを選択し、プロジェクト名、メインドメインURLを入力します。
プロトコル：WebサイトのメインURLのプロトコルを選択します。httpまたはhttpsを選択できます。
メインドメイン：プロトコルを除くWebサイトのメインドメインを入力してください。(例： imqa.io)
プロジェクト作成後は変更できませんので、ご確認の上、入力してください。URLを間違って入力したために変更が必要な場合は、プロジェクトを削除して再度作成してください。
② 情報作成が完了したら、[プロジェクト作成]をクリックしてください。
③ プロジェクトキーが含まれたインストール用のコードが発行されました。インストール用のコードを WebページのHTML <head> タグに貼り付けてください。インストールガイドを参考にして、収集オプションをインストール用のコードの下に挿入することも可能です。
インストール用のコードをWebブラウザアプリケーションに挿入した後にWebページにアクセスし、プロジェクト一覧ページを更新してください。
プロジェクトカード
作成されたプロジェクト・カードでは、プロジェクト情報とインストールおよび設定に必要な概要を確認し、サービスへ移動することができます。
❶ プラットフォームアイコン プラットフォーム情報がアイコンで表示されます。
❷ プロジェクト情報 プロジェクト名、パッケージ名/URLが表示されます。クリックすると「サービス > ダッシュボード」へ移動します。
❸ サービスアイコン MPM, Crash, WPM, WCrash サービス情報がアイコンで表示されます。クリックすると「サービス > ダッシュボード」へ移動します。
❹ プロジェクト管理 […]アイコンをクリックすると、プロジェクト管理メニューが表示されます。
❺ 要約指標の表示/非表示 [∨]アイコンをクリックすると、要約指標が表示されます。[∧]アイコンをクリックすると、要約指標が非表示になります。
❻ WPMプロジェクトの概要 IMQA WPMのインストールおよび設定に必要な概要を表示します。インストール用のコードを再度コピーすることができ、クロスドメインの設定過程を確認することができます。
2.4. プロジェクト管理
[…]アイコンをクリックすると、プロジェクト管理メニューが表示されます。プロジェクト情報確認および修正・削除、クロスドメインとURLパターンを設定することができます。一部のメニューは、プロジェクト権限ユーザーにのみ表示されます。
❶ プロジェクト情報 プロジェクト情報で作成したプロジェクト情報を確認でき、プロジェクトメンバーを管理することができます。
❷ チーム変更 *プロジェクトマネージャー以上 プロジェクトが所属するチームを変更することができます。チームメンバーとして所属中のチームにのみ変更できます。
❸ クロスドメイン設定 IMQAにおいて分析するメインドメインの他にクロスドメインを設定することができます。サブドメイン(例：m.imqa.io)別途構成されている場合やCORS(オリジン間リソース共有)へのアクセスが必要な場合、許可するオリジンを指定することができます。
❹ URLパターン設定 WebサイトのURLのパターンを探し、好きな形に置き換えてIMQAで収集することができます。URLの数字、識別子(例：流入ID、ユーザーID、検索クエリなど)の置き換え、類似したページを意味のある集計単位にグループ化することができます。
❺ プロジェクト名修正 *プロジェクトマネージャー以上 プロジェクト名を変更することができます。
❻ プロジェクト削除 *プロジェクト作成者以上 プロジェクトを削除することができます。
プロジェクトを削除すると、既存のデータはすべて削除されます。必ず削除前に確認してから、削除を実行してください。
プロジェクト情報
プロジェクト情報で作成したプロジェクト情報を確認でき、プロジェクトメンバーを管理することができます。
❶ プロジェクトメンバーのEメールアドレス プロジェクトメンバーユーザーのEメールアドレスが表示されます。プロジェクトを作成したユーザーは、最上部に表示されます。
❷ プロジェクト権限 プロジェクトの権限がアイコンで表示されます。プロジェクト閲覧と管理役割が表示されます。
Owner
Ⓞ
O
O
O
O
Manager
Ⓜ
O
O
X
X
Member
O
X
X
X
プロジェクト作成者Owner: プロジェクトを作成した1つのユーザーアカウントに与えられ、全般的なプロジェクト管理権限が付与されます。
プロジェクトマネージャーManager: プロジェクトのメンバー追加と自分以外の下位権限ユーザーの削除を実行することができます。
プロジェクトメンバーMember: プロジェクトを閲覧することができます。
❸ プロジェクトメンバーの権限変更 *プロジェクト作成者以上 / メンバー削除 *プロジェクトマネージャー以上 ① Eメールアドレスの横にある[Ⓜ]アイコンをクリックすると、プロジェクトマネージャーとして追加することができます。 ② [Ⓜ]アイコンをもう一度クリックすると、プロジェクトマネージャーから削除されます。 ③ Eメールアドレスの横にある[-]アイコンをクリックすると、当該ユーザーはプロジェクトから削除されます。
❹ プロジェクトメンバーの追加 *プロジェクトマネージャー以上 ① Eメールアドレスの下にある [Add Project Member]をクリックすると、現在プロジェクトメンバーではないチームメンバーと「Eメールアドレス追加」エリアが表示されます。 ② プロジェクトメンバーではないチームメンバーのEメールアドレスの横にある[+]アイコンをクリックすると、プロジェクトメンバーとして追加されます。
❺ Eメールアドレス追加 *プロジェクトマネージャー以上 Eメールアドレスを入力して[+]アイコンをクリックすると、プロジェクトメンバーとして追加されます。
Eメールアドレス追加は、IMQAに会員登録されているユーザーのみを追加できます。
クロスドメイン設定
IMQAにおいて分析するメインドメインの他にクロスドメインを設定することができます。サブドメイン(例：m.imqa.io)別途構成されている場合やCORS(オリジン間リソース共有)へのアクセスが必要な場合、許可するオリジンを指定することができます。
① IMQA WPMプロジェクトの [···] アイコンをクリックすると、プロジェクト管理メニューを表示します。
② [クロスドメイン設定]をクリックします。
③ 基本プロジェクトを作成するときに入力したメインドメインのURLが設定されており、Webサイトの構成により、サブドメインまたはオリジン間リソース共有へのアクセスを許可するオリジンを入力します。
許可ドメインの設定例)
許可ドメインのURLへのアクセスを許可するドメイン一覧を指定します。(例： http://localhost:8080)
1行で区切って入力することができ、プロトコルおよびポート番号、大文字と小文字を区別し、*文字を含めることはできません。
④ 許可されたドメイン一覧を入力し、[保存]をクリックします。
⑤ 入力した許可されたドメイン一覧からデータをリアルタイムで収集するように設定されており、IMQAにおいて確認することができます。
URLパターン設定
WebサイトのURLのパターンを探し、好きな形に置き換えてIMQAで収集することができます。URLの数字、識別子(例：流入ID、ユーザーID、検索クエリなど)の置き換え、類似したページを意味のある集計単位にグループ化することができます。
IMQA WPMは基本的にユーザーが接続した原始URLデータを収集します。ユーザーがWebサイトを利用するとき、複数の識別子、検索クエリなどでURLが断片化される可能性が高いページの場合、URLパターン設定により有意義な集計/分析の単位を定義することを推奨します。
❶ URLパターン WebサイトのURLのパスまたはクエリパラメータにおいて、任意の形に置き換えるパターンを入力します。パスとクエリパラメータの単位を入力することができます。優先順位が高いURLパターンから適用され、クエリパラメータは「key=value」の形で入力する必要があります。 ① WebサイトのURLの構成により、パスまたはクエリパラメータにおいて束ねたい単位に変数{group}を含めて入力します。 ② WebサイトのURLの構成により、パスまたはクエリパラメータにおいて解きたい単位に変数{value}を含めて入力します。 ③ URLパターンを入力し、[+]アイコンをクリックします。
URLパターン設定例 1)
「商品詳細ページのURLである「products」パスの後の数字を束ねて一つのページで集計/分析したいです。クエリパラメータは詳しく区別しなくても大丈夫です。」
① 特定の「パス」に適用するURLパターンを変数{group}を含めて入力します。 ② 設定時点から収集されるURLをご希望の形に置き換えてIMQAにおいて「ページ」単位で確認することができます。
URLパターン設定例 2) 「メインページに流入されるタイプを区別したいです。URLのクエリパラメータに付く外部からの流入ID「fbclid」、「NaPm」、「gclid」は表示し、値は詳しく区別しなくても大丈夫です。」
① 特定の「パス」と「クエリパラメータ」に適用するURLパターンを変数{group}を含めて入力します。 ② 設定時点から収集されるURLをご希望の形に置き換えてIMQAにおいて「ページ」単位で確認することができます。
URLパターン設定例 3)
「ベスト商品の一覧ページから各カテゴリータイプを区別したいです。「best」パスのURLクエリパラメータに付くカテゴリーID「category_id」と値を区別し、他のクエリパラメータは詳しく区別しなくても大丈夫です。」
① 特定の「パス」と「クエリパラメータ」に適用するURLのパターンを、変数{value}を含めて入力します。 ② 設定時点から収集されるURLをご希望の形に置き換えてIMQAにおいて「ページ」単位で確認することができます。
❷ 優先順位 URLパターンを適用する順番を表示します。優先順位の高いURLパターンから適用され、順番を変更することができます。
優先順位の設定例)
「商品詳細ページのURLである「products」パスの次の数字を束ねるパターンを適用していますが、メイン～商品詳細ページに移動するタイプの内部からの流入ID「flow」と外部からの流入ID「fbclid」でアクセスする場合を追加で区別したいです。」
① 優先順位が高い「パス」に適用されるURLパターンが優先的に適用されます。 ② 特定の「パス」と「クエリパラメータ」に適用するURLパターンの優先順位を高く変更します。
③ 設定した後、「クエリパラメータ」に適用されるURLパターンが優先的に適用され、ご希望の形に置き換えられます。
❸ URLパターン プロジェクトに設定されたすべてのURLパターンを一覧で表示します。
❹ 優先順位の変更 マウスドラッグでURLパターンを適用する順を設定することができます。
❺ 削除 追加したURLパターンを削除します。削除した場合、そのURLパターン項目が削除され、その後はURLパターンが適用されません。適用するURLパターンと優先順位の設定が終わると、[保存]をクリックします。設定時点から収集されるURLをご希望の形に置き換えてIMQAにおいて「ページ」単位で確認することができます。
3. ダッシュボード
IMQA WPMのダッシュボードは、様々な性能指標の構成を提供します。IMQA WPMの性能ダッシュボードは、Webブラウザのアプリケーションの性能をリアルタイムで把握することができます。Webサイトの概要と主な性能の状況、コアウェブバイタルの指標を時系列データで確認することができ、ユーザーが訪問したページに関する性能を総合して確認することができます。
3.1. 概要
IMQA MPM ダッシュボードは、以下のとおりに構成されています。
❶ 画面上部バー(共通) ❷ ツールバー (ダッシュボード) ❸ Webサイト要約情報 ❹ 性能問題発生率 ❺ 時系列性能情報 ❻ ページ別性能状況 ❼ 性能下位リスト ❽ 最近発生通知
画面上部バー(共通)
❶ ロゴ クリックすると、プロジェクトリストのメインへ移動します。
❷ WPMメニュー クリックすると、各WPMメニューページへ移動します。
❸ モード変更アイコン 「ダッシュボード」ページで画面テーマを変更できます。クリックすると、画面テーマを「Lightモード」または「Darkモード」に変更できます。
❹ WCrashアイコン プロジェクト作成時にWCrashサービスを作成した場合に表示され、クリックすると同アプリの「WCrash > ダッシュボード」ページへ移動します。
❺ プロジェクトナビゲーション 現在いるプロジェクトから別のプロジェクトへ移動することができます。[ホーム]アイコンをクリックするとプロジェクトリストへ移動し、プロジェクトを変更すると当該アプリの「サービス > ダッシュボード」へ移動します。
❻ 会員メニュー ログインアカウントの会員メニューが表示されます。
IMQAガイドDocument: IMQAのインストールガイドを確認することができます。クリックすると、ブラウザの新しいタブに表示されます。
ユーザー設定Settings: ユーザー名とパスワードを変更することができます。ブラウザのタイムゾーンを変更すると、IMQA分析情報の表示基準時間を変更することができます。
言語設定Language Setting: IMQAの表示言語を「韓国語」または「英語」、「日本語」に変更できます。
ログアウトLog Out: アカウントをログアウトします。
3.2. ツールバー (ダッシュボード)
❶ ダッシュボード 情報 現在ダッシュボード View モードを表示しています。
❷ プロジェクト情報 プロジェクトのプラットフォームアイコンとプロジェクト名を表示します。
3.3. Webサイト要約情報
Webサイトの今日のユーザー数、訪問数、直近30分の平均問題発生率を確認・比較することができます。
今日利用者数/今日訪問数
今日の日付00時から現在の時間までのユーザー数、訪問数を確認することができます。
今日利用者数Today User: 今日のユーザー数がカウントされます。重複を除いたユニークユーザーを意味します。
今日訪問数Today Session Count: 今日のWebサイトに接続した数をカウントします。ユーザーがWebサイトに接続し、開始したセッションの数を意味します。오늘 이용자 수/방문 수
利用者数
今日の日付00時~現在の時間
ユーザー数
カウント
訪問数
今日の日付00時~現在の時間
セッション数
カウント
速やかに把握できるよう、1,000単位は「1K」と要約して表示されます。実際のデータは、「K」で要約表示された数字にカーソルを重ねると表示されるツールチップで確認することができます。
問題発生率平均/性能天気
最近30分間の問題発生率平均と性能天気指標を確認することができます。
問題発生率平均 30m: 最近30分間の各性能指標(ページロード時間、レスポンスタイム、クラッシュ)の基準値を超えるデータの比率である問題発生率の平均を算出します。
性能天気 30m: 最近30分間の問題発生率平均によって5段階の天気アイコンが表示されます。
問題発生率平均
直近30分基準
問題発生率
性能問題発生率
(基準値以上のデータ / 全データ)*100
性能天気
直近30分基準
問題発生率平均
~20%, 5段階
3.4. 総合性能状況
直近の30分間のページロード時間、レスポンスタイム、クラッシュの3つの性能指標の問題発生率がグラフで表示されます。「総合性能状況」は、1分毎に更新されます。
問題発生率 30m : 最近30分間の性能指標別の問題発生率を算出します。
クラッシュ
直近の30分
問題発生率
クラッシュ発生数 / 訪問数
レスポンスタイム
直近の30分
問題発生率
(基準値以上のデータ / 全データ)*100
ページロード時間
直近の30分
問題発生率
(基準値以上のデータ / 全データ)*100
3.5. 時系列性能情報
直近30分間ユーザー数、訪問数、クラッシュ発生数とページロード時間、レスポンスタイムの性能指標の下位5%の平均とすべての平均を時系列グラフで表示します。コアウェブバイタルの指標は、直近30分間の平均と最も性能が低下した時点の数値を表示します。性能が低下した区間や性能の変動推移を把握することができます。時系列性能情報は、1分毎に更新されます。
現在の利用者数&訪問数
最近30分間のユーザー数、訪問数を1分ごとに確認して比較することができます。「現在の利用者数&訪問数」は1分毎に更新されます。
利用者数: 最近30分間のユーザー数を1分ごとにカウントします。重複を除いたユニークユーザーを意味します。
訪問数: 最近30分間のWebサイトに接続した数をカウントします。ユーザーがWebサイトに接続し、開始したセッションの数を意味します。
クラッシュ
直近の30分間のWebクラッシュ発生数を1分間隔で確認することができます。「クラッシュ」は1分毎に更新されます。
クラッシュCrash: 直近の30分間のWebクラッシュ発生数が1分間隔でカウントされます。
ページロード時間
直近30分間個別ページまたはSPA方式で実装されたWebブラウザのアプリケーションで測定されたページのロード時間を1分おきに確認・比較することができます。下位5%の平均と全体平均が表示され、「ページロード時間」は1分毎に更新されます。
下位5%P95: 直近の30分間の下位5%のページロード時間が平均として算出されます。
平均Avg: 直近の30分間の全体ページロード時間が平均として算出されます。
下位5%
直近の30分
ページロード時間
下位5%平均
ms
平均
直近の30分
ページロード時間
全体平均
ms
グラフに記された横線は性能基準値です。これを通して基準値以上の性能問題があった時間と値を容易に確認することができます。
レスポンスタイム
直近の30分間のレスポンスタイムを1分間隔で確認することができます。下位5%と全体平均が表示され、「レスポンスタイム」は1分毎に更新されます。
下位5%P95: 直近の30分間の下位5%のレスポンスタイムが平均として算出されます。
平均Avg: 直近の30分間の全体レスポンスタイムが平均として算出されます。
下位5%
直近の30分
レスポンスタイム
下位5%平均
ms
平均
直近の30分
レスポンスタイム
全体平均
ms
グラフに記された横線は性能基準値です。これを通して基準値以上の性能問題が発生した時間と値を容易に確認することができます。
コアウェブバイタル
直近30分間のWebブラウザのアプリケーションで測定されたコアウェブバイタルの性能指標LCP、FID、CLSの30分の平均と最大値を確認することができます。すべての平均と1分の平均の最大値を表示し、「Core Web Vitals」は1分おきに更新します。
コアウェブバイタルは、以下のとおりに構成されています。
❶ デバイスフィルタ 直近30分間収集されたコアウェブバイタル指標をユーザー環境を基準に分析することができます。基本的に「すべて」と設定されており、「Desktop」または「Mobile」でフィルタリングすることができます。基準を変更する際、次の平均と1分の最大値を更新します。
❷ 平均 30m 直近30分間収集されたコアウェブバイタルの各指標の数値を平均で算出します。Googleによる評価のガイドラインでは、各区間を色で表示します。
❸ 1分の最大値 直近30分間収集されたコアウェブバイタルの各指標の数値のうち、最も性能が低下した時点の数値を表示します。Googleによる評価のガイドラインでは、各区間を色で表示します。
LCP
2,500ms 未満
2,500ms 以上 4,000ms 以下
4,000ms 超過
FID
100ms 未満
100ms 以上 300ms 以下
300ms 超過
CLS
0.1 未満
0.1 以上 0.25 以下
0.25 超過
3.6. ページ別性能状況
直近の30分間にユーザーがアクセスしたページ別の性能状況を確認することができます。ページ別のユーザーアクセス率、各性能の問題発生率、下位5%と平均値をモニタリングすることができます。「ページ別性能状況」は1分毎に更新されます。
ページ別性能状況は、以下のとおりに構成されています。
❶ 性能指標 「ページロード時間」「レスポンスタイム」に性能指標を変更することができます。指標を変更すると、下に表示される「画面カード」に下位5%と平均値が更新されます。
❷ 画面のカードソーティング 基本的に「訪問率順」に設定されており、「訪問率順」、「問題発生率順」、「下位5%順」、「平均順」にソートすることができます。数値が高い順にソートします。
❸ 概要 直近30分間、ユーザーが訪問したページ別の問題発生率を要約テキストの形で素早く確認することができます。
❹ 画面カード 直近の30分間にユーザーがアクセスしたページ別のアクセス率、問題発生率、下位5%と平均値を確認することができます。
総合ページ性能表
直近の30分間にユーザーがアクセスしたページ別の各性能の問題発生率を速やかに確認することができます。右側にある[総合ページ性能表]をクリックすると、ポップアップが表示されます。
ページはアクセス率の高い順に整列され、「管理 > プロジェクトプリセット」で設定した基準値を超えるデータの比率が問題発生率で表示され、問題発生率によって危険度カラーで表しています。
画面カード
直近の30分間にユーザーがアクセスしたページ別のアクセス率、問題発生率、性能指標別の下位5%と平均値を確認することができます。選択したソート基準に従ってページがソートされ、画面カードをクリックすると、「ページ分析」ページへ移動します。
❶ ページ情報 収集されたページの情報を表示します。URLパターンの設定によりパターンが適用された単位で表示されます。長いページ情報はマウスポインターを動かすと表示されるツールチップにより確認することができます。
❷ 画面の名前 ページの名前が表示されます。名前が長い場合は、カーソルを重ねると表示されるツールチップで確認することができます。画面の名前は、理解しやすいようIMQAで表示する名前に変更でき、「管理 > 画面管理」で変更することができます。
❸ アクセス率/性能情報 直近の30分間に特定のページをアクセスした比率と性能基準によって下位5%と平均値が表示されます。
3.7. 性能下位リスト
クラッシュ上位6
直近の30分間に最も多く発生したWebクラッシュ6つが表示されます。クラッシュ数の高い順に整列され、クラッシュの名前が長い場合は、カーソルを重ねると表示されるツールチップで確認することができます。「上位クラッシュ」は、1分毎に更新されます。
クラッシュ名: エラー名が表示されます。項目をクリックすると、そのクラッシュの「エラー詳細」ページへ移動することができます。
クラッシュ数 30m: 当該エラーの30分間の発生累積回数がカウントされます。
比率 30m: 30分間に発生したエラーのうち当該エラーが占める比率が表示されます。
レスポンスタイム下位6URL
直近の30分間に最もレスポンスタイムが遅かった6つのURLが表示されます。レスポンスタイムが高い順に整列され、URLが長い場合は、カーソルを重ねると表示されるツールチップで確認することができます。「上位ネットワークレスポンス」は1分毎に更新されます。
URL: リクエストされたURLが表示されます。
リクエスト数Number of calls: 当該URLの30分間のリクエスト累積回数がカウントされます。
レスポンスタイム: 当該URLのレスポンスタイムが表示されます。
3.8. 最近発生通知
直近の30分間に発生した基準値以上の問題についての通知が表示されます。通知は「通知 > 通知ポリシーリスト」で設定することができます。最近発生した通知順に整列され、「[ポリシー名]の「性能指標」値が「危険度」です。」と表示されます。「最近発生通知」は1分毎に更新されます。
4. ページ分析
IMQA WPMページ分析は、各ページの性能を30分単位で詳しく確認することができます。ページビュー数、平均の性能などのユーザーに関する情報と、各性能指標に関するヒートマップにより性能の分布や低下状況を詳しく分析することができます。さらに、特定ページを基準に収集されたコアウェブバイタルの評価の数値を確認し、低下の要因を分析することができます。
4.1. 概要
「ページ分析」メニューや「ダッシュボード」などにおいて特定画面のカードをクリックすると移動することができ、IMQA WPMページの性能分析は次のように構成されます。
❶ ページ/分析時間 ❷ ページ性能情報 ❸ ページビュー数 ❹ コアウェブバイタル ❺ 性能ヒートマップ ❻ ウェブバイタル
4.2. ページ/分析時間
分析したいページと分析日や時間を変更することができます。変更すると、ページ性能分析情報が選択した基準で更新されます。基本設定は「ダッシュボード」でクリックした「ページ」「今日の日付」「現在の時間帯」に設定されており。
❶ 分析日 基本設定は「今日の日付」で設定されており、[<] [>]をクリックすると、分析日を変更することができます。最大30日前まで選択することができます。
❷ 選択した時間帯 選択した時間帯が表示されます。別の時間帯に変更することもできます。
❸ 現在の時間帯 「現在の時間」が含まれた時間帯が表示されます。
❸ 凡例 各時間帯ごとに集計されたデータ数によって、タイムラインのカラー濃度が4段階で表示されます。
4.3. ページ性能情報
30分間のページロード時間、レスポンスタイムの性能指標の下位5%平均と全体平均が表示されます。
4.4. ページビュー数
30分間のページビュー数を確認できます。
ページビュー数: 30分間の当該ページのアクセス数がカウントされます。
4.5. コアウェブバイタル
30分間特定ページにおいて収集されたコアウェブバイタルの性能指標LCP、FID、CLSの30分の平均と評価の各区間の割合を確認することができます。
コアウェブバイタルは、以下のとおりに構成されています。
❶ デバイスフィルタ 30分特定ページにおいて収集されたコアウェブバイタル指標をユーザー環境を基準に分析することができます。基本的に「すべて」と設定されており、「Desktop」または「Mobile」でフィルタリングすることができます。基準を変更する際、次の平均と評価の各区間の割合を更新します。
❷ 平均 30m 30分特定ページにおいて収集されたコアウェブバイタルの各指標の数値を平均で算出します。Googleによる評価のガイドラインでは、各区間を色で表示します。
❸ 評価の各区間の割合 30分特定ページにおいて収集されたコアウェブバイタルの各指標の数値をGoogleによるガイドラインの評価区間である良好、改善が必要、不良の評価区間別にカウントします。
LCP
2,500ms 未満
2,500ms 以上 4,000ms 以下
4,000ms 超過
FID
100ms 未満
100ms 以上 300ms 以下
300ms 超過
CLS
0.1 未満
0.1 以上 0.25 以下
0.25 超過
4.6. 性能ヒートマップ
各性能指標に対するヒートマップを通して、性能分布と性能低下状況を詳細に分析することができます。
ページロード時間
30分間個別ページまたはSPA方式で実装されたWebブラウザのアプリケーションで測定されたページのロード時間を確認することができます。Webページを基準にヒートマップが表示されます。セルにカーソルを重ねると、「分析日 | 分析時間 | データ数 | 性能区間」のツールチップが表示されます。ヒートマップエリアで特定のセルをクリックしたり、マウスドラッグで区間を選択すると、「ページロード時間分析」のポップアップが表示されます。
ページロード時間: 当該HTMLページがonloadイベントを発生する時点またはDOMの変更によるロード時間を区間で算出します。
凡例: 基準値以上の区間は赤、未満は青で表示され、同じ時間の軸に集計されたデータ比率によってカラー濃度は3段階で表示されます。
レスポンスタイム
30分間に当該ページでリクエストしたHTTPレスポンスタイムを確認することができます。セルにカーソルを重ねると、「分析日 | 分析時間 | データ数 | 性能区間」がツールチップに表示されます。ヒートマップエリアで特定のセルをクリックしたり、マウスドラッグで区間を選択すると、「レスポンスタイム詳細」ポップアップが表示されます。
レスポンスタイム: HTTPレスポンスタイムが区間で算出されます。
凡例: 収集されたHTTP情報でレスポンスコードが4xx番台・5xx番台の場合は赤、その他のレスポンスコードは青で表示され、同じ時間の軸に集計されたデータ比率によってカラー濃度が3段階で表示されます。
4.7. ウェブバイタル
ウェブバイタルの各指標の性能分布とウェブバイタルの数値に影響を与える多様な関連情報をいっしょに確認することができます。これによりウェブバイタルの評価に最も影響力の高い要因を分析、評価・改善することができます。
LCP 分布 / LCP 関連情報
LCP 分布グラフ 30分間の特定ページにおいて収集されたLCPのデータ分布をヒストグラムで表示します。ヒストグラムは、階級を横軸に、度数を縦軸に表示しますが、集計されたデータをいくつかの区間を決めて階級を作り、各階級に属するデータの数で度数を表示します。ヒストグラムは、すべての集団における分布状況を把握し、または比較するときに便利です。Googleによる評価のガイドラインでは、各区間を色で表示します。
LCP
2,500ms 未満
2,500ms 以上 4,000ms 以下
4,000ms 超過
収集されたデータ数
LCP 関連情報
30分間特定ページにおいて収集されたLCPの数値に影響を及ぼす様々な関連情報をいっしょに確認することができます。これによりLCPの評価に最も影響力の高い要因を分析、評価・改善することができます。
Element: 最大のコンテンツ要素であるdocument objectの情報と割合を表示します。
Screen Resolution: 当該ページを閲覧したユーザーの画面の解像度情報と割合を表示します。
FID 分布 / FID 関連情報
FID 分布グラフ 30分間の特定ページにおいて収集されたFIDのデータ分布をヒストグラムで表示します。ヒストグラムは、階級を横軸に、度数を縦軸に表示しますが、集計されたデータをいくつかの区間を決めて階級を作り、各階級に属するデータの数で度数を表示します。ヒストグラムは、すべての集団における分布状況を把握し、または比較するときに便利です。Googleによる評価のガイドラインでは、各区間を色で表示します。
FID
100ms 未満
100ms 以上 300ms 以下
300ms 超過
収集されたデータ数
FID 関連情報
30分間特定ページにおいて収集されたFIDの数値に影響を及ぼす様々な関連情報をいっしょに確認することができます。これによりFIDの評価に最も影響力の高い要因を分析、評価・改善することができます。
Event: 最初にインタラクティブ性が発生したときのイベントを表示します。
Screen Resolution: 当該ページを閲覧したユーザーの画面の解像度情報と割合を表示します。
CLS 分布 / CLS 関連情報
CLS 分布グラフ 30分間の特定ページにおいて収集されたCLSのデータ分布をヒストグラムで表示します。ヒストグラムは、階級を横軸に、度数を縦軸に表示しますが、集計されたデータをいくつかの区間を決めて階級を作り、各階級に属するデータの数で度数を表示します。ヒストグラムは、すべての集団における分布状況を把握し、または比較するときに便利です。Googleによる評価のガイドラインでは、各区間を色で表示します。
CLS
0.1 未満
0.1 以上 0.25 以下
0.25 超過
収集されたデータ数
CLS 関連情報
30分間特定ページにおいて収集されたCLSの数値に影響を及ぼす様々な関連情報をいっしょに確認することができます。これによりCLSの評価に最も影響力の高い要因を分析、評価・改善することができます。
Element: レイアウトの切り替えが発生したときに移動したobject情報と割合を表示します。
Screen Resolution: 当該ページを閲覧したユーザーの画面の解像度情報と割合を表示します。
5. 性能詳細分析
IMQA WPM性能詳細分析は、「ページ分析」「区間分析」ページの性能ヒートマップを通して確認できる機能です。性能ヒートマップで特定のセルを選択したり、マウスドラッグで区間を選択すると表示されます。性能詳細分析では、ページロード時間分析、詳細レスポンス分析を実行できます。これを通して、性能の問題点または問題となる区間を把握することができます。また、ユーザーの行動分析機能により性能問題が発見されたWebサイトのユーザーがどのような移動パスで利用したか、すべての行動フローを確認することができます。
5.1. ページロード時間詳細
HTMLページがonloadイベントを発生する時点またはSPA方式で実装されたWebブラウザのアプリケーションで測定されたページのロード時間を確認することができます。までのデータを収集します。CSS、Javascript、Imageなどのリソースをリクエストするときにかかる時間、FP、FCP、DCLなどのタイミング情報、LCP、LS、FIDのウェブバイタル性能指標も表示されます。そのため、ユーザーはウェブページのload時点までどのような外部リクエストがあったのかを把握でき、ページをロードすると遅くなるボトルネック区間を正確に判断することができます。
デバイス情報リスト
「ページ分析」「区間分析」性能ヒートマップで選択したエリアのデバイス情報です。ページ、デバイス、OS、ブラウザ、ブラウザバージョン、ページロード時間、ユーザー数についての情報がリスト形式で表示されます。詳細分析に入ると、まず最初に最上部にあるデバイス情報が下のタイムラインに表現されています。他のタイムラインを確認したい場合は、他のデバイス情報を選択すると確認することができます。同一条件でグルーピングされたデバイスの場合、最も遅い数値のユーザー パフォーマンス情報を照会します。
ページ: 選択した時間帯と区間のページを表示します。
デバイス: ユーザーが接続したOSにより、「Desktop」と「Mobile」に分類して表示されます。
OS: ユーザーが接続しているOSを表示します。
ブラウザ/バージョン: ユーザーが接続したブラウザとバージョンを表示します。
ページロード時間(ms)ユーザーによるページのロード時間を表示します。同じ条件でグループ化された項目の場合、平均で算出します。
ユーザー数: 当該件数を表示します。同じ条件で集計されたデータ数を意味します。
ユーザーの行動分析
デバイス情報一覧から選んだデバイスのユーザーが、 どのようなWebサイトを利用したか、連携して追跡・照会することができます。性能低下があったデバイスの性能情報を確認し、性能低下現象の発生前後の原因を分析することができます。[ユーザー行動分析]ボタンをクリックすると、そのデバイスユーザーのセッションの開始～セッションの終了までの画面フローを「行動分析」ページから確認することができます。
要約情報
選択したデバイスユーザーのDocumentにおける平均のネットワーク/サーバー/DOM/ロード時間を要約・表示します。コアウェブバイタルの指標であるLCP/FID/LSが発生した場合、数値情報をKPIで表示します。Googleによる評価のガイドラインでは、各区間を色で表示します。
性能プロファイリング
性能解析により選択したデバイスユーザーのWebページのロード中、CSS、Javascript、Imageなどのリソースをリクエストにかかるネットワーク時間とFMP、FCP、DCL、LCP、FID、LSなどウェブバイタルのタイミング情報をいっしょに確認することができます。
性能プロファイリング - ツールバー
ツールバーでは、性能解析機能のガイドを見たり、ネットワーク項目のキーワード検索とリソースタイプでフィルタリングすることができます。
❶ 機能ガイドを見る 性能解析のコア機能を確認することができます。クリックすると、機能ガイドのポップアップを表示します。
❷ 検索 ネットワークセクションに表示されるリソース項目をキーワード検索でフィルタリングすることができます。
❸ リソースタイプのフィルタリング ネットワークセクションに表示されるリソース項目をタイプ別にフィルタリングすることができます。
すべて:基本的に「すべて」と設定されており、すべてのタイプのリソース項目を表示します。
HTML: リソースタイプが「document」の項目を表示します。
CSS: リソースタイプが「css」などの項目を表示します。
Media: リソースタイプが「img」、「video」、「media」などの項目を表示します。
JS: リソースタイプが「script」の項目を表示します。
Others: その他のリソースタイプ項目を表示します。
性能プロファイリング - オーバービュー/ナビゲーション
オーバービュー/ナビゲーションセクションでは、Webページのロードまでのネットワーク、スクリプトの過程でのボトルネックを一覧形式で確認することができます。ボトルネック区間を確認し、オーバービュー領域をドラッグして当該区間を選択することで詳しく見たり、左右のマウス操作で区間を素早く探索することができます。
① オーバービューは基本的に全体区間で設定されており、リソースのリクエストと応答、スクリプトの過程で収集された要素が同じ色で表示されます。同じ時間軸に重なった要素が多ければ多いほど、グラフは高く表示されます。
② 性能解析領域において目立つ区間があれば、オーバービュー領域をドラッグし、その区間を詳しく確認することができます。
性能プロファイリング - タイミング/ウェブバイタル
Webページのロード中に収集されたタイミング情報とウェブバイタルの性能指標を確認することができます。コアウェブバイタルの場合、関連情報をいっしょに表示します。収集するタイミング情報は次の通りです。オーバービュー領域の下に表示されたマーカーにより確認することができます。
FP
First Paint
FPはブラウザが探索前に画面にあったものと視覚的に異なるものでも、最初のビットをレンダリングするときの地点です。
FCP
First Contentful Paint
FCPは最初のコンテンツ(テキスト、画像など)がレンダリング完了時点です。
DCL
Dom Content Loaded
DCLイベントは、最初のHTML文書が完全にロード及びパーキングされた時に発生し、スタイルシートやイメージ及びサブフレームロードが終わるのを待ちません。
LOAD
Onload
onloadイベントは、最初のHTML文書や画像などのコンテンツが、完全にロードが完了する時点です。
収集するウェブバイタル情報は以下の通りです。オーバービュー領域の下に表示されたマーカーにより確認することができます。
LCP
Largest Contentful Paint
LCPはページのロード中、ユーザーのビューポートにおいて最も大きなコンテンツ要素が表示される時点です。
FID
First Input Delay
FIDはページのロード中、ユーザーがページとはじめてインタラクティブ性が発生したイベントの処理時点です。
LS
Layout Shift
LSはページのロード中、予想外のレイアウトの切り替えが起きた時点です。
ウェブバイタルの性能指標の場合、ウェブバイタルの数値に影響を及ぼす様々な関連情報をいっしょに確認することができます。これによりウェブバイタルの評価に最も影響力の高い要因を分析、評価・改善することができます。
LCP Element: 最大のコンテンツ要素であるdocument objectを表示します。
FID Event: 最初にインタラクティブ性が発生したときのイベントを表示します。
FID Delay: 最初にインタラクティブ性が発生したときのイベントを表示します。
LS Element: レイアウトの切り替えが発生したときに移動したobjectを表示します。
LS Score: レイアウトの切り替えのとき、移動したobjectの移動点数を表示します。
Viewport: 当該ユーザーのビューポートサイズを表示します。
<meta>: 当該ユーザーが読み込んだdocumentのheadタグの中のmeta viewportタイプの値を表示します。
性能プロファイリング - ネットワーク
HTML Documentそのものと各リソースのリクエストと応答にかかった時間をWaterfallチャートで確認することができます。 DocumentのすべてのDOMが描かれ、ロードされる過程において確認できる情報は、次の通りです。Document requestの要素にマウスポインターを動かすと表示されるツールチップにより確認することができます。
Request Type: リソースタイプを表示します。
Request URL: 当該ユーザーがアクセスした原始URL情報を表示します。
各区間の性能情報:
◻︎
待機 (Wait)
リクエスト前の待ち時間
◼︎
ネットワーク
ネットワーク探索および接続時間
◼︎
サーバー
サーバーから要請を処理した時間
◼︎
DOM
HTML解析およびDOM構築時間
◼︎
ローディング
表示されるローディング時間
◼︎
コンテンツダウンロード
画面が描かれる時間
各リソースについて確認できる情報は以下のとおりです。 各リソースタイムラインにマウスポインタを上げると表示されるツールチップで確認できます。
Request Type: リソースタイプを表示します。
Request URL: リソースのリクエストのURL情報を表示します。
各区間の性能情報:
◻︎
Waiting
リクエストの前に待機する時間
︎◼︎
Redirect
HTTP リダイレクトの実行時間
◼︎
Fetch
リクエストの前に待機する時間またはキャッシュ照会時間
◼︎
DomainLookup
ドメインに該当するIPをDNSにおいて検索する時間
◼︎
Connect
サーバー接続にかかった時間
◼︎
Request sent
サーバーにリソースをリクエストする時間
◼︎
Response
サーバーの応答時間
性能プロファイリング - スクリプト実行
ページのロード中、ダイナミックレンダリングする要素のスクリプト実行時間を測定することができます。レンダリング過程で実行される関数を定義し、スクリプトの実行にかかった時間をFlameGraphで確認することができます。
5.2. レスポンスタイム詳細
IMQA WPM は、HTTPレスポンスタイムとレスポンスコードを収集するため、クライアントからのHTTPリクエストを分析することができます。
ブラウザで収集されたHTTP情報はms単位で収集され、HTTPヘッダ情報とレスポンスコードが表示されます。これを利用して、特定のURLで発生するレスポンスタイム分析、エラーコードが発生するURLなどを把握することができます。
クライアントが収集するHTTP関連情報は以下のとおりです。
メソッド
HTTP Method (GET, POST, UPDATE, PUT, DELETE 등)
ホスト
ドメイン情報
状態
HTTPレスポンスコード
ルート
リクエストURL
レスポンスタイム
HTTPリクエストに対するレスポンスタイム
6. トレースバック行動分析
IMQA WPM行動分析のトレースバックは、「性能詳細分析」ポップアップで選択したデバイスのユーザーが、どのような流れでWebサイトを利用したかを連携して追跡・照会することができます。性能低下があったデバイスの性能情報を確認し、性能低下現象の発生前後の原因を分析することができます。[ユーザー行動分析]ボタンをクリックすると、そのデバイスユーザーのセッションの開始～セッションの終了までの画面フローを「行動分析」ページから確認することができます。
6.1 概要
トレースバック行動分析は、選択したユーザーのセッションの開始時間を基準に、行動フローを分析することができます。
IMQA WPM トレースバック行動分析は、以下のとおりに構成されています。
❶ 収集日 ❷ ユーザーの行動フロー ❸ 画面フロー
6.2. ユーザーの行動フロー
選択したユーザーのセッションの開始時間を基準に、セッションの開始～セッションの終了までの画面フローによって表示します。
❶ セッションの開始時間 選択したユーザーの行動データの「セッションの開始時間」に自動設定されます。
❷ パスの概要を表示 選択したユーザーの行動フロー概要を表示します。「セッションの開始 > 「画面1」 > 「画面2」 > … > セッションの終了」と表示され、[画面の名前]をクリックすると、画面フローでその画面の位置を素早く確認することができます。
6.3. 画面フロー
選択したユーザーの行動データを画面フローで表示します。ユーザーが移動したページの移動パスを確認し、各画面の性能情報を確認するとともに、各性能指標の詳細分析機能により問題の原因を詳しく分析することができます。
画面フローは、以下のとおりに構成されています。
❶ 画面の単位 Webサイトのユーザーが訪問したページの単位を表示します。ステップ(段階)情報、ページの訪問時間、画面の名前を表示します。長い画面名は、マウスポインターを動かすと表示されるツールチップにより確認することができます。
❷ 画面のカードの性能を表示/非表示 画面のカードをクリックすると、性能指標領域を表示します。再度クリックすると、性能指標領域を閉じます。
❸ 画面のカードの性能指標 ユーザーが訪問した各ページのロード時間、最小/最大レスポンスタイムを表示します。
各画面単位の性能情報
ユーザーが訪問した各ページロード時間、最小/最大レスポンスタイムを確認し、他のページと比較することができます。各性能の数値をクリックすると、性能詳細分析のポップアップを表示します。
ページロード時間: 画面フローのN番目の特定ページのロード時間を表示します。基準値以上の場合、危険色で表示します。
レスポンスタイム: 画面フローのN番目のページにおいて収集されたレスポンスタイムの最小値と最大値を表示します。基準値以上の場合、危険色で表示します。
ページロード時間
特定ページ
ページロード時間
固有値
ms
レスポンスタイム
特定ページ
レスポンスタイム
最小値、最大値
ms
7. 統計
IMQA WPM統計は、様々なテーマの過去データを期間と条件によって照会し、観察及び分析することができます。各性能指標別のユーザーのデータ分布をユーザーの環境と共に分析したり、Webアプリケーションの全般的なステータスの確認やインサイトを得ることができます。
7.1. 区間分析
区間分析は、各性能指標のユーザーデータの分布を、ユーザー環境とともに分析することができます。ダッシュボードにより、総合的な平均性能を確認した後、特定の性能低下区間を詳細に30分単位で確認することができます。
IMQA WPM 区間分析は、以下のとおりに構成されています。
❶ タイムライン ❷ 性能分布グラフ ❸ ユーザー情報 ❹ 性能ヒートマップ
タイムライン
分析したい日付、時間（30分単位）を変更することができます。 性能分布グラフ、ユーザー環境を選択した基準に更新します。
❶ タイムライン 分析したい日付、時間(30分単位)を変更することができます。変更すると、性能分布グラフとユーザー環境を選択した基準で更新されます。
❷ 分析日 基本設定は「今日の日付」で設定されており、[<] [>]をクリックすると、分析日を変更することができます。最大15日前まで選択することができます。
❸ 選択した時間帯 選択した時間帯が表示されます。別の時間帯に変更することもできます。
❹ 現在の時間帯 「現在の時間」が含まれた時間帯が表示されます。
❺ 凡例 各時間帯ごとに集計されたデータ数によって、タイムラインのカラー濃度が4段階で表示されます。
性能分布グラフ
選択した30分間のユーザーデータ分布がヒストグラムで表示されます。性能分布グラフから区間を選択し、ユーザー環境と性能ヒートマップを分析することができます。
❶ 性能指標 「ページロード時間」「レスポンスタイム」に性能指標を変更することができます。指標を変更すると、性能分布グラフ、ユーザー情報が更新されます。
❷ ヒストグラム ヒストグラムは、横軸は階級、縦軸は度数を表し、集計されたデータを様々な区間に定めて階級をつくり、各階級に属するデータ数で度数を表します。ヒストグラムは、すべての集団の分布状態を把握したり、比較するのに役立ちます。
ページロード時間
ページロード時間(ms)
0 ~ 5,000ms
収集されたデータ数
レスポンスタイム
レスポンスタイム(ms)
0 ~ 10,000ms
収集されたデータ数
❸ 50%基準線 性能平均基準線を表します。全データ分布の中間位置を表示し、全般的な性能を把握する場合に有用です。 基準線が0に近いほど速い性能を意味します。
❹ 95%基準線 性能下位5%基準線を表します。全データ分布の下位5%が始まる地点を表示し、性能が最も低いデータを把握する場合に有用です。 基準線が0に近いほど速い性能を意味します。
❺ 分析可能な区間 基準線で区分された区間を選択して性能データを詳細に分析できます。 選択した区間でユーザー情報をフィルタリングして、性能ヒートマップを表示します。 最大3区間で表示され、データの位置で区間を算出するため区間が重なることがあります。 この場合、%が高い区間と表示されます。
区間1: 全データ分布の0~50%未満
区間2: 全データ分布の50%以上~95%未満
区間3: 全データ分布の95%以上
ユーザー情報
基本性能分布全区間について表示され、選択した30分ユーザ環境を割合で表示します。 性能分布グラフ領域で区間選択時に更新されます。
ページ: 選択した区間で集計されたユーザーデータのページが表示されます。
OS: 選択した区間で集計されたユーザーのOSが表示されます。
ブラウザ: 選択した区間に集計されたユーザーのブラウザを表示します。
性能ヒートマップ
選択した性能分布区間と関連性のある性能ヒートマップが表示されます。選択した性能区間のユーザが異なる性能問題を抱えているかをページロード時間、レスポンスタイムに対するヒートマップを確認することができます。性能指標別ヒートマップについての詳細は、「IMQA WPM ユーザーガイド > 性能ヒートマップ」を参考にしてください。
ページロード時間
個別ページまたはSPA方式で実装されたWebブラウザのアプリケーションで測定されたページのロード時間を確認することができます。ヒートマップエリアで特定のセルをクリックしたり、マウスドラッグで区間を選択すると、「性能詳細分析」のポップアップが表示されます。
ページロード時間: 当該HTMLページがonloadイベントを発生する時点またはDOMの変更によるロード時間を区間で算出します。
凡例: 基準値以上の区間は赤、未満は青で表示され、同じ時間の軸に集計されたデータ比率によってカラー濃度は3段階で表示されます。
レスポンスタイム
ページにおいてリクエストしたHTTPのレスポンスタイムを確認することができます。ヒートマップエリアで特定のセルをクリックしたり、マウスドラッグで区間を選択すると、「性能詳細分析」のポップアップが表示されます。
レスポンスタイム: HTTPレスポンスタイムが区間で算出されます。
凡例: 収集されたHTTP情報でレスポンスコードが4xx番台・5xx番台の場合は赤、その他のレスポンスコードは青で表示され、同じ時間の軸に集計されたデータ比率によってカラー濃度が3段階で表示されます。
7.2. 性能分析
性能分析は、Webサイトへの訪問者&訪問数、各性能指標を時系列グラフ表示し、算出区間を変更して性能が低下した区間および性能の変動の推移をマクロ観点で確認することができます。
30分: 直近の30分の性能が1分間隔で表示されます。
1時間: 直近の1時間の性能が1分間隔で表示されます。
3時間: 直近の3時間の性能が1分間隔で表示されます。
12時間: 直近の12時間の性能が5分間隔で表示されます。
1日: 直近の24時間の性能が10分間隔で表示されます。
7.3. 画面分析
画面分析は、Webサイトのユーザーが訪問したページの訪問率、問題発生率、各性能指標の下位5%と平均値を表示します。算出区間を変更し、各ページのどのような性能低下がどれほどあったか、直観的に確認することができます。ページは訪問率の高い順でソートされ、画面のカードをクリックすると、「ページ分析」ページへ移動することができます。
7.4. ユーザー統計
ユーザー統計は期間内のユーザーのWebサイト利用に関する過去のデータを確認することができます。テーマ別統計で希望の期間と条件で照会し、Webサイトのユーザーに関するインサイトを得ることができます。マクロな観点からステータス確認及びパターン把握ができます。
IMQA WPM ユーザー統計、以下のとおりに構成されています。
❶ 統計トピック ❷ 照会期間/照会条件 ❸ 要約情報 ❹ ページ利用記録
統計トピック
過去のデータを分析した詳しいテーマを選択することができます。選択したテーマに合う様々な統計指標を分析することができます。
❶ 統計の詳しいテーマ 統計の詳しいテーマを変更することができます。指標の変更時、該当するテーマに合う統計指標を確認することができます。
照会期間/照会条件
照会したい期間と照会条件を選択することができます。選択した期間と基準でデータを照会します。
① 照会したい照会期間を選択します。基本は「直近7日」に設定されており、「今日」、「昨日」、「直近7日」を選択することができます。
② [照会する]をクリックすると、選択した期間と基準でデータが照会されます。
要約情報 - 日別利用者数&訪問数
Webサイトの利用履歴に関する要約情報で、日別のWebサイト利用者数&訪問数を月間カレンダーにヒートマップで可視化してデータの密集度を確認することができます。
表示基準: 照会したい基準を選択します。照会したい基準を選択します。基本は「利用者数」に設定されており、「利用者数」、「訪問数」を選択することができます。変更すると月間カレンダーのヒートマップを更新します。
1日平均: 照会期間内の利用者数、訪問数を1日平均で算出します。
期間総計: 照会期間の合計を算出します。
凡例: 照会期間内の利用者数、訪問数の最小値と最大値を確認することができます。月間カレンダーのヒートマップに表示されるカラー4段階を確認することができます。
月間カレンダーのヒートマップ: 日別のWebサイト利用者数&訪問数を月間カレンダーにヒートマップで可視化します。最小値と最大値を基準に、4段階のカラーで区分して数値を可視化して素早く確認することができます。
要約情報 - ページ利用上位5
Webサイトの利用履歴に関する要約情報で、訪問者とビュー数が多い上位5つのページを確認することができます。ページを基準に訪問者数、ビュー数が多い順に基本的に並べられます。ページ別の訪問者数、ビュー数の高い順に基本的に並べ替えられます。 ページ情報、訪問者数とビュー数を確認できます。
訪問者数: 該当するページに訪問したユーザー数をカウントします。 重複を除いたユニークユーザーを意味します。
ビュー数: 該当するページの訪問数をカウントします。
日別利用者数&訪問数
照会期間、照会条件に該当するWebサイトの利用者数と訪問数を日別に確認することができます。
❶ ヘッダ(整列) 基本は日付の新しい順に並べられます。日付の古い順に並べ替えることができます。
❷ 合計 照会結果の利用者数、訪問数の合計を表示します。
❸ 日別利用者数&訪問数 日付、日別の利用者数と訪問数を表示します。
日付: 照会期間に含まれる日付を表示します。
利用者数: 該当する日付のユーザー数をカウントします。重複を除いたユニークユーザーを意味します。
訪問数: 当該日付にWebサイトに接続した数をカウントします。ユーザーがWebサイトに接続し、開始したセッションの数を意味します。
ページ利用記録
照会期間、照会条件に該当するWebサイトのユーザーが訪問したページを表示し、訪問者数が多い順に基本的に並べられます。ページ情報、訪問者数とビュー数を確認することができます。
❶ ヘッダ(整列) 基本は訪問者数が多い順に並べられます。訪問者数が少ない順に並べ替えることができます。
❷ 合計 照会結果の訪問者数、ビュー数の合計を表示します。
❸ ページ利用記録 ページ情報、ページ別の訪問者数とビュー数を表示します。
ページ: ページ名を表示します。長いページ名はマウスポインターを乗せると表示されるツールチップで確認することができます。
利用者数: 該当するページに訪問したユーザー数をカウントします。重複を除いたユニークユーザーを意味します。
ビュー数: 該当するページの訪問数をカウントします。
8. レポート
IMQA WPMレポートは、Webブラウザアプリケーションに測定された性能指標に対するレポートを提供します。各性能指標別の性能状況とボトルネック現象を要約して日別に確認でき、PDF、CSV形式で保存したり、印刷することができます。
8.1. 概要
IMQA WPMレポートは、以下のとおりに構成されています。
❶ 照会日 ❷ レポート ❸ ダウンロード/プリント
8.2. 照会日
照会したい日付を選択でき、選択した基準でレポートを照会することができます。
① 照会したい照会日を選択してください。基本設定は「今日の日付」で設定されており、最大30日まで選択することができます。
② [適用]をクリックすると、選択した基準でレポートを照会することができます。
8.3. 性能レポート
レポートは、性能とボトルネック現象レポートで構成されています。性能レポートは、各性能指標区間ごとに1日ユーザーデータの分布を%で確認することができます。
❶ 性能指標 性能指標の名前と集計されたデータ数が表示されます。
❷ 性能区間 各性能指標が9つの区間に分けて表示されます。グレーの区間は性能安定区間で、グレー以外の色の区間は危険な区間を表します。
❸ 区間別比率 集計されたデータの区間別比率がで表示されます。
8.4. ボトルネック現象レポート
ボトルネック現象レポートでは、Webブラウザアプリケーションの性能低下の原因を詳細に確認することができます。
レスポンスタイム下位20 URL
1日ユーザーデータのうち最もレスポンスタイムが遅かったURL20個が表示されます。基本的に下位5%レスポンスタイムが高い順で整列され、リクエスト情報、下位5%と平均値を確認することができます。
❶ ヘッダ(整列) 基本的に下位5%のレスポンスタイムが高い順に整列され、ステータス、件数、平均、P95(下位5%)で並べ替えることもできます。
❷ レスポンスタイム下位20 URLの項目 リクエスト情報、下位5%と平均値が表示されます。
メソッド: HTTPメソッドが表示されます。
ホスト: ホスト情報が表示されます。
状態: レスポンスコードが表示されます。
ルート: リクエストされたURLが表示されます。
件数当該件数を表示します。集計されたデータ数を意味します。
平均: リクエストされたURLの全体レスポンスタイムが平均で算出されます。
P95: リクエストされたURLの下位5%レスポンスタイムが平均で算出されます。
ページロード時間下位20
1日ユーザーデータのうち最もページロード時間が遅かったウェブページ20個が表示されます。基本的に下位5%のページロード時間が高い順に整列され、ページ情報、下位5%と平均値を確認することができます。
❶ ヘッダ(整列) 基本的に下位5%のページロード時間が高い順に整列され、ページ、件数、平均P95(下位5%)で並べ替えることもできます。
❷ ページロード時間下位20の下位20項目 ページ情報、下位5%と平均値が表示されます。
ページ: ウェブページの情報が表示されます。
平均: 当該ウェブページの全体ページロード時間が平均で算出されます。
P95: 当該ウェブページの下位5%のページロード時間が平均で算出されます。
8.5. ダウンロード/プリント
レポートをPDF、CSV形式で保存したり、印刷することができます。
① [PDF Download]をクリックすると、「[IMQA_REPORT]プロジェクト名_照会日.pdf」ファイルが「Download」フォルダに保存されます。
② [CSV Download]をクリックすると、「[IMQA_REPORT]プロジェクト名_照会日.xlsx」ファイルが「Download」フォルダに保存されます。
③ [Print]をクリックすると、レポート様式を保った「印刷プレビューダイアログ」が表示されます。
9. 通知
IMQA WPM通知を通して、Webブラウザアプリケーションの危険状況を認識することができます。通知は、性能指標別の通知基準値によって多様に設定することができます。設定された通知は、「ダッシュボード > 最近発生通知」に表示され、ログインアカウントのEメールで受け取ることができます。
9.1. 通知ポリシーリスト
基本的に最近追加した通知順に整列され、新しい通知ポリシーを複数追加することができ、通知ポリシーを無効化したり、削除することができます。
IMQA WPM通知ポリシーリストは、以下のとおりに構成されています。
❶ ポリシー追加 新しい通知ポリシーを追加することができます。[ポリシー追加]をクリックすると、「通知ポリシー設定」ページへ移動します。
❷ ポリシー名 通知ポリシーを追加すると、入力したポリシー名が表示されます。
❸ 削除 追加した通知ポリシーを削除します。削除するとその通知項目は削除され、それ以降は通知が送信されません。
❹ 無効化 追加した通知ポリシーを無効化します。[無効化]をクリックすると、選択した通知項目の通知送信が一時的に中断され、[有効化]をクリックすると、通知を再び有効化することができます。
9.2. 通知ポリシー設定
各性能指標の通知の基準値と通知を受ける特定のプロジェクトメンバーを選択し、通知を色々な方法で設定することができます。
通知ポリシー追加
通知ポリシーリスト右上の[ポリシー追加]をクリックすると、「通知ポリシー設定」ページへ移動します。
① 任意のポリシー名を入力してください。
② 性能指標別の通知基準値と危険度として表示される基準値以上のデータの比率を設定してください。画面右上の[基準値を初期化する]をクリックすると、「プロジェクトプリセット」設定値に初期化されます。
❶ 性能指標 通知基準値を設定する性能指標の名前が表示されます。
❷ 危険度 通知基準値以上の正常範囲、警告範囲、危険範囲が表示されます。
❸ 問題発生率 通知基準値以上の正常範囲、警告範囲、危険範囲の比率基準が%で表示され、マウスドラッグで調整することができます。
❹ 基準値 性能指標別の通知基準を入力することができます。「プロジェクトプリセット」で設定した基準値がある場合は、基本値が自動的に入力され、通知基準の基準値に変更することができます。
ページロード時間
100ms
正常：基準値以上のデータが全体の10%未満
警告：基準値以上のデータが全体の10%以上
危険：基準値以上のデータが全体の30%以上
レスポンスタイム
3,000ms
正常：基準値以上のデータが全体の10%未満
警告：基準値以上のデータが全体の10%以上
危険：基準値以上のデータが全体の30%以上
❺ 性能指標の有効化/無効化 性能指標別通知を有効化、または無効化することができます。[無効化]状態だと当該性能指標に対する通知が送信されず、[有効化]状態だと当該性能指標に対する通知が送信されます。
③ 通知を受けるチャンネルを選択します。
電子メール：電子メールで通知を送信します。
ブラウザ通知：Webブラウザのプッシュ通知により、IMQAに接続しなくても通知を受けることができます。接続したPCのブラウザ通知に許可が必要です。通知権限を要求するポップアップは、接続したPCで最初のブラウザの通知設定時にのみ表示されます。[ブラウザ通知テスト]から設定のステータスを確認することができます。
④ 通知を受けるプロジェクトメンバーを選択します。
⑤ 設定が完了すると、[保存]をクリックします。
ブラウザ通知を直接設定する場合 「ブラウザ通知」をクリックするとき、ブラウザの上に表示される通知権限を要求するポップアップで[許可]を押してください。
ブラウザ通知対象のメンバーの場合 通知設定をした後、通知対象メンバーが「プロジェクトリスト」に接続したとき、ブラウザの上に通知権限を要求するポップアップが表示されます。
現在、ブラウザ通知は、Google Chromeブラウザのみサポートします。
💡Webブラウザからプッシュ通知が届きません。 ブラウザ通知を設定してもWebブラウザから通知が届かない場合は、以下の3つのケースに該当しないか確認してください。
通知権限を要求するポップアップで「ブロック」した場合
接続したPCの通知センターの設定がOFFの場合
使用中のブラウザがGoogle Chromeではない、もしくは対応バージョンでない場合
1. 通知権限を要求するポップアップで「ブロック」した場合 接続したPCのGoogle Chromeブラウザで通知の許可が必要です。次の権限を変更する二つの方法のいずれかを参照してください。
2. 接続したPCの通知センターの設定がOFFの場合 ブラウザの通知を「許可」しても、接続したPCの各OSの通知センターの設定がOFFの場合、プッシュ通知は正常に届きません。次の各OSの通知センターの設定を変更する方法を参照してください。
Window ① 「設定 > システム > 通知および作業」をクリックします。
② 「アプリおよび他の送信者からの通知を受け取る」を設定します。
③ 「Chrome」のアプリの通知を受け取るを設定します。
Mac ① 「Appleメニュー > システム設定」のポップアップで「通知」をクリックします。
② 「Google Chrome」を選択し、「通知を許可」を設定します。
3. 使用中のブラウザがGoogle Chromeではない、もしくは対応バージョンでない場合 現在、ブラウザの通知機能は、Google Chromeのみサポートします。上記の設定にもかかわらずブラウザの通知が届かない場合、Webプッシュ通知機能のサポートを受けられないバージョンの可能性があります。最新バージョンのブラウザにアップデートしてから設定してください。
10. 管理
IMQA WPM管理を通して、基本的なプロジェクト設定とIMQAに表示される性能指標別基準値、画面名を変更することができます。
10.1. プロジェクト管理
プロジェクト情報で作成したプロジェクト情報を変更でき、プロジェクトメンバーを確認することができます。
プロジェクト情報
プロジェクト名を変更でき、プロジェクトキーを確認することができます。
プロジェクト名: プロジェクト作成時に入力したプロジェクト名が表示されます。プロジェクトマネージャー以上が修正することができます。変更後に[保存する]をクリックすると適用されます。
URL: プロジェクトを作成するとき、入力したWebサイトのメインドメインのURLを表示します。
プロジェクトキー: プロジェクト作成時に作成されたプロジェクトキーが表示されます。[コピーする]をクリックすると、クリップボードにコピーすることができます。
サービス：プロジェクトを作成するとき、選択したサービスを表示します。
プロジェクトを作成するとき、入力したメインドメインのURLは、変更できません。他のURLに変更された場合、support@imqa.ioまでお問い合わせください。
プロジェクトメンバー
「プロジェクトリスト > プロジェクト管理 > プロジェクト情報」で追加したプロジェクトメンバーを確認することができます。
10.2. プロジェクトプリセット
IMQAに表示する性能指標別の基準値と危険度に表示される基準値以上のデータ比率を任意で設定することができます。
「クラッシュ/訪問数」「ページロード時間」「レスポンスタイム」の基準値と比率を設定することができます。変更後に[保存]をクリックすると適用されます。
❶ 性能指標 通知基準値を設定する性能指標の名前が表示されます。
❷ 危険度 通知基準値以上の正常範囲、警告範囲、危険範囲が表示されます。
❸ 問題発生率 通知基準値以上の正常範囲、警告範囲、危険範囲の比率基準が%で表示され、マウスドラッグで調整することができます。
❹ 基準値 性能指標別に問題があると判断される基準を入力することができます。入力した基準値は、IMQAサービス内の表示基準として活用されます。
クラッシュ/訪問数
-
正常：基準値以上のデータが全体の10%未満
警告：基準値以上のデータが全体の10%以上
危険：基準値以上のデータが全体の30%以上
ページロード時間
100ms
正常：基準値以上のデータが全体の10%未満
警告：基準値以上のデータが全体の10%以上
危険：基準値以上のデータが全体の30%以上
レスポンスタイム
3,000ms
正常：基準値以上のデータが全体の10%未満
警告：基準値以上のデータが全体の10%以上
危険：基準値以上のデータが全体の30%以上
10.3. 画面管理
Webサイトの各ページの名前を、理解しやすいようIMQAで表示する名前に変更することができます。管理の重要度が低く、必要のないページは非表示にすることができます。
画面表示設定
❶ 表示設定されたページ 基本は[チェック]状態に設定されており、表示設定されたページをIMQAで表示します。
❷ 表示設定 基本は[チェック]状態に設定されており、クリックして解除すると非表示になります。[チェック]状態に再びページが表示されるように設定することができます。表示したいページの設定が終ると「画面管理」右上の[保存]をクリックします。
❸ 非表示に設定されたページ 非表示に設定されたページはIMQAで表示されません。
現在の画面表示設定は、データの収集有無、集計有無とは関係なく、「MPM > ダッシュボード > ページ別性能状況」に表示される画面カードを設定する機能です。非表示画面は表示に設定を変えるまで「ページ別性能状況」に表示されません。
画面名変更
Webサイトの各ページ名を理解しやすいようにIMQAで表示する名前に変更することができます。
ドメイン名非表示
ページ名からドメイン情報を削除してIMQAで表示する画面名に一括適用することができます。
❶ ドメイン名非表示 基本は[解除]状態に設定されており、[チェック]する場合、ドメイン情報を削除して表示される画面名に一括適用します。
❷ ドメイン情報を削除した画面名 ドメイン情報を削除した画面名が表示されます。画面設定が終わったら「画面管理」右上の[保存]をクリックします。再び固有のページ名を使用する場合は「ドメイン名非表示」機能をクリックして[解除]します。
❸ すでに設定された名前がある画面 「ドメイン名非表示」機能は、すでに設定された名前があるページ名には適用されません。
Last updated
