WPM ユーザガイド
Last updated
Last updated
IMQA WPMは、Webブラウザアプリケーションの性能データを収集してモニタリングすることができます。https://imqa.io から契約していただき、プロジェクトを作成すると、Webブラウザアプリケーションをモニタリングできるようになります。
IMQA WPMは、Webサイトユーザーの使用環境、リソースのネットワークリクエスト、コアウェブバイタル、Webサイトの利用時に発生する問題点に対する判断と分析はもちろん、意思決定のための統計やレポートまで、貴社の管理領域のEnd to Endをサポートします。
また、Webの性能低下問題が発生した場合、階層構造の分析により、リソースと環境要素と相関関係まで分析し、即時の対処とデバッグができるようにサポートします。
IMQAは、以下の環境、ブラウザ、解像度で快適にご利用いただけるよう対応しております。
IMQA WPMは、SaaS型サービスを提供しております。以下のウェブブラウザ環境で快適にご利用いただけます。
対応ブラウザ | 対応バージョン | 推奨解像度 |
---|---|---|
最適の性能とユーザーエクスペリエンスを実現するため、Google Chromeの最新バージョンのご利用をおすすめします。
http://imqa.ioホームページの画面右上メニューにある[今すぐはじめる]をクリックすると、新しいタブにログインページが表示されます。
Eメールアドレスとパスワードを入力して[LOG-IN]をクリックしてください。
パスワードを5回以上間違えると、アカウントがロックされます。アカウントを再び有効化するためには、「パスワード変更」手続きを通してパスワードを初期化する必要があります。
プロジェクトリストで新しいプロジェクトを登録すると、IMQAにWebブラウザアプリケーションを連携させることができます。チーム機能を利用して様々なプロジェクトをまとめて管理したり、ユーザー権限設定など全般的なプロジェクト管理を行うことができます。
IMQA WPMは、WebブラウザアプリケーションのメインURLをプロジェクトとして登録することによりサービスを利用することができます。プロジェクトリストは、以下のとおりに構成されています。
❶ 画面上部バー ❷ チームバー ❸ プロジェクトリスト ❹ リストビュー/カードビュー ❺ プロジェクト作成 ❻ プロジェクトカード
❶ ロゴ クリックすると、プロジェクトリストのメインへ移動します。
❷ 会員メニュー ログインアカウントの会員メニューが表示されます。
インストールガイドInstallation Guide: IMQAのインストールガイドを確認できます。クリックすると、ブラウザの新しいタブに表示されます。
ユーザー設定Settings: ユーザー名とパスワードを変更することができます。ブラウザのタイムゾーンを変更すると、IMQA分析情報の表示基準時間を変更することができます。
ログインしたユーザーがタイムゾーンを自動的に設定することができない環境にいる場合、IMQAの時間情報が正しく表示されないことがあります。ブラウザのタイムゾーンを利用して、接続している地域のGMT標準時間に合わせて手動で設定することができます。
言語設定Language Setting: IMQAの表示言語を韓国語、英語、日本語に変更できます。
ログアウトLogout: アカウントをログアウトします。
❶ リストビュー/カードビュー プロジェクトカードの表示方式を変更することができます。基本はリストビューで表示されます。
リストビューList View: プロジェクトがリストとして表示されます。並び順を変更したり、プロジェクトの要約指標を確認することができます。
カードビューCard View: 管理中のプロジェクトが多い場合、プロジェクトを素早く見つけることができます。
❷ プロジェクト作成 現在の位置にプロジェクトを作成します。
❸ 設定 *チームにのみ表示 [設定] アイコンをクリックすると、チーム管理メニューが表示されます。
❹ ヘッダ(整列) *リストビューにのみ表示 基本はプロジェクト名順に整列され、プラットフォーム、パッケージ名順で並べ替えることもできます。
❶ チーム作成 ❷ チームタブ ❸ チーム管理
任意のチーム名を入力してから[SUBMIT]または[提出]ボタンを押すとチームが作成されます。
所属中のすべてのチームを確認でき、チームを選択すると、以下のようにチームに関する設定ページが表示されます。
チーム名を修正したり、チームメンバーをEメールアドレスを利用して招待することができます。
Eメールアドレス追加は、IMQAに会員登録されているユーザーのみを追加できます。
チーム名の修正とチーム削除を行うことができます。チーム削除は、チームだけが削除され、所属中のプロジェクトは削除されませんので、ご安心ください。
ログイン後にプロジェクト登録を通してIMQAにWebブラウザアプリケーションを連携させることができます。
プロジェクトリスト右上の[+]アイコンをクリックすると、プロジェクトを作成できるポップアップが表示されます。
① IMQA WPMサービスとチームを選択し、プロジェクト名、メインドメインURLを入力します。
プロトコル:WebサイトのメインURLのプロトコルを選択します。httpまたはhttpsを選択できます。
メインドメイン:プロトコルを除くWebサイトのメインドメインを入力してください。(例: imqa.io)
プロジェクト作成後は変更できませんので、ご確認の上、入力してください。URLを間違って入力したために変更が必要な場合は、プロジェクトを削除して再度作成してください。
② 情報作成が完了したら、[プロジェクト作成]をクリックしてください。
③ プロジェクトキーが含まれたインストール用のコードが発行されました。インストール用のコードを WebページのHTML <head> タグに貼り付けてください。インストールガイドを参考にして、収集オプションをインストール用のコードの下に挿入することも可能です。
インストール用のコードをWebブラウザアプリケーションに挿入した後にWebページにアクセスし、プロジェクト一覧ページを更新してください。
クロスドメインの設定により、サブドメイン(例:m.imqa.io)別途構成されている場合やCORS(オリジン間リソース共有)へのアクセスが必要な場合、許可するオリジンを指定することができます。クロスドメインの設定に関する詳細は、’IMQA WPMユーザーガイド > 2.4. プロジェクト管理 > クロスドメイン設定’を参考にしてください。
URLパターンの設定により、URLの数字、識別子(例:流入ID、ユーザーID、検索クエリなど)の置き換え、類似したページを意味のある集計単位にグループ化することができます。URLパターンの設定に関する詳細は、’IMQA WPMユーザーガイド > 2.4.プロジェクト管理 > URLパターン設定’を参考にしてください。
作成されたプロジェクト・カードでは、プロジェクト情報とインストールおよび設定に必要な概要を確認し、サービスへ移動することができます。
❶ プラットフォームアイコン プラットフォーム情報がアイコンで表示されます。
❷ プロジェクト情報 プロジェクト名、パッケージ名/URLが表示されます。クリックすると「サービス > ダッシュボード」へ移動します。
❸ サービスアイコン MPM, Crash, WPM, WCrash サービス情報がアイコンで表示されます。クリックすると「サービス > ダッシュボード」へ移動します。
❹ プロジェクト管理 […]アイコンをクリックすると、プロジェクト管理メニューが表示されます。
❺ 要約指標の表示/非表示 [∨]アイコンをクリックすると、要約指標が表示されます。[∧]アイコンをクリックすると、要約指標が非表示になります。
❻ WPMプロジェクトの概要 IMQA WPMのインストールおよび設定に必要な概要を表示します。インストール用のコードを再度コピーすることができ、クロスドメインの設定過程を確認することができます。
概要によりIMQA WPMのインストールからサービスの利用までの全般的な過程を把握することができます。
[…]アイコンをクリックすると、プロジェクト管理メニューが表示されます。プロジェクト情報確認および修正・削除、クロスドメインとURLパターンを設定することができます。一部のメニューは、プロジェクト権限ユーザーにのみ表示されます。
❶ プロジェクト情報 プロジェクト情報で作成したプロジェクト情報を確認でき、プロジェクトメンバーを管理することができます。
❷ チーム変更 *プロジェクトマネージャー以上 プロジェクトが所属するチームを変更することができます。チームメンバーとして所属中のチームにのみ変更できます。
❸ クロスドメイン設定 IMQAにおいて分析するメインドメインの他にクロスドメインを設定することができます。サブドメイン(例:m.imqa.io)別途構成されている場合やCORS(オリジン間リソース共有)へのアクセスが必要な場合、許可するオリジンを指定することができます。
❹ URLパターン設定 WebサイトのURLのパターンを探し、好きな形に置き換えてIMQAで収集することができます。URLの数字、識別子(例:流入ID、ユーザーID、検索クエリなど)の置き換え、類似したページを意味のある集計単位にグループ化することができます。
❺ プロジェクト名修正 *プロジェクトマネージャー以上 プロジェクト名を変更することができます。
❻ プロジェクト削除 *プロジェクト作成者以上 プロジェクトを削除することができます。
プロジェクトを削除すると、既存のデータはすべて削除されます。必ず削除前に確認してから、削除を実行してください。
プロジェクト情報で作成したプロジェクト情報を確認でき、プロジェクトメンバーを管理することができます。
❶ プロジェクトメンバーのEメールアドレス プロジェクトメンバーユーザーのEメールアドレスが表示されます。プロジェクトを作成したユーザーは、最上部に表示されます。
❷ プロジェクト権限 プロジェクトの権限がアイコンで表示されます。プロジェクト閲覧と管理役割が表示されます。
プロジェクト作成者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において確認することができます。
IMQA WebAgentは基本的にユーザーのWebブラウザアプリケーションの構成において重要な単位でのみデータが収集できるようにサポートし、インストール用のコードの複製によるライセンス保護などのため、許可されたドメインでのみデータを収集します。メインドメイン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において「ページ」単位で確認することができます。
IMQA WPMのダッシュボードは、様々な性能指標の構成を提供します。IMQA WPMの性能ダッシュボードは、Webブラウザのアプリケーションの性能をリアルタイムで把握することができます。Webサイトの概要と主な性能の状況、コアウェブバイタルの指標を時系列データで確認することができ、ユーザーが訪問したページに関する性能を総合して確認することができます。
IMQA MPM ダッシュボードは、以下のとおりに構成されています。
❶ 画面上部バー(共通) ❷ ツールバー (ダッシュボード) ❸ Webサイト要約情報 ❹ 性能問題発生率 ❺ 時系列性能情報 ❻ ページ別性能状況 ❼ 性能下位リスト ❽ 最近発生通知
❶ ロゴ クリックすると、プロジェクトリストのメインへ移動します。
❷ WPMメニュー クリックすると、各WPMメニューページへ移動します。
❸ モード変更アイコン 「ダッシュボード」ページで画面テーマを変更できます。クリックすると、画面テーマを「Lightモード」または「Darkモード」に変更できます。
❹ WCrashアイコン プロジェクト作成時にWCrashサービスを作成した場合に表示され、クリックすると同アプリの「WCrash > ダッシュボード」ページへ移動します。
❺ プロジェクトナビゲーション 現在いるプロジェクトから別のプロジェクトへ移動することができます。[ホーム]アイコンをクリックするとプロジェクトリストへ移動し、プロジェクトを変更すると当該アプリの「サービス > ダッシュボード」へ移動します。
❻ 会員メニュー ログインアカウントの会員メニューが表示されます。
IMQAガイドDocument: IMQAのインストールガイドを確認することができます。クリックすると、ブラウザの新しいタブに表示されます。
ユーザー設定Settings: ユーザー名とパスワードを変更することができます。ブラウザのタイムゾーンを変更すると、IMQA分析情報の表示基準時間を変更することができます。
ログインしたユーザーがタイムゾーンを自動的に設定することができない環境にいる場合、IMQAの時間情報が正しく表示されないことがあります。ブラウザのタイムゾーンを利用して、接続している地域のGMT標準時間に合わせて手動で設定することができます。
言語設定Language Setting: IMQAの表示言語を「韓国語」または「英語」、「日本語」に変更できます。
ログアウトLog Out: アカウントをログアウトします。
❶ ダッシュボード 情報 現在ダッシュボード View モードを表示しています。
❷ プロジェクト情報 プロジェクトのプラットフォームアイコンとプロジェクト名を表示します。
Webサイトの今日のユーザー数、訪問数、直近30分の平均問題発生率を確認・比較することができます。
今日の日付00時から現在の時間までのユーザー数、訪問数を確認することができます。
今日利用者数Today User: 今日のユーザー数がカウントされます。重複を除いたユニークユーザーを意味します。
今日訪問数Today Session Count: 今日のWebサイトに接続した数をカウントします。ユーザーがWebサイトに接続し、開始したセッションの数を意味します。오늘 이용자 수/방문 수
速やかに把握できるよう、1,000単位は「1K」と要約して表示されます。実際のデータは、「K」で要約表示された数字にカーソルを重ねると表示されるツールチップで確認することができます。
最近30分間の問題発生率平均と性能天気指標を確認することができます。
問題発生率平均 30m: 最近30分間の各性能指標(ページロード時間、レスポンスタイム、クラッシュ)の基準値を超えるデータの比率である問題発生率の平均を算出します。
性能天気 30m: 最近30分間の問題発生率平均によって5段階の天気アイコンが表示されます。
問題発生率平均と性能天気は最近30分間のWebサイトの全般的な性能を把握する場合に役立ちます。Webサイト単位での上位評価指標によって素早く性能を評価することができます。
直近の30分間のページロード時間、レスポンスタイム、クラッシュの3つの性能指標の問題発生率がグラフで表示されます。「総合性能状況」は、1分毎に更新されます。
問題発生率 30m : 最近30分間の性能指標別の問題発生率を算出します。
性能指標別基準値は、「管理 > プロジェクトプリセット」で設定することができます。
直近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分間の全体ページロード時間が平均として算出されます。
グラフに記された横線は性能基準値です。これを通して基準値以上の性能問題があった時間と値を容易に確認することができます。
Y軸はページロード時間を表します。下位5%はIMQAが収集した全データのうちロード時間が長かった順に整列され算出されます。 これを通して、平均的なページロード時間と一部のユーザーの状況を比較してみることができます。下位5%と平均の差が少ないほど、ほとんどのユーザーが似たようなWebサイト使用性を経験していると判断できます。
ページのロード時間は基本的にHTMLのonloadイベントが発生し、ページ のロードが完了した時間を意味します。 SPA方式で実装された環境におけるページのロード時間の収集は、’IMQA WPM/WCrashインストールガイド > [WPM] SPA専用オプション’を参考にしてください。
直近の30分間のレスポンスタイムを1分間隔で確認することができます。下位5%と全体平均が表示され、「レスポンスタイム」は1分毎に更新されます。
下位5%P95: 直近の30分間の下位5%のレスポンスタイムが平均として算出されます。
平均Avg: 直近の30分間の全体レスポンスタイムが平均として算出されます。
グラフに記された横線は性能基準値です。これを通して基準値以上の性能問題が発生した時間と値を容易に確認することができます。
下位5%は、IMQAが収集した全データのうちレスポンスタイムが長かった順に整列され算出されます。
これを通して、平均的にユーザーリクエストにかかったレスポンスタイムと一部の性能低下状況を比較してみることができます。レスポンスタイムが長かった場合は、特定の時間にネットワークまたはサーバーに問題が発生しなかったかを確認して、「総合性能状況」と連携して、どのような環境のユーザーに性能低下が生じたのかを分析することができます。
直近30分間のWebブラウザのアプリケーションで測定されたコアウェブバイタルの性能指標LCP、FID、CLSの30分の平均と最大値を確認することができます。すべての平均と1分の平均の最大値を表示し、「Core Web Vitals」は1分おきに更新します。
コアウェブバイタルは、以下のとおりに構成されています。
❶ デバイスフィルタ 直近30分間収集されたコアウェブバイタル指標をユーザー環境を基準に分析することができます。基本的に「すべて」と設定されており、「Desktop」または「Mobile」でフィルタリングすることができます。基準を変更する際、次の平均と1分の最大値を更新します。
❷ 平均 30m 直近30分間収集されたコアウェブバイタルの各指標の数値を平均で算出します。Googleによる評価のガイドラインでは、各区間を色で表示します。
❸ 1分の最大値 直近30分間収集されたコアウェブバイタルの各指標の数値のうち、最も性能が低下した時点の数値を表示します。Googleによる評価のガイドラインでは、各区間を色で表示します。
コアウェブバイタルのLCP、FID、CLSは、Webサイトのロード時間、インタラクティブ性、視覚的な安定性の3つの要素を基準にWebサイトのユーザーエクスペリエンスを評価するGoogleによるWebの性能指標です。
直近の30分間にユーザーがアクセスしたページ別の性能状況を確認することができます。ページ別のユーザーアクセス率、各性能の問題発生率、下位5%と平均値をモニタリングすることができます。「ページ別性能状況」は1分毎に更新されます。
ページ別性能状況は、以下のとおりに構成されています。
❶ 性能指標 「ページロード時間」「レスポンスタイム」に性能指標を変更することができます。指標を変更すると、下に表示される「画面カード」に下位5%と平均値が更新されます。
❷ 画面のカードソーティング 基本的に「訪問率順」に設定されており、「訪問率順」、「問題発生率順」、「下位5%順」、「平均順」にソートすることができます。数値が高い順にソートします。
❸ 概要 直近30分間、ユーザーが訪問したページ別の問題発生率を要約テキストの形で素早く確認することができます。
❹ 画面カード 直近の30分間にユーザーがアクセスしたページ別のアクセス率、問題発生率、下位5%と平均値を確認することができます。
直近の30分間にユーザーがアクセスしたページ別の各性能の問題発生率を速やかに確認することができます。右側にある[総合ページ性能表]をクリックすると、ポップアップが表示されます。
ページはアクセス率の高い順に整列され、「管理 > プロジェクトプリセット」で設定した基準値を超えるデータの比率が問題発生率で表示され、問題発生率によって危険度カラーで表しています。
これを通して、アクセス率の高いページにどのような性能低下が発生したのかを一目で確認することができます。また、Webサイトユーザーが平均的にページロードに問題を抱えているのか、リクエストに対するレスポンスが遅かったのかなど、性能低下の要因を分析することができます。
直近の30分間にユーザーがアクセスしたページ別のアクセス率、問題発生率、性能指標別の下位5%と平均値を確認することができます。選択したソート基準に従ってページがソートされ、画面カードをクリックすると、「ページ分析」ページへ移動します。
❶ ページ情報 収集されたページの情報を表示します。URLパターンの設定によりパターンが適用された単位で表示されます。長いページ情報はマウスポインターを動かすと表示されるツールチップにより確認することができます。
❷ 画面の名前 ページの名前が表示されます。名前が長い場合は、カーソルを重ねると表示されるツールチップで確認することができます。画面の名前は、理解しやすいようIMQAで表示する名前に変更でき、「管理 > 画面管理」で変更することができます。
❸ アクセス率/性能情報 直近の30分間に特定のページをアクセスした比率と性能基準によって下位5%と平均値が表示されます。
これを通して、アクセス率の高いページにどのような性能低下がどれほど発生したのかを一目で把握することができます。また、Webサイトユーザーの平均的な性能と、一部のユーザーの性能を比較してみることができます。問題が発見されたページは、「ページ分析」で性能低下の原因を詳細に分析することができます。
直近の30分間に最も多く発生したWebクラッシュ6つが表示されます。クラッシュ数の高い順に整列され、クラッシュの名前が長い場合は、カーソルを重ねると表示されるツールチップで確認することができます。「上位クラッシュ」は、1分毎に更新されます。
クラッシュ名: エラー名が表示されます。項目をクリックすると、そのクラッシュの「エラー詳細」ページへ移動することができます。
クラッシュ数 30m: 当該エラーの30分間の発生累積回数がカウントされます。
比率 30m: 30分間に発生したエラーのうち当該エラーが占める比率が表示されます。
直近の30分間に最もレスポンスタイムが遅かった6つのURLが表示されます。レスポンスタイムが高い順に整列され、URLが長い場合は、カーソルを重ねると表示されるツールチップで確認することができます。「上位ネットワークレスポンス」は1分毎に更新されます。
URL: リクエストされたURLが表示されます。
リクエスト数Number of calls: 当該URLの30分間のリクエスト累積回数がカウントされます。
レスポンスタイム: 当該URLのレスポンスタイムが表示されます。
直近の30分間に発生した基準値以上の問題についての通知が表示されます。通知は「通知 > 通知ポリシーリスト」で設定することができます。最近発生した通知順に整列され、「[ポリシー名]の「性能指標」値が「危険度」です。」と表示されます。「最近発生通知」は1分毎に更新されます。
IMQA WPMページ分析は、各ページの性能を30分単位で詳しく確認することができます。ページビュー数、平均の性能などのユーザーに関する情報と、各性能指標に関するヒートマップにより性能の分布や低下状況を詳しく分析することができます。さらに、特定ページを基準に収集されたコアウェブバイタルの評価の数値を確認し、低下の要因を分析することができます。
「ページ分析」メニューや「ダッシュボード」などにおいて特定画面のカードをクリックすると移動することができ、IMQA WPMページの性能分析は次のように構成されます。
❶ ページ/分析時間 ❷ ページ性能情報 ❸ ページビュー数 ❹ コアウェブバイタル ❺ 性能ヒートマップ ❻ ウェブバイタル
分析したいページと分析日や時間を変更することができます。変更すると、ページ性能分析情報が選択した基準で更新されます。基本設定は「ダッシュボード」でクリックした「ページ」「今日の日付」「現在の時間帯」に設定されており。
❶ 分析日 基本設定は「今日の日付」で設定されており、[<] [>]をクリックすると、分析日を変更することができます。最大30日前まで選択することができます。
❷ 選択した時間帯 選択した時間帯が表示されます。別の時間帯に変更することもできます。
❸ 現在の時間帯 「現在の時間」が含まれた時間帯が表示されます。
❸ 凡例 各時間帯ごとに集計されたデータ数によって、タイムラインのカラー濃度が4段階で表示されます。
30分間のページロード時間、レスポンスタイムの性能指標の下位5%平均と全体平均が表示されます。
これを通して、特定のページにどのような性能低下が発生したのかを一目で確認することができます。また、Webサイトユーザーが平均的にページロードに問題を抱えているか、リクエストに対するレスポンスが遅かったのかなど、性能低下の要因を分析することができます。
30分間のページビュー数を確認できます。
ページビュー数: 30分間の当該ページのアクセス数がカウントされます。
30分間特定ページにおいて収集されたコアウェブバイタルの性能指標LCP、FID、CLSの30分の平均と評価の各区間の割合を確認することができます。
コアウェブバイタルは、以下のとおりに構成されています。
❶ デバイスフィルタ 30分特定ページにおいて収集されたコアウェブバイタル指標をユーザー環境を基準に分析することができます。基本的に「すべて」と設定されており、「Desktop」または「Mobile」でフィルタリングすることができます。基準を変更する際、次の平均と評価の各区間の割合を更新します。
❷ 平均 30m 30分特定ページにおいて収集されたコアウェブバイタルの各指標の数値を平均で算出します。Googleによる評価のガイドラインでは、各区間を色で表示します。
❸ 評価の各区間の割合 30分特定ページにおいて収集されたコアウェブバイタルの各指標の数値をGoogleによるガイドラインの評価区間である良好、改善が必要、不良の評価区間別にカウントします。
コアウェブバイタルのLCP、FID、CLSは、Webサイトのロード時間、インタラクティブ性、視覚的な安定性の3つの要素を基準にWebサイトのユーザーエクスペリエンスを評価するGoogleによるWebの性能指標です。
各性能指標に対するヒートマップを通して、性能分布と性能低下状況を詳細に分析することができます。
30分間個別ページまたはSPA方式で実装されたWebブラウザのアプリケーションで測定されたページのロード時間を確認することができます。Webページを基準にヒートマップが表示されます。セルにカーソルを重ねると、「分析日 | 分析時間 | データ数 | 性能区間」のツールチップが表示されます。ヒートマップエリアで特定のセルをクリックしたり、マウスドラッグで区間を選択すると、「ページロード時間分析」のポップアップが表示されます。
ページロード時間: 当該HTMLページがonloadイベントを発生する時点またはDOMの変更によるロード時間を区間で算出します。
凡例: 基準値以上の区間は赤、未満は青で表示され、同じ時間の軸に集計されたデータ比率によってカラー濃度は3段階で表示されます。
30分間に当該ページでリクエストしたHTTPレスポンスタイムを確認することができます。セルにカーソルを重ねると、「分析日 | 分析時間 | データ数 | 性能区間」がツールチップに表示されます。ヒートマップエリアで特定のセルをクリックしたり、マウスドラッグで区間を選択すると、「レスポンスタイム詳細」ポップアップが表示されます。
レスポンスタイム: HTTPレスポンスタイムが区間で算出されます。
凡例: 収集されたHTTP情報でレスポンスコードが4xx番台・5xx番台の場合は赤、その他のレスポンスコードは青で表示され、同じ時間の軸に集計されたデータ比率によってカラー濃度が3段階で表示されます。
ウェブバイタルの各指標の性能分布とウェブバイタルの数値に影響を与える多様な関連情報をいっしょに確認することができます。これによりウェブバイタルの評価に最も影響力の高い要因を分析、評価・改善することができます。
LCP 分布グラフ 30分間の特定ページにおいて収集されたLCPのデータ分布をヒストグラムで表示します。ヒストグラムは、階級を横軸に、度数を縦軸に表示しますが、集計されたデータをいくつかの区間を決めて階級を作り、各階級に属するデータの数で度数を表示します。ヒストグラムは、すべての集団における分布状況を把握し、または比較するときに便利です。Googleによる評価のガイドラインでは、各区間を色で表示します。
30分間特定ページにおいて収集されたLCPの数値に影響を及ぼす様々な関連情報をいっしょに確認することができます。これによりLCPの評価に最も影響力の高い要因を分析、評価・改善することができます。
Element: 最大のコンテンツ要素であるdocument objectの情報と割合を表示します。
Screen Resolution: 当該ページを閲覧したユーザーの画面の解像度情報と割合を表示します。
LCPは、ページのロード中、ユーザーのビューポートにおいて最大のコンテンツ要素が表示される時間を測定します。ページの主要コンテンツの確率が高く、LCPが速い場合、ユーザーがページを使えると認識するのに役立ちます。画像リソースの最適化や各ユーザー環境のリソースの管理に効果的です。LCPは、2,500ms以内を目標に改善することを推奨します。
FID 分布グラフ 30分間の特定ページにおいて収集されたFIDのデータ分布をヒストグラムで表示します。ヒストグラムは、階級を横軸に、度数を縦軸に表示しますが、集計されたデータをいくつかの区間を決めて階級を作り、各階級に属するデータの数で度数を表示します。ヒストグラムは、すべての集団における分布状況を把握し、または比較するときに便利です。Googleによる評価のガイドラインでは、各区間を色で表示します。
30分間特定ページにおいて収集されたFIDの数値に影響を及ぼす様々な関連情報をいっしょに確認することができます。これによりFIDの評価に最も影響力の高い要因を分析、評価・改善することができます。
Event: 最初にインタラクティブ性が発生したときのイベントを表示します。
Screen Resolution: 当該ページを閲覧したユーザーの画面の解像度情報と割合を表示します。
FIDは、ページのロード中、ユーザーがページと最初にインタラクティブ性が発生したイベントの処理遅延時間を測定します。FIDが速いと、ユーザーがインタラクティブ性と応答性に対して良い印象を持つことができます。Javascriptなどリソースの最適化やTaskを細分化する戦略が効果的かもしれません。FIDは100ms以内を目標に改善することを推奨します。
CLS 分布グラフ 30分間の特定ページにおいて収集されたCLSのデータ分布をヒストグラムで表示します。ヒストグラムは、階級を横軸に、度数を縦軸に表示しますが、集計されたデータをいくつかの区間を決めて階級を作り、各階級に属するデータの数で度数を表示します。ヒストグラムは、すべての集団における分布状況を把握し、または比較するときに便利です。Googleによる評価のガイドラインでは、各区間を色で表示します。
30分間特定ページにおいて収集されたCLSの数値に影響を及ぼす様々な関連情報をいっしょに確認することができます。これによりCLSの評価に最も影響力の高い要因を分析、評価・改善することができます。
Element: レイアウトの切り替えが発生したときに移動したobject情報と割合を表示します。
Screen Resolution: 当該ページを閲覧したユーザーの画面の解像度情報と割合を表示します。
CLSは、ページのロード中、予想外のレイアウトの切り替えの経験を点数で測定し、合算します。CLSが低いと、ユーザーが視覚的な安定性に対する良い印象を持つことができます。ユーザーの各環境のリソース管理や動的コンテンツの処理方法の検討などが効果的かもしれません。CLSは0.1以内を目標に改善することを推奨します。
IMQA WPM性能詳細分析は、「ページ分析」「区間分析」ページの性能ヒートマップを通して確認できる機能です。性能ヒートマップで特定のセルを選択したり、マウスドラッグで区間を選択すると表示されます。性能詳細分析では、ページロード時間分析、詳細レスポンス分析を実行できます。これを通して、性能の問題点または問題となる区間を把握することができます。また、ユーザーの行動分析機能により性能問題が発見されたWebサイトのユーザーがどのような移動パスで利用したか、すべての行動フローを確認することができます。
HTMLページがonloadイベントを発生する時点またはSPA方式で実装されたWebブラウザのアプリケーションで測定されたページのロード時間を確認することができます。までのデータを収集します。CSS、Javascript、Imageなどのリソースをリクエストするときにかかる時間、FP、FCP、DCLなどのタイミング情報、LCP、LS、FIDのウェブバイタル性能指標も表示されます。そのため、ユーザーはウェブページのload時点までどのような外部リクエストがあったのかを把握でき、ページをロードすると遅くなるボトルネック区間を正確に判断することができます。
「ページ分析」「区間分析」性能ヒートマップで選択したエリアのデバイス情報です。ページ、デバイス、OS、ブラウザ、ブラウザバージョン、ページロード時間、ユーザー数についての情報がリスト形式で表示されます。詳細分析に入ると、まず最初に最上部にあるデバイス情報が下のタイムラインに表現されています。他のタイムラインを確認したい場合は、他のデバイス情報を選択すると確認することができます。同一条件でグルーピングされたデバイスの場合、最も遅い数値のユーザー パフォーマンス情報を照会します。
ページ: 選択した時間帯と区間のページを表示します。
デバイス: ユーザーが接続したOSにより、「Desktop」と「Mobile」に分類して表示されます。
OS: ユーザーが接続しているOSを表示します。
ブラウザ/バージョン: ユーザーが接続したブラウザとバージョンを表示します。
ページロード時間(ms)ユーザーによるページのロード時間を表示します。同じ条件でグループ化された項目の場合、平均で算出します。
ユーザー数: 当該件数を表示します。同じ条件で集計されたデータ数を意味します。
ユーザー情報はWebサイトにアクセスしたとき、ユーザーのUser-Agent情報に基づいて表示します。IMQA WPMは、ユーザーが主に使用するOSとブラウザに大別されます。 OSの場合、「Windows」 「macOS」 「Android」 「iOS」 「Linux」などに区別されます。 ブラウザの場合、「Chrome」 「Safari」 「Microsoft Edge」 「Firefox」 「Samsung Browser」などに区別されます。 特定されていないOSやブラウザの場合、「Unknown」で表示されることがあります。
デバイス情報一覧から選んだデバイスのユーザーが、 どのようなWebサイトを利用したか、連携して追跡・照会することができます。性能低下があったデバイスの性能情報を確認し、性能低下現象の発生前後の原因を分析することができます。[ユーザー行動分析]ボタンをクリックすると、そのデバイスユーザーのセッションの開始~セッションの終了までの画面フローを「行動分析」ページから確認することができます。
性能の詳細分析~ユーザーの行動分析は「IMQA WPMユーザーガイド > 6.トレースバック行動分析」を参考にしてください。
選択したデバイスユーザーの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ページのロード中に収集されたタイミング情報とウェブバイタルの性能指標を確認することができます。コアウェブバイタルの場合、関連情報をいっしょに表示します。収集するタイミング情報は次の通りです。オーバービュー領域の下に表示されたマーカーにより確認することができます。
収集するウェブバイタル情報は以下の通りです。オーバービュー領域の下に表示されたマーカーにより確認することができます。
タイミング情報により、Webページのロード中、重要な時点に関する情報を確認することができます。例えば、素早いFPとFCPは、ユーザーにWebページが素早く応答しているという印象を与えることができます。 コアウェブバイタルのLCP、FID、CLSは、Webサイトのロード時間、インタラクティブ性、視覚的な安定性の3つの要素を基準にWebサイトのユーザーエクスペリエンスを評価するGoogleによるWebの性能指標です。
ウェブバイタルの性能指標の場合、ウェブバイタルの数値に影響を及ぼす様々な関連情報をいっしょに確認することができます。これによりウェブバイタルの評価に最も影響力の高い要因を分析、評価・改善することができます。
LCP Element: 最大のコンテンツ要素であるdocument objectを表示します。
FID Event: 最初にインタラクティブ性が発生したときのイベントを表示します。
FID Delay: 最初にインタラクティブ性が発生したときのイベントを表示します。
LS Element: レイアウトの切り替えが発生したときに移動したobjectを表示します。
LS Score: レイアウトの切り替えのとき、移動したobjectの移動点数を表示します。
Viewport: 当該ユーザーのビューポートサイズを表示します。
<meta>: 当該ユーザーが読み込んだdocumentのheadタグの中のmeta viewportタイプの値を表示します。
性能詳細分析のウェブバイタル関連情報により、選択した個別ユーザーの実際の利用環境とウェブバイタルの評価を比較・分析することができます。特定ユーザー環境においてウェブバイタルの評価が良くないということは、Webサイトが当該ユーザーの環境に最適化されていないことを意味します。Webブラウザのアプリケーションの目標性能を設定するための改善指標として活用してください。
HTML Documentそのものと各リソースのリクエストと応答にかかった時間をWaterfallチャートで確認することができます。 DocumentのすべてのDOMが描かれ、ロードされる過程において確認できる情報は、次の通りです。Document requestの要素にマウスポインターを動かすと表示されるツールチップにより確認することができます。
Request Type: リソースタイプを表示します。
Request URL: 当該ユーザーがアクセスした原始URL情報を表示します。
各区間の性能情報:
各リソースについて確認できる情報は以下のとおりです。 各リソースタイムラインにマウスポインタを上げると表示されるツールチップで確認できます。
Request Type: リソースタイプを表示します。
Request URL: リソースのリクエストのURL情報を表示します。
各区間の性能情報:
ページのロード中、ダイナミックレンダリングする要素のスクリプト実行時間を測定することができます。レンダリング過程で実行される関数を定義し、スクリプトの実行にかかった時間をFlameGraphで確認することができます。
ページのロード過程において、特定のJavaScriptの実行時間を測定したり、AがBを、BがCを実行するなどの構成においてスクリプトの実行時間を確認し、非効率的に構成されたコードを改善することができます。スクリプト実行時間の測定は、「IMQA WPM/WCrashインストールガイド > スクリプトの実行時間の測定」を参考にしてください。
IMQA WPM は、HTTPレスポンスタイムとレスポンスコードを収集するため、クライアントからのHTTPリクエストを分析することができます。
ブラウザで収集されたHTTP情報はms単位で収集され、HTTPヘッダ情報とレスポンスコードが表示されます。これを利用して、特定のURLで発生するレスポンスタイム分析、エラーコードが発生するURLなどを把握することができます。
クライアントが収集するHTTP関連情報は以下のとおりです。
IMQA WPM行動分析のトレースバックは、「性能詳細分析」ポップアップで選択したデバイスのユーザーが、どのような流れでWebサイトを利用したかを連携して追跡・照会することができます。性能低下があったデバイスの性能情報を確認し、性能低下現象の発生前後の原因を分析することができます。[ユーザー行動分析]ボタンをクリックすると、そのデバイスユーザーのセッションの開始~セッションの終了までの画面フローを「行動分析」ページから確認することができます。
トレースバック行動分析は、選択したユーザーのセッションの開始時間を基準に、行動フローを分析することができます。