# WPM ユーザガイド

## 1. はじめる <a href="#start" id="start"></a>

IMQA WPMは、Webブラウザアプリケーションの性能データを収集してモニタリングすることができます。<https://imqa.io> から契約していただき、プロジェクトを作成すると、Webブラウザアプリケーションをモニタリングできるようになります。

### 1.1. IMQA WPM 紹介 <a href="#introduction" id="introduction"></a>

IMQA WPMは、Webサイトユーザーの使用環境、リソースのネットワークリクエスト、コアウェブバイタル、Webサイトの利用時に発生する問題点に対する判断と分析はもちろん、意思決定のための統計やレポートまで、貴社の管理領域のEnd to Endをサポートします。

また、Webの性能低下問題が発生した場合、階層構造の分析により、リソースと環境要素と相関関係まで分析し、即時の対処とデバッグができるようにサポートします。

### 1.2. 対応環境

IMQAは、以下の環境、ブラウザ、解像度で快適にご利用いただけるよう対応しております。

#### ブラウザ <a href="#browser" id="browser"></a>

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 |

{% hint style="info" %}
最適の性能とユーザーエクスペリエンスを実現するため、Google Chromeの最新バージョンのご利用をおすすめします。
{% endhint %}

### 1.3. ログイン <a href="#login" id="login"></a>

<http://imqa.io>ホームページの画面右上メニューにある\[今すぐはじめる]をクリックすると、新しいタブにログインページが表示されます。

<figure><img src="https://lh7-us.googleusercontent.com/QDUz6absZzQHVIrpzi-nztGFy0pMhRKnrywYwZT8az7z3tmNjx0_rAK-ft7m2aDh1Gcx4feClQ295tp6Gd_mHQmgk1bFXISzMkE6q2CtVQurBM800CBUIvCxe0tj56VCGg2mTq1BizdkguCgI1g28Qc" alt=""><figcaption></figcaption></figure>

Eメールアドレスとパスワードを入力して\[LOG-IN]をクリックしてください。

{% hint style="danger" %}
**パスワードを5回以上間違えると、アカウントがロックされます。**&#x30A2;カウントを再び有効化するためには、「パスワード変更」手続きを通してパスワードを初期化する必要があります。
{% endhint %}

## 2. プロジェクトリスト <a href="#project-list" id="project-list"></a>

プロジェクトリストで新しいプロジェクトを登録すると、IMQAにWebブラウザアプリケーションを連携させることができます。チーム機能を利用して様々なプロジェクトをまとめて管理したり、ユーザー権限設定など全般的なプロジェクト管理を行うことができます。

### 2.1. 概要

<figure><img src="https://lh7-us.googleusercontent.com/CmMlDFdUZV2eudRnjNc0XKbez1GgZNBbmM_H8Ubb5qEhCxkojY2oAcjpnnUvowQvjKmGerpXlWCG-S4o7JIkxPvRTvBmSUZNcCKEkshoc64Hsu88ZOyTfBPudGWDwxCVyJCVriZwdDnD9ZKDsxxzzi8" alt=""><figcaption></figcaption></figure>

IMQA WPMは、WebブラウザアプリケーションのメインURLをプロジェクトとして登録することによりサービスを利用することができます。プロジェクトリストは、以下のとおりに構成されています。

**❶ 画面上部バー**\
**❷ チームバー**\
**❸ プロジェクトリスト**\
**❹ リストビュー/カードビュー**\
**❺ プロジェクト作成**\
**❻ プロジェクトカード**

#### 画面上部バー <a href="#top" id="top"></a>

<figure><img src="https://lh7-us.googleusercontent.com/RYpiGqxaImPq3S7HA5zsndNug-LB1KBzpyLhtFqAuTTSW1jJwOhGaHxF1hb8Nj9olPr6IR_MfOi0hcqk5hCMVwv_J4q2J8lH9SFWEIRJ3aslMASpI1516O54SMBRT5WOAN-HuPWd2y068zB9F_5-gcE" alt=""><figcaption></figcaption></figure>

**❶ ロゴ**\
クリックすると、プロジェクトリストのメインへ移動します。

❷ **会員メニュー**\
ログインアカウントの会員メニューが表示されます。

* **インストールガイド**Installation Guide: IMQAのインストールガイドを確認できます。クリックすると、ブラウザの新しいタブに表示されます。
* **ユーザー設定**Settings: ユーザー名とパスワードを変更することができます。ブラウザのタイムゾーンを変更すると、IMQA分析情報の表示基準時間を変更することができます。

{% hint style="info" %}
ログインしたユーザーがタイムゾーンを自動的に設定することができない環境にいる場合、IMQAの時間情報が正しく表示されないことがあります。**ブラウザのタイムゾーン**を利用して、接続している地域のGMT標準時間に合わせて手動で設定することができます。
{% endhint %}

* **言語設定**Language Setting: IMQAの表示言語を韓国語、英語、日本語に変更できます。
* **ログアウト**Logout: アカウントをログアウトします。

#### プロジェクトリスト <a href="#list" id="list"></a>

<figure><img src="https://lh7-us.googleusercontent.com/4ze-jaSicuC48asRKDTFPPnHC6piaz_BSj27VoYT6JT6HluhRxVBVQIy2TUDQr5SnKBrrgeFDXuiYVe_aryvfRS8xRD1vNEzkX8wexkUT8dlyWRFht88ewFnulfgNSd9dDEKV7SYALZby3p9fgAXxOA" alt=""><figcaption></figcaption></figure>

**❶ リストビュー/カードビュー**\
プロジェクトカードの表示方式を変更することができます。基本はリストビューで表示されます。

* **リストビュー**List View: プロジェクトがリストとして表示されます。並び順を変更したり、プロジェクトの要約指標を確認することができます。

<figure><img src="https://lh7-us.googleusercontent.com/rY_T10hymhJ6XluBiDznPpe_sUpI0gP7RTqzG6z5lwHcYNAn9e4Pr7ijNHdHNt8JUktW47w0rDQzLwkWT7VOdZHiHsY9Ey1KXY3-ecEUK1Fch9bqugTtlx-euLGgIw515XPZhbWtHUIPghOzPdSVX5Q" alt=""><figcaption></figcaption></figure>

* **カードビュー**Card View: 管理中のプロジェクトが多い場合、プロジェクトを素早く見つけることができます。

<figure><img src="https://lh7-us.googleusercontent.com/X2ygEZNYIxRoM3zIl_dihjnpzwbq2NvlTDCZqFiSiBKynGCGhhxBnB6CvfV427D_xGRxvuHuIzdscaGKW471atwUGr4syHUvnLsZOuHByHhcGTczlz3EATkBWswa5sWN34ikj-HLxghuhWglJzlLvJs" alt=""><figcaption></figcaption></figure>

**❷ プロジェクト作成**\
現在の位置にプロジェクトを作成します。

❸ **設定** <mark style="color:red;">\*チームにのみ表示</mark>\
\[設定] アイコンをクリックすると、チーム管理メニューが表示されます。

❹ **ヘッダ(整列)** <mark style="color:red;">\*リストビューにのみ表示</mark>\
基本はプロジェクト名順に整列され、プラットフォーム、パッケージ名順で並べ替えることもできます。

### 2.2. チーム&#x20;

<figure><img src="https://lh7-us.googleusercontent.com/Ph-xTmJG7wJBzx_SWG_CPgm2XlfOmt1NwtdsH30TKprsegoBvg61RLj9r6bLg51fewJzsfmN6yIDy3kJo5N9wSdr_PBlsbLh5lp9J1LHK2nLGEJ3XX-n1wRSCDdAWWVb2LGOShIFVmhAGCu-S03xPEE" alt=""><figcaption></figcaption></figure>

❶ チーム作成\
❷ チームタブ\
❸ チーム管理

#### チーム作成 <a href="#team2" id="team2"></a>

<figure><img src="https://lh7-us.googleusercontent.com/nMxB_eP8KL-03-zbN5ZAwQWc-6tTlh0_2uCI9sFparZl0xGWevHD4-EwShNNjcKYk8XgvnA5R7OMTsoiEEjofOXoIRJ-GStoYEQWDjYlqRfbrONy4FVGJsiKRXAfUNNrUYClI1zvtk8Zu6nmhikrGtQ" alt="" width="375"><figcaption></figcaption></figure>

任意のチーム名を入力してから\[SUBMIT]または\[提出]ボタンを押すとチームが作成されます。

#### チームタブ <a href="#tab" id="tab"></a>

<figure><img src="https://lh7-us.googleusercontent.com/E1kEo8L4JxCrrmJ-tFbFgLUfBj9V8D8quxdCUc9CwbdQemq40hQHlgfkf9ZAgcG3NimJsh_zgguDT9p_dBSLRr0XG381G6T3otH6BfM1gtVgtVNkqHznD8i7fUwzLIodjhe8DOgBeKP7L2DJcuTlMVE" alt=""><figcaption></figcaption></figure>

所属中のすべてのチームを確認でき、チームを選択すると、以下のようにチームに関する設定ページが表示されます。

<figure><img src="https://lh7-us.googleusercontent.com/eR5duT8R1dD8kCZG-_37-H7Rfl2RZPTxuSzwDUgJ6hN7Ir6l_rT3-rie3uHnubyKddEgaysAs_YD5Rk3kMsfs-FBWE8sJhiYrxznW77mWuqmBCAkZOuZ8ibNLbcxQeyF2X53JQTgq-7eSyx-tibYiIw" alt=""><figcaption></figcaption></figure>

チーム名を修正したり、チームメンバーをEメールアドレスを利用して招待することができます。

{% hint style="warning" %}
Eメールアドレス追加は、IMQAに会員登録されているユーザーのみを追加できます。
{% endhint %}

#### チーム管理 <a href="#managemnet" id="managemnet"></a>

<figure><img src="https://lh7-us.googleusercontent.com/LYhWaWdxSngm0tPmMlYY0sAriFiSt0NQALVNBJ3fm2EiapH9-ZBrA6wf-AhuxEkjNBzkjsYCtgY_fGG_Y680_tOMACNiOv3rWKm23atKhL9NZ_3fqrSirdNqmzfyJ1XJhaXgV15lELVIjyyvv7lf-8Y" alt=""><figcaption></figcaption></figure>

チーム名の修正とチーム削除を行うことができます。チーム削除は、チームだけが削除され、所属中のプロジェクトは削除されませんので、ご安心ください。

<br>

### 2.3. プロジェクト作成

ログイン後にプロジェクト登録を通してIMQAにWebブラウザアプリケーションを連携させることができます。

<figure><img src="https://lh7-us.googleusercontent.com/gw88o7vmeH7meA2Y1NkF-6BONsl_W1qXkdXy28iLPsQDTDH0BJcsGNxUd673gaDtXzCFzb8jo-A3aahjlTKsIxDxBy5BYQ2IiE3hZSzzVvmGL8icQT-nHN82i1tY7t_JeFM09zIZ8jpeu71uEmZhAqI" alt=""><figcaption></figcaption></figure>

プロジェクトリスト右上の\[+]アイコンをクリックすると、プロジェクトを作成できるポップアップが表示されます。

<figure><img src="https://lh7-us.googleusercontent.com/-_UrfCOw0CWN9ivuYFc6iKKaz12dy3KXOuuEgcgu2TUjfyjGybCfjJ_5Wo1sSsMpxIxtZEDKZoC2h0X_xsWLPl-xwRLwH7xWy48LQI4UOtwJuBeQleHo3zkGVrIG9dZZlx_QC7BBem3W8foxFju-YXI" alt=""><figcaption></figcaption></figure>

\
① IMQA WPMサービスとチームを選択し、プロジェクト名、メインドメインURLを入力します。

* **プロトコル**：WebサイトのメインURLのプロトコルを選択します。httpまたはhttpsを選択できます。
* **メインドメイン**：プロトコルを除くWebサイトのメインドメインを入力してください。(例： imqa.io)

{% hint style="warning" %}
プロジェクト作成後は変更できませんので、ご確認の上、入力してください。URLを間違って入力したために変更が必要な場合は、プロジェクトを削除して再度作成してください。
{% endhint %}

② 情報作成が完了したら、\[プロジェクト作成]をクリックしてください。

③ プロジェクトキーが含まれたインストール用のコードが発行されました。インストール用のコードを WebページのHTML \<head> タグに貼り付けてください。インストールガイドを参考にして、収集オプションをインストール用のコードの下に挿入することも可能です。

{% hint style="warning" %}
**インストール用のコード**をWebブラウザアプリケーションに挿入した後にWebページにアクセスし、プロジェクト一覧ページを更新してください。
{% endhint %}

{% hint style="info" %}
**クロスドメインの設定**により、**サブドメイン**(例：m.imqa.io)別途構成されている場合やCORS(オリジン間リソース共有)へのアクセスが必要な場合、許可するオリジンを指定することができます。**クロスドメインの設定**に関する詳細は、’[IMQA WPMユーザーガイド > 2.4. プロジェクト管理 > クロスドメイン設定](#domain)’を参考にしてください。
{% endhint %}

{% hint style="info" %}
**URLパターンの設定**により、**URLの数字、識別子**(例：流入ID、ユーザーID、検索クエリなど)の置き換え、類似したページを意味のある集計単位にグループ化することができます。**URLパターンの設定**に関する詳細は、’[IMQA WPMユーザーガイド > 2.4.プロジェクト管理 > URLパターン設定](#url)’を参考にしてください。
{% endhint %}

#### プロジェクトカード <a href="#card" id="card"></a>

作成されたプロジェクト・カードでは、**プロジェクト情報**と**インストールおよび設定に必要な概要**を確認し、サービスへ移動することができます。

<figure><img src="https://lh7-us.googleusercontent.com/unRB2FdsWTf36ic2adG-fjbN88d-egrIDXOMq0B2QJxu-DMEvgJRoUkLylJT300VPIo_bwB9O7rQAIhhDI-6fVUMwPzhS-ZTdurDf2qE2i6sRlozEyu55XOk6iupFp3mHz-_VQfoSaMOpAB3I4JzLKs" alt=""><figcaption></figcaption></figure>

**❶ プラットフォームアイコン**\
プラットフォーム情報がアイコンで表示されます。

**❷ プロジェクト情報**\
プロジェクト名、パッケージ名/URLが表示されます。クリックすると「サービス > ダッシュボード」へ移動します。

**❸ サービスアイコン**\
MPM, Crash, WPM, WCrash サービス情報がアイコンで表示されます。クリックすると「サービス > ダッシュボード」へ移動します。

**❹ プロジェクト管理**\
\[…]アイコンをクリックすると、プロジェクト管理メニューが表示されます。

❺ **要約指標の表示/非表示**\
\[∨]アイコンをクリックすると、要約指標が表示されます。\[∧]アイコンをクリックすると、要約指標が非表示になります。

❻ **WPMプロジェクトの概要**\
IMQA WPMのインストールおよび設定に必要な概要を表示します。インストール用のコードを再度コピーすることができ、クロスドメインの設定過程を確認することができます。

{% hint style="info" %}
概要によりIMQA WPMのインストールからサービスの利用までの全般的な過程を把握することができます。
{% endhint %}

### 2.4. プロジェクト管理 <a href="#project-management" id="project-management"></a>

\[…]アイコンをクリックすると、プロジェクト管理メニューが表示されます。プロジェクト情報確認および修正・削除、クロスドメインとURLパターンを設定することができます。一部のメニューは、プロジェクト権限ユーザーにのみ表示されます。

<figure><img src="https://lh7-us.googleusercontent.com/NhBKXWGLAmA3JTh7k2K4EOQkfLszy_nhZfbH2sLpjwiqulfZBqwjqx6VoiBb6K6T3UYzFZ4Ks85REcPudZyUFA0u1CoFdqU6CO3xLUkXza5uQ9yYDnO8v1ZKg0CN0u8WIKxjHdYSPm7HdwtxDY3Huz8" alt="" width="375"><figcaption></figcaption></figure>

**❶ プロジェクト情報**\
プロジェクト情報で作成したプロジェクト情報を確認でき、プロジェクトメンバーを管理することができます。

❷ **チーム変更** <mark style="color:red;">\*プロジェクトマネージャー以上</mark>\
プロジェクトが所属するチームを変更することができます。チームメンバーとして所属中のチームにのみ変更できます。

**❸ クロスドメイン設定**\
IMQAにおいて分析するメインドメインの他にクロスドメインを設定することができます。サブドメイン(例：m.imqa.io)別途構成されている場合やCORS(オリジン間リソース共有)へのアクセスが必要な場合、許可するオリジンを指定することができます。

**❹ URLパターン設定**\
WebサイトのURLのパターンを探し、好きな形に置き換えてIMQAで収集することができます。URLの数字、識別子(例：流入ID、ユーザーID、検索クエリなど)の置き換え、類似したページを意味のある集計単位にグループ化することができます。

**❺ プロジェクト名修正** <mark style="color:red;">\*プロジェクトマネージャー以上</mark>\
プロジェクト名を変更することができます。

**❻ プロジェクト削除** <mark style="color:red;">\*プロジェクト作成者以上</mark>\
プロジェクトを削除することができます。

{% hint style="danger" %}
プロジェクトを削除すると、**既存のデータはすべて削除されます**。必ず削除前に確認してから、削除を実行してください。
{% endhint %}

#### プロジェクト情報 <a href="#info" id="info"></a>

プロジェクト情報で作成したプロジェクト情報を確認でき、プロジェクトメンバーを管理することができます。

<figure><img src="https://lh7-us.googleusercontent.com/LhP20y1zVGFgaQWpI26R7YOVGqJx5EBtcRkPBXD5zM_l7EQORfneaVFi7JbUCx4TxMrIa8GKW83vbhmy5xjL5nwhaxE8PItOiiuHrGtnkpTz-CwwtPIkOuMTS84xyqT5rGWIxu4ENsWsNnDRiXvGMec" alt="" width="563"><figcaption></figcaption></figure>

**❶ プロジェクトメンバーのEメールアドレス**\
プロジェクトメンバーユーザーのEメールアドレスが表示されます。プロジェクトを作成したユーザーは、最上部に表示されます。

**❷ プロジェクト権限**\
プロジェクトの権限がアイコンで表示されます。プロジェクト閲覧と管理役割が表示されます。

<table><thead><tr><th width="139" align="center">プロジェクト権限</th><th width="90" align="center">アイコン</th><th align="center">プロジェクト閲覧</th><th width="137" align="center">メンバー追加/削除</th><th align="center">メンバー権限変更</th><th align="center">プロジェクト削除</th></tr></thead><tbody><tr><td align="center"><strong>Owner</strong></td><td align="center">Ⓞ</td><td align="center">O</td><td align="center">O</td><td align="center">O</td><td align="center">O</td></tr><tr><td align="center"><strong>Manager</strong></td><td align="center">Ⓜ</td><td align="center">O</td><td align="center">O</td><td align="center">X</td><td align="center">X</td></tr><tr><td align="center"><strong>Member</strong></td><td align="center"></td><td align="center">O</td><td align="center">X</td><td align="center">X</td><td align="center">X</td></tr></tbody></table>

* プロジェクト作成者Owner: プロジェクトを作成した1つのユーザーアカウントに与えられ、全般的なプロジェクト管理権限が付与されます。
* プロジェクトマネージャーManager: プロジェクトのメンバー追加と自分以外の下位権限ユーザーの削除を実行することができます。
* **プロジェクトメンバー**Member: プロジェクトを閲覧することができます。

**❸ プロジェクトメンバーの権限変更** <mark style="color:red;">\*プロジェクト作成者以上</mark> **/ メンバー削除** <mark style="color:red;">\*プロジェクトマネージャー以上</mark>\
① Eメールアドレスの横にある\[Ⓜ]アイコンをクリックすると、プロジェクトマネージャーとして追加することができます。\
② \[Ⓜ]アイコンをもう一度クリックすると、プロジェクトマネージャーから削除されます。\
③ Eメールアドレスの横にある\[-]アイコンをクリックすると、当該ユーザーはプロジェクトから削除されます。

❹ **プロジェクトメンバーの追加** <mark style="color:red;">\*プロジェクトマネージャー以上</mark>\
① Eメールアドレスの下にある \[Add Project Member]をクリックすると、現在プロジェクトメンバーではないチームメンバーと「Eメールアドレス追加」エリアが表示されます。\
② プロジェクトメンバーではないチームメンバーのEメールアドレスの横にある\[+]アイコンをクリックすると、プロジェクトメンバーとして追加されます。

**❺ Eメールアドレス追加** <mark style="color:red;">\*プロジェクトマネージャー以上</mark>\
Eメールアドレスを入力して\[+]アイコンをクリックすると、プロジェクトメンバーとして追加されます。

{% hint style="warning" %}
Eメールアドレス追加は、IMQAに会員登録されているユーザーのみを追加できます。
{% endhint %}

#### クロスドメイン設定 <a href="#domain" id="domain"></a>

IMQAにおいて分析するメインドメインの他にクロスドメインを設定することができます。サブドメイン(例：m.imqa.io)別途構成されている場合やCORS(オリジン間リソース共有)へのアクセスが必要な場合、許可するオリジンを指定することができます。

① IMQA WPMプロジェクトの \[···] アイコンをクリックすると、プロジェクト管理メニューを表示します。

<figure><img src="https://lh7-us.googleusercontent.com/yrG69OGKWvsWpLLQzJQgIqCBNSOz1dgBvoVh2-TX8RK42KLC4iBGJz3W_6afhqolc-YmCkffy3OT5s7SK2nPDSBsr0ppJkHpTaWdn95RqSXP8BnGmbr54GmdS8DT32bB0TO_CvYa3bjg0dSen7UIOfY" alt="" width="375"><figcaption></figcaption></figure>

② \[クロスドメイン設定]をクリックします。

<br>

<figure><img src="https://lh7-us.googleusercontent.com/wD1iGFJKQy5TIlIEkw5KzJ_OEOi98SB6-mNNazi0NnCIzwJ54weuOK7HlzKISqPEO4d_jPdv681_5Eq7eWUDsO0mgp1gwtxaDfh4OZP2FweddMe6Eih7KB2buBR8MERLVWNnClxluy5mFfWXbwlqbNE" alt=""><figcaption></figcaption></figure>

③ 基本プロジェクトを作成するときに入力したメインドメインのURLが設定されており、Webサイトの構成により、サブドメインまたはオリジン間リソース共有へのアクセスを許可するオリジンを入力します。

* 許可ドメインの設定例)

  <figure><img src="https://lh7-us.googleusercontent.com/Es6ZredtnCi2aybRHYgZ8PqugUqI2PsVHbdg-j_lxyjmrE_PRF9NQB0mVspc-dYw75iSwBQ4I2YmOxKQj-DQvkR70GiwIWe29JaGwSWMQK5zYkCdwzCr_-6ZCa61_UDQbl_yMWn_M8iLaAKKlE5OYtc" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**許可ドメインのURL**へのアクセスを許可するドメイン一覧を指定します。(例： <http://localhost:8080>)

1行で区切って入力することができ、プロトコルおよびポート番号、大文字と小文字を区別し、\*文字を含めることはできません。
{% endhint %}

④ 許可されたドメイン一覧を入力し、\[保存]をクリックします。

⑤ 入力した許可されたドメイン一覧からデータをリアルタイムで収集するように設定されており、IMQAにおいて確認することができます。

{% hint style="info" %}
**IMQA WebAgent**は基本的にユーザーのWebブラウザアプリケーションの構成において重要な単位でのみデータが収集できるようにサポートし、インストール用のコードの複製によるライセンス保護などのため、許可されたドメインでのみデータを収集します。メインドメインURLの他に、性能データを収集したいドメインがあれば、**クロスドメイン設定機**能により許可されたドメイン一覧を設定する必要があります。
{% endhint %}

#### URLパターン設定 <a href="#url" id="url"></a>

WebサイトのURLのパターンを探し、好きな形に置き換えてIMQAで収集することができます。URLの数字、識別子(例：流入ID、ユーザーID、検索クエリなど)の置き換え、類似したページを意味のある集計単位にグループ化することができます。

{% hint style="warning" %}
**IMQA WPM**は基本的にユーザーが接続した原始URLデータを収集します。ユーザーがWebサイトを利用するとき、複数の識別子、検索クエリなどでURLが断片化される可能性が高いページの場合、**URLパターン設定により有意義な集計/分析の単位**を定義することを推奨します。
{% endhint %}

<figure><img src="https://lh7-us.googleusercontent.com/Jv8ALOld7Yoj_BBw8zmsFXi7DKFedNNN7o55eB6nH9PmB4QMPV-84XH3Wxy6oZHiWeAEYS5gfZD8TlmPG904RiAKNo-iTVvByfbvwTWIUFA_Pp55gy-uPJCOS4myx-vm_2lLq2UI2H460tB6fvwYAXE" alt=""><figcaption></figcaption></figure>

❶ URLパターン\
WebサイトのURLのパスまたはクエリパラメータにおいて、任意の形に置き換えるパターンを入力します。パスとクエリパラメータの単位を入力することができます。優先順位が高いURLパターンから適用され、クエリパラメータは「key=value」の形で入力する必要があります。\
① WebサイトのURLの構成により、パスまたはクエリパラメータにおいて束ねたい単位に変数<mark style="color:blue;">{group}</mark>を含めて入力します。\
② WebサイトのURLの構成により、パスまたはクエリパラメータにおいて解きたい単位に変数<mark style="color:orange;">{value}</mark>を含めて入力します。\
③ URLパターンを入力し、\[+]アイコンをクリックします。

* **URLパターン設定例 1)**

  *「商品詳細ページのURLである「products」パスの後の<mark style="color:blue;">数字</mark>を束ねて一つのページで集計/分析したいです。クエリパラメータは詳しく区別しなくても大丈夫です。」*

<figure><img src="https://lh7-us.googleusercontent.com/gcsdIgq-N2Fu2aVfZTm0ZhZJZRgIR9xjOTIVYTmR7ayK4_G0Iif_rDCtePXn8qF3sOXEF4Wm8O2C7pc_mSZ8jt-9rvFBP7_AXsEso6ZrqlsXYRlfjbVeWHNImsaAZ0foPuORvLpTsGK5VcyRk3hSpPg" alt=""><figcaption></figcaption></figure>

① 特定の「パス」に適用するURLパターンを変数<mark style="color:blue;">{group}</mark>を含めて入力します。\
② 設定時点から収集されるURLをご希望の形に置き換えてIMQAにおいて<mark style="color:blue;">「ページ」</mark>単位で確認することができます。

<figure><img src="https://lh7-us.googleusercontent.com/FcsAKrkvZYCPcxWE0uogYJzu9XxsusDJVvRgaehGy1qc71Op77PkTN_yujn5AnQ06VP3hvD4bcp2o98g7Gnn-OxUnU4XjvCeSiQ7ivEDtAG5QcG747h26YoXxqhgAptJPXlqPTCe0nT4kEZJzSr6cV8" alt=""><figcaption></figcaption></figure>

* **URLパターン設定例 2)**\
  \&#xNAN;*「メインページに流入されるタイプを区別したいです。URLのクエリパラメータに付く<mark style="color:blue;">外部からの流入ID</mark>「fbclid」、「NaPm」、「gclid」は表示し、値は詳しく区別しなくても大丈夫です。」*

<figure><img src="https://lh7-us.googleusercontent.com/LV9r9pupNho-D2SO370DQSim-bREunk-1EYBzmOiVT502NZHudLsCIOM7V5ZMhUYkZeTSHxQzG1D6YcuQkNBiZNpmULWq71Z-GBSMkOFI0AtiajzTaO-igSp3lF_bpKz2tGUj8brLugdiwag4nNoDCg" alt=""><figcaption></figcaption></figure>

① 特定の「パス」と「クエリパラメータ」に適用するURLパターンを変数<mark style="color:blue;">{group}</mark>を含めて入力します。\
② 設定時点から収集されるURLをご希望の形に置き換えてIMQAにおいて<mark style="color:blue;">「ページ」</mark>単位で確認することができます。

<figure><img src="https://lh7-us.googleusercontent.com/zTrpkrZ_sVh_cUy9zp5jJWK22BDPP8gz5ySoWEm08dqKNmQXTq5h6T9arkL3082_KISRW-vZt_MhJEtrwxaX8mp-7szQpMCiHY0-iy2keDWFeA8QAtiVdiucGPGpzXwngBefAY8H7Tjwsgr2lhaUkWk" alt=""><figcaption></figcaption></figure>

* **URLパターン設定例 3)**

  *「ベスト商品の一覧ページから各カテゴリータイプを区別したいです。「best」パスのURLクエリパラメータに付く<mark style="color:orange;">カテゴリーID</mark>「category\_id」と値を区別し、他のクエリパラメータは詳しく区別しなくても大丈夫です。」*

<figure><img src="https://lh7-us.googleusercontent.com/V_lDJqRJeNVby5vrZP_nAOW8n0s0YTCLRNfLvAfqit1stIgjItDvQmqbgVS9v1Ly8ccMOVTIqhlwQeogejQZFLGGlk9ouqbGTNTLkHmzvaY84Urs6jx75CoArA-Y7a1B1HKYdRLI_awoSwUaiOSlvjE" alt=""><figcaption></figcaption></figure>

① 特定の「パス」と「クエリパラメータ」に適用するURLのパターンを、変数<mark style="color:orange;">{value}</mark>を含めて入力します。\
② 設定時点から収集されるURLをご希望の形に置き換えてIMQAにおいて<mark style="color:blue;">「ページ」</mark>単位で確認することができます。

<figure><img src="https://lh7-us.googleusercontent.com/VzFNi8S4lid-lULIAj4Hrd2xsP0QApu6aa970eY5dX5KXfNP8w-dRYhFIEOBUGidiu5dWP-R4hg-WiTvM7o7H29q6gYO8TgcM_ARPrk4f5efX1l9q8D2ut3HkDQHXEAy1IC0qw-XdczRE4fs2Cw3y_0" alt=""><figcaption></figcaption></figure>

**❷ 優先順位**\
URLパターンを適用する順番を表示します。優先順位の高いURLパターンから適用され、順番を変更することができます。

* **優先順位の設定例)**

  「商品詳細ページのURLである「products」パスの次の<mark style="color:blue;">数字</mark>を束ねるパターンを適用していますが、メイン～商品詳細ページに移動するタイプの<mark style="color:blue;">内部からの流入ID</mark>「flow」と<mark style="color:blue;">外部からの流入ID</mark>「fbclid」でアクセスする場合を追加で区別したいです。」

<figure><img src="https://lh7-us.googleusercontent.com/SIW1AHQcjP5SsctqQOMW251SbDJ33Q8LZd424RFv-V-AF4BWzP6JUuGV5dWrV_dEKge4gj5ul3iOe46yyWtDvcVjdfnBoBbAY-w58AkyWtH9tvS-ewx5y_foN6Sxv4yLgucahp9atCCMfDVPrbLcHcM" alt=""><figcaption></figcaption></figure>

① 優先順位が高い「パス」に適用されるURLパターンが優先的に適用されます。\
② 特定の「パス」と「クエリパラメータ」に適用するURLパターンの優先順位を高く変更します。<br>

<figure><img src="https://lh7-us.googleusercontent.com/6UVmSgT83z1dLdwsdTPmIXhT0HNkJKrOZPmmYUS20GDU7j9KBxWDrQ9Peg3qjwEpQasOVH2_7052L2iL2uo4WHRUDvUrlMSOITDCnGPW1qqYUoVIDvxsHqsbyl4YpMf98C7nnXDNoRvZmgSKKe9lv68" alt=""><figcaption></figcaption></figure>

③ 設定した後、「クエリパラメータ」に適用されるURLパターンが優先的に適用され、ご希望の形に置き換えられます。

<figure><img src="https://lh7-us.googleusercontent.com/yJv6wwszxQZYZsaCaCgqChUYrju_PUeGgua2VCDSq6iZXPzPvMTfBbsenapxFydDJXuvFkwVrezilZia51wyvyt5MUvpThF_CTjU2UmKIIhl4Pwybq8GZikxe9a4l7ZuIkCDd_kk6D0gvVDrmxGggAQ" alt=""><figcaption></figcaption></figure>

**❸ URLパターン**\
プロジェクトに設定されたすべてのURLパターンを一覧で表示します。

**❹ 優先順位の変更**\
マウスドラッグでURLパターンを適用する順を設定することができます。

**❺ 削除**\
追加したURLパターンを削除します。削除した場合、そのURLパターン項目が削除され、その後はURLパターンが適用されません。適用するURLパターンと優先順位の設定が終わると、\[保存]をクリックします。設定時点から収集されるURLをご希望の形に置き換えてIMQAにおいて「ページ」単位で確認することができます。

## 3. ダッシュボード <a href="#dashboard" id="dashboard"></a>

IMQA WPMのダッシュボードは、様々な性能指標の構成を提供します。IMQA WPMの性能ダッシュボードは、Webブラウザのアプリケーションの性能をリアルタイムで把握することができます。Webサイトの概要と主な性能の状況、コアウェブバイタルの指標を時系列データで確認することができ、ユーザーが訪問したページに関する性能を総合して確認することができます。

### 3.1. 概要 <a href="#overview2" id="overview2"></a>

<figure><img src="https://lh7-us.googleusercontent.com/6pY82TAOcyatWqh6xtDb5SGl7M1sJtailyXRFaFcDNTYlwtwF5mrn5QC5xOftq82tAppjis9_au8Ce-ujl6tJlnjGV0qPB4JTd8fX-TklDr_89n-JhMZkoarVXu6lLFygN-EriTcWgWwnWtsp7yn7Pc" alt=""><figcaption></figcaption></figure>

IMQA MPM ダッシュボードは、以下のとおりに構成されています。

**❶ 画面上部バー(共通)**\
**❷ ツールバー (ダッシュボード)**\
**❸ Webサイト要約情報**\
**❹ 性能問題発生率**\
**❺ 時系列性能情報**\
**❻ ページ別性能状況**\
**❼ 性能下位リスト**\
**❽ 最近発生通知**

#### 画面上部バー(共通) <a href="#top2" id="top2"></a>

<figure><img src="https://lh7-us.googleusercontent.com/nbfiVdTH_ZJgwEEHZQEeyaGFiFMVjkOJ7iqN80YCVB_lCiRzoh0uZ_hm-DnPz6gk08ygDnfJrxqhUkffaOeAVEDmF8SHFP9U-hvGcElqNAhKfGfetOX9myO-hSi-iUIx9MDzdsw3T3rqvFsKYhG2HRc" alt=""><figcaption></figcaption></figure>

❶ **ロゴ**\
クリックすると、プロジェクトリストのメインへ移動します。

❷ **WPMメニュー**\
クリックすると、各WPMメニューページへ移動します。

❸ **モード変更アイコン**\
「ダッシュボード」ページで画面テーマを変更できます。クリックすると、画面テーマを「Lightモード」または「Darkモード」に変更できます。

❹ **WCrashアイコン**\
プロジェクト作成時にWCrashサービスを作成した場合に表示され、クリックすると同アプリの「WCrash > ダッシュボード」ページへ移動します。

❺ **プロジェクトナビゲーション**\
現在いるプロジェクトから別のプロジェクトへ移動することができます。\[ホーム]アイコンをクリックするとプロジェクトリストへ移動し、プロジェクトを変更すると当該アプリの「サービス > ダッシュボード」へ移動します。

**❻ 会員メニュー**\
ログインアカウントの会員メニューが表示されます。

* **IMQAガイド**Document: IMQAのインストールガイドを確認することができます。クリックすると、ブラウザの新しいタブに表示されます。
* **ユーザー設定**Settings: ユーザー名とパスワードを変更することができます。ブラウザのタイムゾーンを変更すると、IMQA分析情報の表示基準時間を変更することができます。

{% hint style="info" %}
ログインしたユーザーがタイムゾーンを自動的に設定することができない環境にいる場合、IMQAの時間情報が正しく表示されないことがあります。ブラウザのタイムゾーンを利用して、接続している地域のGMT標準時間に合わせて手動で設定することができます。
{% endhint %}

* **言語設定**Language Setting: IMQAの表示言語を「韓国語」または「英語」、「日本語」に変更できます。
* **ログアウト**Log Out: アカウントをログアウトします。

### 3.2. ツールバー (ダッシュボード) <a href="#tool-bar" id="tool-bar"></a>

<figure><img src="https://lh7-us.googleusercontent.com/ghvKmGggFtbgxPLroY-8U7k7vOPMwNAMAD7Q9fr5SOlHIfKG9YhDcYcisciV7XjlQ3xSCHT6uFaJw7x2YLgEO60HmNiEemzlYGgjBOMcGgru7TtP5f1RzL3hHHqkBa2EGqRZaKteB1tq6qz0IMDIxc8" alt=""><figcaption></figcaption></figure>

**❶ ダッシュボード 情報**\
現在ダッシュボード View モードを表示しています。

**❷ プロジェクト情報**\
プロジェクトのプラットフォームアイコンとプロジェクト名を表示します。

### 3.3. Webサイト要約情報 <a href="#summary" id="summary"></a>

Webサイトの今日のユーザー数、訪問数、直近30分の平均問題発生率を確認・比較することができます。

<figure><img src="https://lh7-us.googleusercontent.com/HOqyCwMKw0vFmz_a8PXV_zcORzh945g4yl9u_tf5H1UT6L2HHu--BEef9LpmcWteNygxTiFk5T2VwqiAtHF2B_f7LLjE6JM5h8nkSczQLUDc3cnDGCi2FlMmyh_CMFbv4FSiGfy2FHY9XbJknyP-wMM" alt="" width="375"><figcaption></figcaption></figure>

#### 今日利用者数/今日訪問数

今日の日付00時から現在の時間までのユーザー数、訪問数を確認することができます。

<figure><img src="https://lh7-us.googleusercontent.com/HOqyCwMKw0vFmz_a8PXV_zcORzh945g4yl9u_tf5H1UT6L2HHu--BEef9LpmcWteNygxTiFk5T2VwqiAtHF2B_f7LLjE6JM5h8nkSczQLUDc3cnDGCi2FlMmyh_CMFbv4FSiGfy2FHY9XbJknyP-wMM" alt="" width="375"><figcaption></figcaption></figure>

* **今日利用者数**Today User: 今日のユーザー数がカウントされます。重複を除いたユニークユーザーを意味します。
* **今日訪問数**Today Session Count: 今日のWebサイトに接続した数をカウントします。ユーザーがWebサイトに接続し、開始したセッションの数を意味します。오늘 이용자 수/방문 수&#x20;

<table><thead><tr><th width="166" align="center">性能指標</th><th width="253" align="center">算出区間</th><th width="157" align="center">算出値</th><th align="center">合算方式</th></tr></thead><tbody><tr><td align="center"><strong>利用者数</strong></td><td align="center">今日の日付00時~現在の時間</td><td align="center">ユーザー数</td><td align="center">カウント</td></tr><tr><td align="center"><strong>訪問数</strong></td><td align="center">今日の日付00時~現在の時間</td><td align="center">セッション数</td><td align="center">カウント</td></tr></tbody></table>

速やかに把握できるよう、1,000単位は「1K」と要約して表示されます。実際のデータは、「K」で要約表示された数字にカーソルを重ねると表示されるツールチップで確認することができます。

#### 問題発生率平均/性能天気 <a href="#average" id="average"></a>

最近30分間の問題発生率平均と性能天気指標を確認することができます。

<figure><img src="https://lh7-us.googleusercontent.com/AofPSGKyLt_hHjkxg1gPvGOfk5l9ZDLHaO_u8p0kVIC4X9RYttDjUDRycLQCCUCg_38wQj7AKgTe6cHzD3IoVjbUyaEDkaJC9_Oo5XVqkan9PlnjrorQ5JyVY6lFYoPJzyoYsyPvnfCrQ72EGWTDmSU" alt=""><figcaption></figcaption></figure>

* **問題発生率平均**  30m: 最近30分間の各性能指標(ページロード時間、レスポンスタイム、クラッシュ)の基準値を超えるデータの比率である問題発生率の平均を算出します。
* **性能天気**  30m: 最近30分間の問題発生率平均によって5段階の天気アイコンが表示されます。

<figure><img src="https://lh7-us.googleusercontent.com/pLOuRs-ufGQ8sHj2cVyDPwYOcnO7uYrlTIjsCZczNq90T0AtiZEs00iYPHEP1mC94QVJKdbHo2Sy4ZYEDR6WhkFuTYgLRaW6YpZ0fsJYwn__r4IRSuVeFXxTNpkkyfBu9SqIQnrd1FbpJ510BHkOSCQ" alt="" width="375"><figcaption><p>~20%: 晴       ~40%: 薄曇         ~60%: 曇         ~80%: 雨        ~100%: 稲妻</p></figcaption></figure>

<table><thead><tr><th width="166" align="center">性能指標</th><th width="125" align="center">算出区間</th><th width="157" align="center">算出値</th><th align="center">合算方式</th></tr></thead><tbody><tr><td align="center"><strong>問題発生率平均</strong></td><td align="center">直近30分基準</td><td align="center">問題発生率</td><td align="center"><p>性能問題発生率</p><p>(基準値以上のデータ / 全データ)*100</p></td></tr><tr><td align="center"><strong>性能天気</strong></td><td align="center">直近30分基準</td><td align="center">問題発生率平均</td><td align="center">~20%, 5段階</td></tr></tbody></table>

{% hint style="info" %}
問題発生率平均と性能天気は最近30分間のWebサイトの全般的な性能を把握する場合に役立ちます。Webサイト単位での上位評価指標によって素早く性能を評価することができます。
{% endhint %}

### 3.4. 総合性能状況 <a href="#issue-rate" id="issue-rate"></a>

直近の30分間のページロード時間、レスポンスタイム、クラッシュの3つの性能指標の問題発生率がグラフで表示されます。「総合性能状況」は、1分毎に更新されます。

<figure><img src="https://lh7-us.googleusercontent.com/0EFPhwId9SGF7Np3MMP7QnwTSOTWfdTC1c0GPkIOH4p_gUKWwvIs3I0D1irt3HBj_Z9pPUF-1XZ3sehAtSGDzPv1Mu33MeW6WlnRbwxYiqPRtenO6WWYN0mUvcn7X5bru3-8AUe25IWoKvw110AQI_k" alt="" width="375"><figcaption></figcaption></figure>

* **問題発生率**  30m : 最近30分間の性能指標別の問題発生率を算出します。

<table><thead><tr><th width="166" align="center">性能指標</th><th width="125" align="center">算出区間</th><th width="157" align="center">算出値</th><th align="center">合算方式</th></tr></thead><tbody><tr><td align="center"><strong>クラッシュ</strong></td><td align="center">直近の30分</td><td align="center">問題発生率</td><td align="center">クラッシュ発生数 / 訪問数</td></tr><tr><td align="center"><strong>レスポンスタイム</strong></td><td align="center">直近の30分</td><td align="center">問題発生率</td><td align="center">(基準値以上のデータ / 全データ)*100</td></tr><tr><td align="center"><strong>ページロード時間</strong></td><td align="center">直近の30分</td><td align="center">問題発生率</td><td align="center">(基準値以上のデータ / 全データ)*100</td></tr></tbody></table>

{% hint style="info" %}
性能指標別基準値は、「管理 > プロジェクトプリセット」で設定することができます。
{% endhint %}

### 3.5. 時系列性能情報 <a href="#time-series" id="time-series"></a>

直近30分間ユーザー数、訪問数、クラッシュ発生数とページロード時間、レスポンスタイムの性能指標の下位5%の平均とすべての平均を時系列グラフで表示します。コアウェブバイタルの指標は、直近30分間の平均と最も性能が低下した時点の数値を表示します。性能が低下した区間や性能の変動推移を把握することができます。時系列性能情報は、1分毎に更新されます。<br>

#### 現在の利用者数&訪問数

最近30分間のユーザー数、訪問数を1分ごとに確認して比較することができます。「現在の利用者数&訪問数」は1分毎に更新されます。

<figure><img src="https://lh7-us.googleusercontent.com/H1CO_te7eDpKuwtE0IPd1KvCgRBXOUnFnlrcOEkfER70A69kLv7_E4k78XmDIknd2s4GlL0epVqdZQlmnZdNZ5c_jJ_OeqLd0JdGmLgmjl3AOMrM-6324DBmliCaWy1MOGrN6J9etp6fEVLJYm-1zZI" alt="" width="375"><figcaption></figcaption></figure>

* **利用者数**: 最近30分間のユーザー数を1分ごとにカウントします。重複を除いたユニークユーザーを意味します。
* **訪問数**: 最近30分間のWebサイトに接続した数をカウントします。ユーザーがWebサイトに接続し、開始したセッションの数を意味します。

#### クラッシュ <a href="#carsh" id="carsh"></a>

直近の30分間のWebクラッシュ発生数を1分間隔で確認することができます。「クラッシュ」は1分毎に更新されます。

<figure><img src="https://lh7-us.googleusercontent.com/qH--5SDLK0zU_qCElNN7IcIwZwgU1aioGhU4bqWjCV5ZBpR86Y9Wa7ObzpeMiUGZDVm8Dm1etBjUsWVW1pdmrlDOWvvBiGh_fUouIpmuemHJrvXs18zmhv4Is99bzh0L3wx_6qY0Nz-wXQO5SM8uSqo" alt="" width="375"><figcaption></figcaption></figure>

* **クラッシュ**Crash: 直近の30分間のWebクラッシュ発生数が1分間隔でカウントされます。

#### ページロード時間 <a href="#load" id="load"></a>

直近30分間個別ページまたはSPA方式で実装されたWebブラウザのアプリケーションで測定されたページのロード時間を1分おきに確認・比較することができます。下位5%の平均と全体平均が表示され、「ページロード時間」は1分毎に更新されます。

<figure><img src="https://lh7-us.googleusercontent.com/xGPS5AfMi39oM_aRrHRFiMqi7vye1vWIkub0PPMHHFosahAczo3dECdm15WB06R40uVClg4CddfNZyvbOhNV0UBASoDhM_Ib2gcMfngEuRMOQrFjhtI2M9abTXZLKbeWdnfCXI3-YjaeHVVO_1V5IEA" alt="" width="375"><figcaption></figcaption></figure>

* **下位5%**&#x50;95: 直近の30分間の下位5%のページロード時間が平均として算出されます。
* **平均**Avg: 直近の30分間の全体ページロード時間が平均として算出されます。

<table><thead><tr><th width="166" align="center">性能指標</th><th width="127" align="center">算出区間</th><th width="157" align="center">算出値</th><th align="center">合算方式</th><th align="center">単位</th></tr></thead><tbody><tr><td align="center"><strong>下位5%</strong></td><td align="center">直近の30分</td><td align="center">ページロード時間</td><td align="center">下位5%平均</td><td align="center">ms</td></tr><tr><td align="center"><strong>平均</strong></td><td align="center">直近の30分</td><td align="center">ページロード時間</td><td align="center">全体平均</td><td align="center">ms</td></tr></tbody></table>

グラフに記された横線は性能基準値です。これを通して基準値以上の性能問題があった時間と値を容易に確認することができます。

{% hint style="info" %}
Y軸はページロード時間を表します。下位5%はIMQAが収集した全データのうちロード時間が長かった順に整列され算出されます。 これを通して、平均的なページロード時間と一部のユーザーの状況を比較してみることができます。下位5%と平均の差が少ないほど、ほとんどのユーザーが似たようなWebサイト使用性を経験していると判断できます。
{% endhint %}

{% hint style="info" %}
ページのロード時間は基本的にHTMLのonloadイベントが発生し、ページ のロードが完了した時間を意味します。 SPA方式で実装された環境におけるページのロード時間の収集は、’[IMQA WPM/WCrashインストールガイド > \[WPM\] SPA専用オプション](https://docs.imqa.io/imqa-guide/jpn/installation/web-wpm-wcrash/gong-tong-webagent-she-ding#2-wpm-spaopushon)’を参考にしてください。
{% endhint %}

#### レスポンスタイム

直近の30分間のレスポンスタイムを1分間隔で確認することができます。下位5%と全体平均が表示され、「レスポンスタイム」は1分毎に更新されます。

<figure><img src="https://lh7-us.googleusercontent.com/_gvaetHrS_ZsKT6LXBc4Vi1nL8TXqwjFImPbYbxbvQYcwV7h783ZwsIyvpuYFTgu8QBvb8UiPsVFOsCH9k87MQCLiozXzs5PaVrwuaEgZMHRHKqxlTi-HE76Sx7sfXfyXHuRmmNcd_n29uvhc0TQGJs" alt="" width="375"><figcaption></figcaption></figure>

* **下位5%**&#x50;95: 直近の30分間の下位5%のレスポンスタイムが平均として算出されます。
* **平均**Avg: 直近の30分間の全体レスポンスタイムが平均として算出されます。

<table><thead><tr><th width="166" align="center">性能指標</th><th width="127" align="center">算出区間</th><th width="157" align="center">算出値</th><th align="center">合算方式</th><th align="center">単位</th></tr></thead><tbody><tr><td align="center"><strong>下位5%</strong></td><td align="center">直近の30分</td><td align="center">レスポンスタイム</td><td align="center">下位5%平均</td><td align="center">ms</td></tr><tr><td align="center"><strong>平均</strong></td><td align="center">直近の30分</td><td align="center">レスポンスタイム</td><td align="center">全体平均</td><td align="center">ms</td></tr></tbody></table>

グラフに記された横線は性能基準値です。これを通して基準値以上の性能問題が発生した時間と値を容易に確認することができます。

{% hint style="info" %}
下位5%は、IMQAが収集した全データのうちレスポンスタイムが長かった順に整列され算出されます。 &#x20;

これを通して、平均的にユーザーリクエストにかかったレスポンスタイムと一部の性能低下状況を比較してみることができます。レスポンスタイムが長かった場合は、特定の時間にネットワークまたはサーバーに問題が発生しなかったかを確認して、「総合性能状況」と連携して、どのような環境のユーザーに性能低下が生じたのかを分析することができます。
{% endhint %}

#### コアウェブバイタル

直近30分間のWebブラウザのアプリケーションで測定されたコアウェブバイタルの性能指標LCP、FID、CLSの30分の平均と最大値を確認することができます。すべての平均と1分の平均の最大値を表示し、「Core Web Vitals」は1分おきに更新します。

<figure><img src="https://lh7-us.googleusercontent.com/3elfDM_ONniiZCNty5eWTKmZ1g_daVLZs6hyrxjRds9eb8M4HE-6D-I6ph1CFxErOiZtbheNkvB4NeMqiS4RGJs4UbKDXM2NgP_vL9ydzQTiSdFMAy4TIz9gr5C-u7JFenUH4ypmaqnjk869gRKbMcg" alt=""><figcaption></figcaption></figure>

コアウェブバイタルは、以下のとおりに構成されています。

**❶ デバイスフィルタ**\
直近30分間収集されたコアウェブバイタル指標をユーザー環境を基準に分析することができます。基本的に「すべて」と設定されており、「Desktop」または「Mobile」でフィルタリングすることができます。基準を変更する際、次の平均と1分の最大値を更新します。

**❷ 平均** <mark style="background-color:yellow;">30m</mark> \
直近30分間収集されたコアウェブバイタルの各指標の数値を平均で算出します。Googleによる評価のガイドラインでは、各区間を色で表示します。

**❸ 1分の最大値**\
直近30分間収集されたコアウェブバイタルの各指標の数値のうち、最も性能が低下した時点の数値を表示します。Googleによる評価のガイドラインでは、各区間を色で表示します。

{% hint style="info" %}
コアウェブバイタルのLCP、FID、CLSは、Webサイトのロード時間、インタラクティブ性、視覚的な安定性の3つの要素を基準にWebサイトのユーザーエクスペリエンスを評価するGoogleによるWebの性能指標です。
{% endhint %}

<table><thead><tr><th width="139" align="center">コアウェブバイタル</th><th width="151" align="center">良好</th><th width="251" align="center">改善が必要</th><th align="center">不良</th></tr></thead><tbody><tr><td align="center"><strong>LCP</strong></td><td align="center">2,500ms 未満</td><td align="center">2,500ms 以上 4,000ms 以下</td><td align="center">4,000ms 超過</td></tr><tr><td align="center"><strong>FID</strong></td><td align="center">100ms 未満</td><td align="center">100ms 以上 300ms 以下</td><td align="center">300ms 超過</td></tr><tr><td align="center"><strong>CLS</strong></td><td align="center">0.1 未満</td><td align="center">0.1 以上 0.25 以下</td><td align="center">0.25 超過</td></tr></tbody></table>

### 3.6. ページ別性能状況 <a href="#pages" id="pages"></a>

直近の30分間にユーザーがアクセスしたページ別の性能状況を確認することができます。ページ別のユーザーアクセス率、各性能の問題発生率、下位5%と平均値をモニタリングすることができます。「ページ別性能状況」は1分毎に更新されます。

<figure><img src="https://lh7-us.googleusercontent.com/h3_poqhcAG96x-6c3g_-qCbngfNLqLOgZ3sesUkMRfgMnBCb54jnl1B6VHHD7vuPzeCbQ0R31jV5koNd8_L0nnd8pJfOmoqgNvausCyHr_2CVjvcJivtyMF_zOBTqL1IO55fbGXoMxbXBZFOkEr_I-E" alt=""><figcaption></figcaption></figure>

ページ別性能状況は、以下のとおりに構成されています。

❶ **性能指標**\
「ページロード時間」「レスポンスタイム」に性能指標を変更することができます。指標を変更すると、下に表示される「画面カード」に下位5%と平均値が更新されます。

❷ **画面のカードソーティング**\
基本的に「訪問率順」に設定されており、「訪問率順」、「問題発生率順」、「下位5%順」、「平均順」にソートすることができます。数値が高い順にソートします。

**❸ 概要**\
直近30分間、ユーザーが訪問したページ別の問題発生率を要約テキストの形で素早く確認することができます。

**❹ 画面カード**\
直近の30分間にユーザーがアクセスしたページ別のアクセス率、問題発生率、下位5%と平均値を確認することができます。

#### 総合ページ性能表 <a href="#summary2" id="summary2"></a>

直近の30分間にユーザーがアクセスしたページ別の各性能の問題発生率を速やかに確認することができます。右側にある\[総合ページ性能表]をクリックすると、ポップアップが表示されます。

<figure><img src="https://lh7-us.googleusercontent.com/0AcVcdzDUcEUc10Rje0UIzZH1NBz0Zmcq_xFoE8D3VKueBlBBa21tHAfmFv-YopN47PwHjJqcAsN43dXm1W7DX7KBuAwP-qJORgXioYZ7mAdKp5sjCAN1Y6cNEvzIrybs2k1Ulq1rKCT-HDufITr4BQ" alt=""><figcaption></figcaption></figure>

ページはアクセス率の高い順に整列され、「管理 > プロジェクトプリセット」で設定した基準値を超えるデータの比率が問題発生率で表示され、問題発生率によって危険度カラーで表しています。&#x20;

{% hint style="info" %}
これを通して、アクセス率の高いページにどのような性能低下が発生したのかを一目で確認することができます。また、Webサイトユーザーが平均的にページロードに問題を抱えているのか、リクエストに対するレスポンスが遅かったのかなど、性能低下の要因を分析することができます。
{% endhint %}

#### 画面カード

直近の30分間にユーザーがアクセスしたページ別のアクセス率、問題発生率、性能指標別の下位5%と平均値を確認することができます。選択したソート基準に従ってページがソートされ、画面カードをクリックすると、「ページ分析」ページへ移動します。

<figure><img src="https://lh7-us.googleusercontent.com/KoXRIFMUHHFzFS9NePMO4bfQSD7PRiwI1fAdwyV9Lv1KgzH8t2YXlVq1TsWF232X05giJWDeYgdAFtIx2KtLhHd85i4SwnNNB6zouK0qGb9reM5tiJoRxrn-n0ZpdtC1dAivsyeo-m1yO7Qipbju63E" alt=""><figcaption></figcaption></figure>

❶ **ページ情報**\
収集されたページの情報を表示します。URLパターンの設定によりパターンが適用された単位で表示されます。長いページ情報はマウスポインターを動かすと表示されるツールチップにより確認することができます。

❷ **画面の名前**\
ページの名前が表示されます。名前が長い場合は、カーソルを重ねると表示されるツールチップで確認することができます。画面の名前は、理解しやすいようIMQAで表示する名前に変更でき、「管理 > 画面管理」で変更することができます。

❸ **アクセス率/性能情報**\
直近の30分間に特定のページをアクセスした比率と性能基準によって下位5%と平均値が表示されます。&#x20;

{% hint style="info" %}
これを通して、アクセス率の高いページにどのような性能低下がどれほど発生したのかを一目で把握することができます。また、Webサイトユーザーの平均的な性能と、一部のユーザーの性能を比較してみることができます。問題が発見されたページは、「ページ分析」で性能低下の原因を詳細に分析することができます。
{% endhint %}

### 3.7. 性能下位リスト <a href="#bottom" id="bottom"></a>

#### クラッシュ上位6

直近の30分間に最も多く発生したWebクラッシュ6つが表示されます。クラッシュ数の高い順に整列され、クラッシュの名前が長い場合は、カーソルを重ねると表示されるツールチップで確認することができます。「上位クラッシュ」は、1分毎に更新されます。

<figure><img src="https://lh7-us.googleusercontent.com/G859Qd6ceflCsB34OIwtaphCO1rfb92SJqAU6BXnXTl_Hwl6lTA2osgrOVEuxNMNPKHLnAw2Uw2Rqt53ou6eOi7pi94IRnxhTssbD4ybGjn6Fb2JzrcEZoXMt6REp9glbhgZos7ETGaekCTtAjY-fBY" alt="" width="375"><figcaption></figcaption></figure>

* **クラッシュ名**: エラー名が表示されます。項目をクリックすると、そのクラッシュの「エラー詳細」ページへ移動することができます。
* **クラッシュ数** <mark style="background-color:yellow;">30m</mark>: 当該エラーの30分間の発生累積回数がカウントされます。
* **比率** <mark style="background-color:yellow;">30m</mark>: 30分間に発生したエラーのうち当該エラーが占める比率が表示されます。

#### レスポンスタイム下位6URL

直近の30分間に最もレスポンスタイムが遅かった6つのURLが表示されます。レスポンスタイムが高い順に整列され、URLが長い場合は、カーソルを重ねると表示されるツールチップで確認することができます。「上位ネットワークレスポンス」は1分毎に更新されます。

<figure><img src="https://lh7-us.googleusercontent.com/9R0cfuUJsFWpzQ6YrGYzvFYz4jKNFtxVztK484wF0RM5YAa4Jex2aRQ-vyOeBV8d9nWJMhevAh5Mp2rxhuam65eHw308j5rTxMwwI251rFqaocTigLTEfpBuGUZCKf9ae9Px44_2RLr2RycWLI3kqZw" alt="" width="375"><figcaption></figcaption></figure>

* **URL**: リクエストされたURLが表示されます。
* **リクエスト数**Number of calls: 当該URLの30分間のリクエスト累積回数がカウントされます。
* **レスポンスタイム**: 当該URLのレスポンスタイムが表示されます。

### 3.8. 最近発生通知 <a href="#alert" id="alert"></a>

直近の30分間に発生した基準値以上の問題についての通知が表示されます。通知は「通知 > 通知ポリシーリスト」で設定することができます。最近発生した通知順に整列され、「\[ポリシー名]の「性能指標」値が「危険度」です。」と表示されます。「最近発生通知」は1分毎に更新されます。

<figure><img src="https://lh7-us.googleusercontent.com/ueYxmXICeRbZsSVGype6W9mRcOU2ulm_VCBBDcZV_9VaH5ajkmEYbKmA36khKy3w4VGoIzjKi6GtKT1p11FwP-iXW-6tprJzQvxjBSlDKoseEaWtKK_o-Kv8AZeYmg2aFzyLSuaPDslJGM5JNojCMaY" alt="" width="375"><figcaption></figcaption></figure>

## 4. ページ分析 <a href="#pages2" id="pages2"></a>

IMQA WPMページ分析は、各ページの性能を30分単位で詳しく確認することができます。ページビュー数、平均の性能などのユーザーに関する情報と、各性能指標に関するヒートマップにより性能の分布や低下状況を詳しく分析することができます。さらに、特定ページを基準に収集されたコアウェブバイタルの評価の数値を確認し、低下の要因を分析することができます。

### 4.1. 概要 <a href="#overview3" id="overview3"></a>

<figure><img src="https://lh7-us.googleusercontent.com/hZNvyRfPjrGvkdfYHVpD8EYCENTqfIRgUE1Ro-UaexSZGtcvzO69BLR-yyKjCMw4ynpbW6Sw1VpPRNCf5JXqqMcAWD_a51ObdjGLetfk71Q4GXdkIZ-nYwyqm85AQLoZEkBYmNR0HPjTL8bckmDWYpE" alt=""><figcaption></figcaption></figure>

「ページ分析」メニューや「ダッシュボード」などにおいて特定画面のカードをクリックすると移動することができ、IMQA WPMページの性能分析は次のように構成されます。

**❶ ページ/分析時間**\
**❷ ページ性能情報**\
**❸ ページビュー数**\
**❹ コアウェブバイタル**\
**❺ 性能ヒートマップ**\
**❻ ウェブバイタル**

### 4.2. ページ/分析時間 <a href="#page-time" id="page-time"></a>

分析したいページと分析日や時間を変更することができます。変更すると、ページ性能分析情報が選択した基準で更新されます。基本設定は「ダッシュボード」でクリックした「ページ」「今日の日付」「現在の時間帯」に設定されており。

<figure><img src="https://lh7-us.googleusercontent.com/c5AAqf6eK1uJ79u4fcAsU8tHXD6mgDL2SvBd_HdnH9J_b6-_uYn2Njskfv9LKBC42Iyl6M4tCIJVXdlh_VnVvLTbWqN49hhh7rHFG2DZrcHqqv0onQLw5oy_in_Ma6EEOT3Yote552hEzdXKJIrSIDk" alt="" width="188"><figcaption></figcaption></figure>

<figure><img src="https://lh7-us.googleusercontent.com/pePKQYDLeSyLmd6tqMkgL2g5Y_N0EGcrQiViCecVTAopwCcVaoWDda_8wDi_VycBuO-lFmMdF_L2fsAM6aUaJgoQnZKK83TiLCr2_zuHEKyCajUuzjTN-9mJW-fRcSjA5Io3MZ8DChE0bUWE9WUIA9Y" alt=""><figcaption></figcaption></figure>

**❶ 分析日**\
基本設定は「今日の日付」で設定されており、\[<] \[>]をクリックすると、分析日を変更することができます。最大30日前まで選択することができます。

**❷ 選択した時間帯**\
選択した時間帯が表示されます。別の時間帯に変更することもできます。&#x20;

**❸ 現在の時間帯**\
「現在の時間」が含まれた時間帯が表示されます。

**❸ 凡例**\
各時間帯ごとに集計されたデータ数によって、タイムラインのカラー濃度が4段階で表示されます。&#x20;

<figure><img src="https://content.gitbook.com/content/QKKid2jVLL20moGjteZR/blobs/sN9ly5sYaWQcC2kdvYw0/image.png" alt="" width="563"><figcaption></figcaption></figure>

### 4.3. ページ性能情報 <a href="#page-performance" id="page-performance"></a>

30分間のページロード時間、レスポンスタイムの性能指標の下位5%平均と全体平均が表示されます。

<figure><img src="https://lh7-us.googleusercontent.com/utstf_nRJXvPLsYAmJU3utdMJnMdxg0Dhu3TrtrUCqbm85IC66aiP5sQS5uwwD34C5vVYC_H8wvHXedKajYNnod1RQ8VkV0XUV8d90tfpvSgtUWTAPqNVbj-ZiQVvNlwr1pKsZ9bsWmq6Eb7Y44rHgE" alt="" width="375"><figcaption></figcaption></figure>

{% hint style="info" %}
これを通して、特定のページにどのような性能低下が発生したのかを一目で確認することができます。また、Webサイトユーザーが平均的にページロードに問題を抱えているか、リクエストに対するレスポンスが遅かったのかなど、性能低下の要因を分析することができます。
{% endhint %}

### 4.4. ページビュー数 <a href="#views" id="views"></a>

30分間のページビュー数を確認できます。

<figure><img src="https://lh7-us.googleusercontent.com/qQKUcdvEkpoNOdP9TJE2U7Dm9bZFN_UYNafUcM9cq2hxWBxp_35V8G0IcYNkwuoEhRXlIRIxVXp7CGgZ0F2rRudjrvpn9uuR9OKc4UilGW2poc-BlqOSGg_lrotu5hMnE6k6hnWNpYW8W_cfdxxV9ho" alt="" width="375"><figcaption></figcaption></figure>

* **ページビュー数**: 30分間の当該ページのアクセス数がカウントされます。

### 4.5. コアウェブバイタル <a href="#core-web-vitals" id="core-web-vitals"></a>

30分間特定ページにおいて収集されたコアウェブバイタルの性能指標LCP、FID、CLSの30分の平均と評価の各区間の割合を確認することができます。

<figure><img src="https://lh7-us.googleusercontent.com/sBdx8BbFb96maAd9fkxDdrL1lVFJrNBtutrHBQ-nB-nmiD9ltNsY3IDcZfa8SYlL7qlpB1AsAR2Q9EWZh4csfHS2FTxW3mWRA7q9ra4H7Eexpdv8kkDJfgMtfv_J93eEqPprIuicvZsrhPY8iEtu6Ns" alt="" width="375"><figcaption></figcaption></figure>

コアウェブバイタルは、以下のとおりに構成されています。

**❶ デバイスフィルタ**\
30分特定ページにおいて収集されたコアウェブバイタル指標をユーザー環境を基準に分析することができます。基本的に「すべて」と設定されており、「Desktop」または「Mobile」でフィルタリングすることができます。基準を変更する際、次の平均と評価の各区間の割合を更新します。

**❷ 平均** <mark style="background-color:yellow;">30m</mark> \
30分特定ページにおいて収集されたコアウェブバイタルの各指標の数値を平均で算出します。Googleによる評価のガイドラインでは、各区間を色で表示します。

**❸ 評価の各区間の割合**\
30分特定ページにおいて収集されたコアウェブバイタルの各指標の数値をGoogleによるガイドラインの評価区間である<mark style="color:blue;">良好</mark>、<mark style="color:orange;">改善が必要</mark>、<mark style="color:red;">不良</mark>の評価区間別にカウントします。

{% hint style="info" %}
コアウェブバイタルのLCP、FID、CLSは、Webサイトのロード時間、インタラクティブ性、視覚的な安定性の3つの要素を基準にWebサイトのユーザーエクスペリエンスを評価するGoogleによるWebの性能指標です。
{% endhint %}

<table><thead><tr><th width="139" align="center">コアウェブバイタル</th><th width="151" align="center">良好</th><th width="251" align="center">改善が必要</th><th align="center">不良</th></tr></thead><tbody><tr><td align="center"><strong>LCP</strong></td><td align="center">2,500ms 未満</td><td align="center">2,500ms 以上 4,000ms 以下</td><td align="center">4,000ms 超過</td></tr><tr><td align="center"><strong>FID</strong></td><td align="center">100ms 未満</td><td align="center">100ms 以上 300ms 以下</td><td align="center">300ms 超過</td></tr><tr><td align="center"><strong>CLS</strong></td><td align="center">0.1 未満</td><td align="center">0.1 以上 0.25 以下</td><td align="center">0.25 超過</td></tr></tbody></table>

### 4.6. 性能ヒートマップ <a href="#heatmap" id="heatmap"></a>

各性能指標に対するヒートマップを通して、性能分布と性能低下状況を詳細に分析することができます。

#### ページロード時間 <a href="#load2" id="load2"></a>

&#x20;30分間個別ページまたはSPA方式で実装されたWebブラウザのアプリケーションで測定されたページのロード時間を確認することができます。Webページを基準にヒートマップが表示されます。セルにカーソルを重ねると、「分析日 | 分析時間 | データ数 | 性能区間」のツールチップが表示されます。ヒートマップエリアで特定のセルをクリックしたり、マウスドラッグで区間を選択すると、「ページロード時間分析」のポップアップが表示されます。

<figure><img src="https://lh7-us.googleusercontent.com/h4XhVyDXTPUeM4wI7WZhgi7TvZ-TBEZ9SXNE94uym7xvJ0zfIzevOyifmvQ7ADJ1SOWnEwq32Ld2FXowLcxztR5RHr6nZ-9bbrIkjtRbck48Ayrw-3wvs9y5MSWZ26Ac_j1cRrPGIcnR_ZkcwLNmjFc" alt=""><figcaption></figcaption></figure>

* **ページロード時間**: 当該HTMLページがonloadイベントを発生する時点またはDOMの変更によるロード時間を区間で算出します。
* **凡例**: 基準値以上の区間は<mark style="color:red;">赤</mark>、未満は<mark style="color:blue;">青</mark>で表示され、同じ時間の軸に集計されたデータ比率によってカラー濃度は3段階で表示されます。&#x20;

<figure><img src="https://2952799970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQKKid2jVLL20moGjteZR%2Fuploads%2FBaq5olRLk38RyDYfqGNL%2Fimage.png?alt=media&#x26;token=580ed673-dd61-430c-9342-643deba01287" alt=""><figcaption></figcaption></figure>

#### レスポンスタイム

30分間に当該ページでリクエストしたHTTPレスポンスタイムを確認することができます。セルにカーソルを重ねると、「分析日 | 分析時間 | データ数 | 性能区間」がツールチップに表示されます。ヒートマップエリアで特定のセルをクリックしたり、マウスドラッグで区間を選択すると、「レスポンスタイム詳細」ポップアップが表示されます。

<figure><img src="https://lh7-us.googleusercontent.com/DmDGtDd2Mr30M15NyGTH1EVmdhbc5fkmDplJQDjlA00BzJIi0q4pFvnuUYiWK8jjK7E8nYe6p0lByhQJNt3EbwqvZZjJFBQLYzOzUUZ_UzNLV2S2TsroDvEZAzjKnGW5wQBMKAKFByIqjr-OES3xJKg" alt=""><figcaption></figcaption></figure>

* **レスポンスタイム**: HTTPレスポンスタイムが区間で算出されます。
* **凡例**: 収集されたHTTP情報でレスポンスコードが4xx番台・5xx番台の場合は赤、その他のレスポンスコードは青で表示され、同じ時間の軸に集計されたデータ比率によってカラー濃度が3段階で表示されます。

<figure><img src="https://2952799970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQKKid2jVLL20moGjteZR%2Fuploads%2F1O5fRBZRbeNoDZPk5Xoh%2Fimage.png?alt=media&#x26;token=f37422a7-ee2b-467f-b227-951142df5d7d" alt=""><figcaption></figcaption></figure>

### 4.7. ウェブバイタル <a href="#vitals" id="vitals"></a>

ウェブバイタルの各指標の性能分布とウェブバイタルの数値に影響を与える多様な関連情報をいっしょに確認することができます。これによりウェブバイタルの評価に最も影響力の高い要因を分析、評価・改善することができます。

#### LCP 分布 / LCP 関連情報

<figure><img src="https://lh7-us.googleusercontent.com/CsWleeAKiCOeRxhwlV1uBV2wbOcOwvJQRLfFsnYhAYj3IAfGuDfGivwULwitjA8R__0FTwXyDzoVJE9YthtG8b7CApHjnWE5f0C2obtrUWQlqQyREednVXAtJg8Gg9XTVO-zxIhPOkizILn8jPJ0ZEk" alt=""><figcaption></figcaption></figure>

**LCP 分布グラフ**\
30分間の特定ページにおいて収集されたLCPのデータ分布をヒストグラムで表示します。ヒストグラムは、階級を横軸に、度数を縦軸に表示しますが、集計されたデータをいくつかの区間を決めて階級を作り、各階級に属するデータの数で度数を表示します。ヒストグラムは、すべての集団における分布状況を把握し、または比較するときに便利です。Googleによる評価のガイドラインでは、各区間を色で表示します。

<table><thead><tr><th width="122" align="center">ウェブバイタル</th><th width="152" align="center">良好</th><th align="center">改善が必要</th><th width="132" align="center">不良</th><th align="center">Y軸</th></tr></thead><tbody><tr><td align="center"><strong>LCP</strong></td><td align="center">2,500ms 未満</td><td align="center">2,500ms 以上 4,000ms 以下</td><td align="center">4,000ms 超過</td><td align="center">収集されたデータ数</td></tr></tbody></table>

#### **L**CP 関連情報 <a href="#lcp3" id="lcp3"></a>

30分間特定ページにおいて収集されたLCPの数値に影響を及ぼす様々な関連情報をいっしょに確認することができます。これによりLCPの評価に最も影響力の高い要因を分析、評価・改善することができます。

* **Element**: 最大のコンテンツ要素であるdocument objectの情報と割合を表示します。
* **Screen Resolution**: 当該ページを閲覧したユーザーの画面の解像度情報と割合を表示します。

{% hint style="info" %}
LCPは、ページのロード中、ユーザーのビューポートにおいて最大のコンテンツ要素が表示される時間を測定します。ページの主要コンテンツの確率が高く、LCPが速い場合、ユーザーがページを使えると認識するのに役立ちます。画像リソースの最適化や各ユーザー環境のリソースの管理に効果的です。LCPは、2,500ms以内を目標に改善することを推奨します。
{% endhint %}

#### FID 分布 / FID 関連情報 <a href="#fid1" id="fid1"></a>

<figure><img src="https://lh7-us.googleusercontent.com/Vqd6_-iCTJfJx1-UcjrVLgD_DWNunBG3Y2WVxYzKzET_s9kQxkRMdXhyNGx_zQpZBao0_hVzalii28MASykYpXObdn3ERlVnTBU4aAQVBDxoUqC83L8Fk6PVQTMoV3E7ba7W_TqjKEiFPA5Ys8Zk6ww" alt=""><figcaption></figcaption></figure>

**FID 分布グラフ**\
30分間の特定ページにおいて収集されたFIDのデータ分布をヒストグラムで表示します。ヒストグラムは、階級を横軸に、度数を縦軸に表示しますが、集計されたデータをいくつかの区間を決めて階級を作り、各階級に属するデータの数で度数を表示します。ヒストグラムは、すべての集団における分布状況を把握し、または比較するときに便利です。Googleによる評価のガイドラインでは、各区間を色で表示します。

<table><thead><tr><th width="113" align="center">ウェブバイタル</th><th width="124" align="center">良好</th><th width="205" align="center">改善が必要</th><th width="127" align="center">不良</th><th align="center">Y軸</th></tr></thead><tbody><tr><td align="center"><strong>FID</strong></td><td align="center">100ms 未満</td><td align="center">100ms 以上 300ms 以下</td><td align="center">300ms 超過</td><td align="center">収集されたデータ数</td></tr></tbody></table>

#### FID 関連情報 <a href="#fid3" id="fid3"></a>

30分間特定ページにおいて収集されたFIDの数値に影響を及ぼす様々な関連情報をいっしょに確認することができます。これによりFIDの評価に最も影響力の高い要因を分析、評価・改善することができます。

* **Event**: 最初にインタラクティブ性が発生したときのイベントを表示します。
* **Screen Resolution**: 当該ページを閲覧したユーザーの画面の解像度情報と割合を表示します。

{% hint style="info" %}
FIDは、ページのロード中、ユーザーがページと最初にインタラクティブ性が発生したイベントの処理遅延時間を測定します。FIDが速いと、ユーザーがインタラクティブ性と応答性に対して良い印象を持つことができます。Javascriptなどリソースの最適化やTaskを細分化する戦略が効果的かもしれません。FIDは100ms以内を目標に改善することを推奨します。
{% endhint %}

#### CLS 分布 / CLS 関連情報 <a href="#cls1" id="cls1"></a>

<figure><img src="https://lh7-us.googleusercontent.com/g0fDYh49C3-i43jgAMLnNGR58uWqeZEi-hmE2GASD2-rfzE08Jm8Pd7tOufwaSBuVser7TCK8cGIHgE0sqaUKm31d-A9hb4jFvSkAKm0FyQUgSgioYr_d5XAgU0SvjUNpdKnXpOnnGdmbS0PPQxtzj8" alt=""><figcaption></figcaption></figure>

**CLS 分布グラフ**\
30分間の特定ページにおいて収集されたCLSのデータ分布をヒストグラムで表示します。ヒストグラムは、階級を横軸に、度数を縦軸に表示しますが、集計されたデータをいくつかの区間を決めて階級を作り、各階級に属するデータの数で度数を表示します。ヒストグラムは、すべての集団における分布状況を把握し、または比較するときに便利です。Googleによる評価のガイドラインでは、各区間を色で表示します。

<table><thead><tr><th width="113" align="center">ウェブバイタル</th><th width="124" align="center">良好</th><th width="205" align="center">改善が必要</th><th width="127" align="center">不良</th><th align="center">Y軸</th></tr></thead><tbody><tr><td align="center"><strong>CLS</strong></td><td align="center">0.1 未満</td><td align="center">0.1 以上 0.25 以下</td><td align="center">0.25 超過</td><td align="center">収集されたデータ数</td></tr></tbody></table>

#### **C**LS 関連情報 <a href="#cls3" id="cls3"></a>

30分間特定ページにおいて収集されたCLSの数値に影響を及ぼす様々な関連情報をいっしょに確認することができます。これによりCLSの評価に最も影響力の高い要因を分析、評価・改善することができます。

* **Element**: レイアウトの切り替えが発生したときに移動したobject情報と割合を表示します。
* **Screen Resolution**: 当該ページを閲覧したユーザーの画面の解像度情報と割合を表示します。

{% hint style="info" %}
CLSは、ページのロード中、予想外のレイアウトの切り替えの経験を点数で測定し、合算します。CLSが低いと、ユーザーが視覚的な安定性に対する良い印象を持つことができます。ユーザーの各環境のリソース管理や動的コンテンツの処理方法の検討などが効果的かもしれません。CLSは0.1以内を目標に改善することを推奨します。
{% endhint %}

## 5. 性能詳細分析 <a href="#performance" id="performance"></a>

IMQA WPM性能詳細分析は、「ページ分析」「区間分析」ページの性能ヒートマップを通して確認できる機能です。性能ヒートマップで特定のセルを選択したり、マウスドラッグで区間を選択すると表示されます。性能詳細分析では、ページロード時間分析、詳細レスポンス分析を実行できます。これを通して、性能の問題点または問題となる区間を把握することができます。また、ユーザーの行動分析機能により性能問題が発見されたWebサイトのユーザーがどのような移動パスで利用したか、すべての行動フローを確認することができます。

### 5.1. ページロード時間詳細 <a href="#load-analysis" id="load-analysis"></a>

<figure><img src="https://lh7-us.googleusercontent.com/2lvtI0UJDbSxcSQZNSteptpsDYzT9recbpGegDev7wi1JjcoFnNgOSACTAYqdgQE3_9f1dp5cBU_SO5yvKATBAITUOVmOhMVAbOIBbWckyBqv8Dy8xw9-Cm77-EQdnSvj4ydpTQdP1j5ApfI7efyl9o" alt=""><figcaption></figcaption></figure>

HTMLページがonloadイベントを発生する時点またはSPA方式で実装されたWebブラウザのアプリケーションで測定されたページのロード時間を確認することができます。までのデータを収集します。CSS、Javascript、Imageなどのリソースをリクエストするときにかかる時間、FP、FCP、DCLなどのタイミング情報、LCP、LS、FIDのウェブバイタル性能指標も表示されます。そのため、ユーザーはウェブページのload時点までどのような外部リクエストがあったのかを把握でき、ページをロードすると遅くなるボトルネック区間を正確に判断することができます。

#### デバイス情報リスト <a href="#list1" id="list1"></a>

「ページ分析」「区間分析」性能ヒートマップで選択したエリアのデバイス情報です。ページ、デバイス、OS、ブラウザ、ブラウザバージョン、ページロード時間、ユーザー数についての情報がリスト形式で表示されます。詳細分析に入ると、まず最初に最上部にあるデバイス情報が下のタイムラインに表現されています。他のタイムラインを確認したい場合は、他のデバイス情報を選択すると確認することができます。同一条件でグルーピングされたデバイスの場合、最も遅い数値のユーザー パフォーマンス情報を照会します。

* **ページ**: 選択した時間帯と区間のページを表示します。
* **デバイス**: ユーザーが接続したOSにより、「Desktop」と「Mobile」に分類して表示されます。&#x20;
* **OS**: ユーザーが接続しているOSを表示します。
* **ブラウザ/バージョン**: ユーザーが接続したブラウザとバージョンを表示します。
* **ページロード時間(ms)**&#x30E6;ーザーによるページのロード時間を表示します。同じ条件でグループ化された項目の場合、平均で算出します。
* **ユーザー数**: 当該件数を表示します。同じ条件で集計されたデータ数を意味します。&#x20;

{% hint style="info" %}
ユーザー情報はWebサイトにアクセスしたとき、ユーザーのUser-Agent情報に基づいて表示します。IMQA WPMは、ユーザーが主に使用するOSとブラウザに大別されます。 OSの場合、「Windows」 「macOS」 「Android」 「iOS」 「Linux」などに区別されます。 ブラウザの場合、「Chrome」 「Safari」 「Microsoft Edge」 「Firefox」 「Samsung Browser」などに区別されます。 特定されていないOSやブラウザの場合、「Unknown」で表示されることがあります。
{% endhint %}

#### ユーザーの行動分析 <a href="#user1" id="user1"></a>

デバイス情報一覧から選んだデバイスのユーザーが、 どのようなWebサイトを利用したか、連携して追跡・照会することができます。性能低下があったデバイスの性能情報を確認し、性能低下現象の発生前後の原因を分析することができます。\[ユーザー行動分析]ボタンをクリックすると、そのデバイスユーザーのセッションの開始～セッションの終了までの画面フローを「行動分析」ページから確認することができます。

<figure><img src="https://lh7-us.googleusercontent.com/QkGeEdSViezAdHGutMLKpk4b8t6ZEXY6_aKjqv0NxfnvxE8pT58y_qb5Y00sEoiO27AqkJzuu0FyxUJ4zUJ1EmlBRbc97eBE7ebV3mC2JoIaBGiceNFVGllCCfVWtYnP5nZY60WHZRmrOZkv8Hvr_HI" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
性能の詳細分析～ユーザーの行動分析は「[IMQA WPMユーザーガイド > 6.トレースバック行動分析](#user-analysis)」を参考にしてください。
{% endhint %}

#### 要約情報 <a href="#info1" id="info1"></a>

<figure><img src="https://lh7-us.googleusercontent.com/PJEGUnu-qTCERe4TL99SmJqGWnP7d3Iyz-_QBx1GuTIz7QHhBjcA0AhiEZZpYF4C_ZEfeWdBDeBBNrHkVoKTP37k3TSgWDtCRsnc6SDJ55bJbdXI1sKnonbPM8uFvyFTQc8pI_VyVsXh1W8ZV9GgnPA" alt=""><figcaption></figcaption></figure>

選択したデバイスユーザーのDocumentにおける平均のネットワーク/サーバー/DOM/ロード時間を要約・表示します。コアウェブバイタルの指標であるLCP/FID/LSが発生した場合、数値情報をKPIで表示します。Googleによる評価のガイドラインでは、各区間を色で表示します。

#### 性能プロファイリング

性能解析により選択したデバイスユーザーのWebページのロード中、CSS、Javascript、Imageなどのリソースをリクエストにかかるネットワーク時間とFMP、FCP、DCL、LCP、FID、LSなどウェブバイタルのタイミング情報をいっしょに確認することができます。

<figure><img src="https://lh7-us.googleusercontent.com/2lvtI0UJDbSxcSQZNSteptpsDYzT9recbpGegDev7wi1JjcoFnNgOSACTAYqdgQE3_9f1dp5cBU_SO5yvKATBAITUOVmOhMVAbOIBbWckyBqv8Dy8xw9-Cm77-EQdnSvj4ydpTQdP1j5ApfI7efyl9o" alt=""><figcaption></figcaption></figure>

#### 性能プロファイリング - ツールバー <a href="#tool-bar" id="tool-bar"></a>

ツールバーでは、性能解析機能のガイドを見たり、ネットワーク項目のキーワード検索とリソースタイプでフィルタリングすることができます。

<figure><img src="https://lh7-us.googleusercontent.com/nLOmQvi0MbdrxWa23swsHRl6pDx_iPuR8wrC0z9xMoGYss-WYtRx8t4JlKsxyEsph82QRdtyMuegnUX3bY-wlHlXWssh7gZvqlk6yA1In9AIvElKextCr4laW-YWbXY4vMAqi8uu7fccIMpT_IXF_XU" alt=""><figcaption></figcaption></figure>

**❶ 機能ガイドを見る**\
性能解析のコア機能を確認することができます。クリックすると、機能ガイドのポップアップを表示します。

**❷ 検索**\
ネットワークセクションに表示されるリソース項目をキーワード検索でフィルタリングすることができます。

<figure><img src="https://lh7-us.googleusercontent.com/DKKc8Ob5Ab_8RqFkX10TMxtYVnsRO6_5cMQOz7vHldIPTRcTR1q4tT9h4g5FWMRP5InWQVkI2qNLjfJR1RCfzjcZET05y8HzoM0TNbebKCmhpBm61C8PC06XiwM4hH1LvINhllNa0H0FSXJwSeolROA" alt=""><figcaption></figcaption></figure>

**❸ リソースタイプのフィルタリング**\
ネットワークセクションに表示されるリソース項目をタイプ別にフィルタリングすることができます。

* **すべて**:基本的に「すべて」と設定されており、すべてのタイプのリソース項目を表示します。
* **HTML**: リソースタイプが「document」の項目を表示します。
* **CSS**: リソースタイプが「css」などの項目を表示します。
* **Media**: リソースタイプが「img」、「video」、「media」などの項目を表示します。
* **JS**: リソースタイプが「script」の項目を表示します。
* **Others**:  その他のリソースタイプ項目を表示します。

#### 性能プロファイリング - オーバービュー/ナビゲーション <a href="#over-view" id="over-view"></a>

オーバービュー/ナビゲーションセクションでは、Webページのロードまでのネットワーク、スクリプトの過程でのボトルネックを一覧形式で確認することができます。ボトルネック区間を確認し、オーバービュー領域をドラッグして当該区間を選択することで詳しく見たり、左右のマウス操作で区間を素早く探索することができます。

① オーバービューは基本的に全体区間で設定されており、リソースのリクエストと応答、スクリプトの過程で収集された要素が同じ色で表示されます。同じ時間軸に重なった要素が多ければ多いほど、グラフは高く表示されます。

② 性能解析領域において目立つ区間があれば、オーバービュー領域をドラッグし、その区間を詳しく確認することができます。

<figure><img src="https://lh7-us.googleusercontent.com/2GK-FN9_2Pw14emQ8NCnizQ5DP6Pg1d1ffjK9yXY0ioNhhQjxnxl6xtlgCCqjtHq195pP-0sM06xMjWMy9Pgj3CAW2v6QwGq_5wV86zbxka1l0bmalRMpMJKLsPCYK1QUo3icl3ExVAngvNJfV0vBFM" alt=""><figcaption></figcaption></figure>

#### 性能プロファイリング - タイミング/ウェブバイタル

Webページのロード中に収集されたタイミング情報とウェブバイタルの性能指標を確認することができます。コアウェブバイタルの場合、関連情報をいっしょに表示します。収集するタイミング情報は次の通りです。オーバービュー領域の下に表示されたマーカーにより確認することができます。

<figure><img src="https://lh7-us.googleusercontent.com/WZx0iHggo0lcRiTyyHCk8PtHANyLUUEp0sSsPzuJS5KhYsJLE_GtkRHLfbipfPxqk0shhAEpMxJXxb03_SIpWz7mfsC18iNq7C_ynbnfmzQTOszR9EaqddvgCuScCZ2skJLiia6RqbnXk1sHysDRKJ4" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="94.33333333333331" align="center">表示</th><th width="197" align="center">ラベル</th><th align="center">説明</th></tr></thead><tbody><tr><td align="center"><mark style="background-color:green;">FP</mark></td><td align="center">First Paint</td><td align="center">FPはブラウザが探索前に画面にあったものと視覚的に異なるものでも、最初のビットをレンダリングするときの地点です。</td></tr><tr><td align="center"><mark style="background-color:red;">FCP</mark></td><td align="center">First Contentful Paint</td><td align="center">FCPは最初のコンテンツ(テキスト、画像など)がレンダリング完了時点です。</td></tr><tr><td align="center"><mark style="background-color:blue;">DCL</mark></td><td align="center">Dom Content Loaded</td><td align="center">DCLイベントは、最初のHTML文書が完全にロード及びパーキングされた時に発生し、スタイルシートやイメージ及びサブフレームロードが終わるのを待ちません。</td></tr><tr><td align="center"><mark style="background-color:orange;">LOAD</mark></td><td align="center">Onload</td><td align="center">onloadイベントは、最初のHTML文書や画像などのコンテンツが、完全にロードが完了する時点です。</td></tr></tbody></table>

収集するウェブバイタル情報は以下の通りです。オーバービュー領域の下に表示されたマーカーにより確認することができます。

<figure><img src="https://lh7-us.googleusercontent.com/vgJj__nBxgYlPDnHIj3KGN6dOBv_VaEQgJhYnAK5pdmz5DMzFw0QTFqBLEX6alc3j7hLDTKAO3c7EdcFUPJodhZzH6vHzL5jxKFgvtHbE_YxJ3nNqClxpAL2qr2Ogc0t76i5SutlE0g6lm4GNAVlivM" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="94.33333333333331" align="center">表示</th><th width="197" align="center">ラベル</th><th align="center">説明</th></tr></thead><tbody><tr><td align="center"><mark style="background-color:green;">LCP</mark></td><td align="center">Largest Contentful Paint</td><td align="center">LCPはページのロード中、ユーザーのビューポートにおいて最も大きなコンテンツ要素が表示される時点です。</td></tr><tr><td align="center"><mark style="background-color:blue;">FID</mark></td><td align="center">First Input Delay</td><td align="center">FIDはページのロード中、ユーザーがページとはじめてインタラクティブ性が発生したイベントの処理時点です。</td></tr><tr><td align="center"><mark style="background-color:blue;">LS</mark></td><td align="center">Layout Shift</td><td align="center">LSはページのロード中、予想外のレイアウトの切り替えが起きた時点です。</td></tr></tbody></table>

{% hint style="info" %}
タイミング情報により、Webページのロード中、重要な時点に関する情報を確認することができます。例えば、素早いFPとFCPは、ユーザーにWebページが素早く応答しているという印象を与えることができます。 コアウェブバイタルのLCP、FID、CLSは、Webサイトのロード時間、インタラクティブ性、視覚的な安定性の3つの要素を基準にWebサイトのユーザーエクスペリエンスを評価するGoogleによるWebの性能指標です。
{% endhint %}

ウェブバイタルの性能指標の場合、ウェブバイタルの数値に影響を及ぼす様々な関連情報をいっしょに確認することができます。これによりウェブバイタルの評価に最も影響力の高い要因を分析、評価・改善することができます。

* **LCP Element**: 最大のコンテンツ要素であるdocument objectを表示します。
* **FID Event**: 最初にインタラクティブ性が発生したときのイベントを表示します。
* **FID Delay**: 最初にインタラクティブ性が発生したときのイベントを表示します。
* **LS Element**: レイアウトの切り替えが発生したときに移動したobjectを表示します。
* **LS Score**: レイアウトの切り替えのとき、移動したobjectの移動点数を表示します。
* **Viewport**: 当該ユーザーのビューポートサイズを表示します。&#x20;
* **\<meta>**: 当該ユーザーが読み込んだdocumentのheadタグの中のmeta viewportタイプの値を表示します。

{% hint style="info" %}
性能詳細分析のウェブバイタル関連情報により、選択した個別ユーザーの実際の利用環境とウェブバイタルの評価を比較・分析することができます。特定ユーザー環境においてウェブバイタルの評価が良くないということは、Webサイトが当該ユーザーの環境に最適化されていないことを意味します。Webブラウザのアプリケーションの目標性能を設定するための改善指標として活用してください。
{% endhint %}

#### 性能プロファイリング - ネットワーク <a href="#network" id="network"></a>

HTML Documentそのものと各リソースのリクエストと応答にかかった時間をWaterfallチャートで確認することができます。 DocumentのすべてのDOMが描かれ、ロードされる過程において確認できる情報は、次の通りです。Document requestの要素にマウスポインターを動かすと表示されるツールチップにより確認することができます。

<figure><img src="https://lh7-us.googleusercontent.com/7GqfQh6FTGzDWBTYXOzALaotZ1Dp32fCeHgAm_xz9J0sOOpbn_mmG_FjKQx1L34dDjWNd1ytHeR7VayP4fBEBETBdKgXQBwazRLgXTl67PoePn8Sqq1B3cU3Bj5yK6_Z5Ac22gFGgyZyILXboAfON6Q" alt=""><figcaption></figcaption></figure>

* **Request Type**: リソースタイプを表示します。
* **Request URL**: 当該ユーザーがアクセスした原始URL情報を表示します。
* **各区間の性能情報**:

<table><thead><tr><th width="139.4" align="center">表示</th><th width="236" align="center">ラベル</th><th align="center">説明</th></tr></thead><tbody><tr><td align="center"><strong>◻︎</strong></td><td align="center"><strong>待機 (Wait)</strong></td><td align="center">リクエスト前の待ち時間</td></tr><tr><td align="center"><mark style="color:orange;"><strong>◼︎</strong></mark></td><td align="center"><strong>ネットワーク</strong></td><td align="center">ネットワーク探索および接続時間</td></tr><tr><td align="center"><mark style="color:purple;"><strong>◼︎</strong></mark></td><td align="center"><strong>サーバー</strong></td><td align="center">サーバーから要請を処理した時間</td></tr><tr><td align="center"><mark style="color:green;"><strong>◼︎</strong></mark></td><td align="center"><strong>DOM</strong></td><td align="center">HTML解析およびDOM構築時間</td></tr><tr><td align="center"><mark style="color:blue;"><strong>◼︎</strong></mark></td><td align="center"><strong>ローディング</strong></td><td align="center">表示されるローディング時間</td></tr><tr><td align="center"><mark style="color:yellow;"><strong>◼︎</strong></mark></td><td align="center"><strong>コンテンツダウンロード</strong></td><td align="center">画面が描かれる時間</td></tr></tbody></table>

各リソースについて確認できる情報は以下のとおりです。 各リソースタイムラインにマウスポインタを上げると表示されるツールチップで確認できます。

<figure><img src="https://lh7-us.googleusercontent.com/ATjKEktNE3qcF_1A64q-QozS58CBJ2n7sSXStz7BFbhHfDihYTlAZ_3qnSC29Fpy17ECNf0EbLclnTI_LH9tVHp5jm-lXnJdDV2WoE3pNOZJJk6r1M9XmPTQjMAYL6z7-kjI06ySSr5Zo8HGlqBvfn0" alt=""><figcaption></figcaption></figure>

* **Request Type**: リソースタイプを表示します。
* **Request URL**: リソースのリクエストのURL情報を表示します。
* **各区間の性能情報**:

<table><thead><tr><th width="150" align="center">表示</th><th width="150" align="center">ラベル</th><th width="418.34426229508193" align="center">説明</th></tr></thead><tbody><tr><td align="center"><strong>◻︎</strong></td><td align="center"><strong>Waiting</strong></td><td align="center">リクエストの前に待機する時間</td></tr><tr><td align="center"><strong>︎◼︎</strong></td><td align="center"><strong>Redirect</strong></td><td align="center">HTTP リダイレクトの実行時間</td></tr><tr><td align="center"><mark style="color:blue;"><strong>◼︎</strong></mark></td><td align="center"><strong>Fetch</strong></td><td align="center">リクエストの前に待機する時間またはキャッシュ照会時間</td></tr><tr><td align="center"><mark style="color:purple;"><strong>◼︎</strong></mark></td><td align="center"><strong>DomainLookup</strong></td><td align="center">ドメインに該当するIPをDNSにおいて検索する時間</td></tr><tr><td align="center"><mark style="color:green;"><strong>◼︎</strong></mark></td><td align="center"><strong>Connect</strong></td><td align="center">サーバー接続にかかった時間</td></tr><tr><td align="center"><mark style="color:green;"><strong>◼︎</strong></mark></td><td align="center"><strong>Request sent</strong></td><td align="center">サーバーにリソースをリクエストする時間</td></tr><tr><td align="center"><mark style="color:green;"><strong>◼︎</strong></mark></td><td align="center"><strong>Response</strong></td><td align="center">サーバーの応答時間</td></tr></tbody></table>

#### 性能プロファイリング - スクリプト実行 <a href="#script" id="script"></a>

ページのロード中、ダイナミックレンダリングする要素のスクリプト実行時間を測定することができます。レンダリング過程で実行される関数を定義し、スクリプトの実行にかかった時間をFlameGraphで確認することができます。

<figure><img src="https://lh7-us.googleusercontent.com/Bxerp3xOXt693V5LKitE6iIoaUdSdK85ydEKVRJH6MPnuBfortNcsmvh7iHOy_6wSOSBW5EpB8OesaKlVmJ6eeHFllxWaiysfuFuDDJ_KQ1l3cwi_lTjtgUZU5BKmIanPk4qE6mfA05voK9PXiygW0U" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
ページのロード過程において、特定のJavaScriptの実行時間を測定したり、AがBを、BがCを実行するなどの構成においてスクリプトの実行時間を確認し、非効率的に構成されたコードを改善することができます。スクリプト実行時間の測定は、「[IMQA WPM/WCrashインストールガイド > スクリプトの実行時間の測定](https://docs.imqa.io/imqa-guide/jpn/installation/web-wpm-wcrash/gong-tong-webagent-she-ding#4-wpm-sukuriputonono)」を参考にしてください。
{% endhint %}

### 5.2. レスポンスタイム詳細 <a href="#detail" id="detail"></a>

IMQA WPM は、HTTPレスポンスタイムとレスポンスコードを収集するため、クライアントからのHTTPリクエストを分析することができます。

ブラウザで収集されたHTTP情報はms単位で収集され、HTTPヘッダ情報とレスポンスコードが表示されます。これを利用して、特定のURLで発生するレスポンスタイム分析、エラーコードが発生するURLなどを把握することができます。

<figure><img src="https://lh7-us.googleusercontent.com/dTOC22632bu2VO_cb3bhhwGAAIdX04t8fIy7NIMOlkDFzOlF7gp5hnjXDvykdyeaxqYwcuQqRPhW50px6KXKTxOt4tVbIkX23mC6noAP7SHp2e3-wy_W4O_L0TxRjwzSdbpkzzJOxihnmPOqCLpvx9I" alt=""><figcaption></figcaption></figure>

クライアントが収集するHTTP関連情報は以下のとおりです。

<table><thead><tr><th width="174" align="center">ラベル</th><th align="center">설명</th></tr></thead><tbody><tr><td align="center"><strong>メソッド</strong></td><td align="center">HTTP Method (GET, POST, UPDATE, PUT, DELETE 등)</td></tr><tr><td align="center"><strong>ホスト</strong></td><td align="center">ドメイン情報</td></tr><tr><td align="center"><strong>状態</strong></td><td align="center">HTTPレスポンスコード</td></tr><tr><td align="center"><strong>ルート</strong></td><td align="center">リクエストURL</td></tr><tr><td align="center"><strong>レスポンスタイム</strong></td><td align="center">HTTPリクエストに対するレスポンスタイム</td></tr></tbody></table>

## 6. トレースバック行動分析 <a href="#user-analysis" id="user-analysis"></a>

IMQA WPM行動分析のトレースバックは、「性能詳細分析」ポップアップで選択したデバイスのユーザーが、どのような流れでWebサイトを利用したかを連携して追跡・照会することができます。性能低下があったデバイスの性能情報を確認し、性能低下現象の発生前後の原因を分析することができます。\[ユーザー行動分析]ボタンをクリックすると、そのデバイスユーザーのセッションの開始～セッションの終了までの画面フローを「行動分析」ページから確認することができます。

<figure><img src="https://lh7-us.googleusercontent.com/ICSwGp0PR8IYv4Pms5TIK1lqb6JWCyS0uBQFjKyQLy9QIZBnvDkNkN_Dk4mRHPVOGviX9mLrplbn3-P_P0bNw6aqWXRKvQb1VTJ7wkYpcR2X03cAnEkgXBrbdlbW1TPVAJoVg1tFMkpKujsm128Z_4c" alt=""><figcaption></figcaption></figure>

### 6.1 概要&#x20;

トレースバック行動分析は、選択したユーザーのセッションの開始時間を基準に、行動フローを分析することができます。

<figure><img src="https://lh7-us.googleusercontent.com/nJSP41LVg_N8lcb27LQb0jjfUXLj9C06GGGevD58mRi7-WVuBs9YQ1aHpB2_vPj3HVgtnrnwfYkEHjh5DEJzZ7EHbbERV0LJdxz8tyC-GW4jTgPKl553GXUjesl7UsMQQ-8KeG7xd4sRgqje2LLYyR0" alt=""><figcaption></figcaption></figure>

IMQA WPM トレースバック行動分析は、以下のとおりに構成されています。

**❶ 収集日**\
**❷ ユーザーの行動フロー**\
**❸ 画面フロー**

### 6.2. ユーザーの行動フロー <a href="#user-flow" id="user-flow"></a>

選択したユーザーのセッションの開始時間を基準に、セッションの開始～セッションの終了までの画面フローによって表示します。

<figure><img src="https://lh7-us.googleusercontent.com/hxfUT5p3MbXOFG2jjuXx9Pmq0VMgWb3ZUIu0E4TevbbwOQ-QnlgSFlSQy53fJOXa-bTmOEhRSScIgD1TzhXjc8evgaXGVAsXd06BcNuG7qVL1GToz-v3wE2snymFXSrd5IxXn_Toycu3Vo-vLBBms5s" alt=""><figcaption></figcaption></figure>

**❶ セッションの開始時間**\
選択したユーザーの行動データの「セッションの開始時間」に自動設定されます。

**❷ パスの概要を表示**\
選択したユーザーの行動フロー概要を表示します。「セッションの開始 > 「画面1」 > 「画面2」 > … > セッションの終了」と表示され、\[画面の名前]をクリックすると、画面フローでその画面の位置を素早く確認することができます。&#x20;

<figure><img src="https://lh7-us.googleusercontent.com/0I1NxR_4NIMDan-NO0MbiRBdLsu6qp1ZwtfbOck0fuQaXlETAoaybYjXUq0XQ1N5diUnVKjBj-DQP0AUG53k-tjj6FZc_QHaTKhDQW6pfgPHiXbgQs6ngoS2rbaPKK90hFKOeui7zX3TOA_EL6aaz4I" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
一つのセッションは、ユーザーがWebサイトに訪問したときに開始します。セッションは基本的に30分間維持され、ユーザーが30分間ページを移動しない場合に終了します。コンテンツ中心のWebサイトのように、平均的にユーザーがWebサイトでページを移動せずに長時間利用する場合、セッションが終了しないように持続時間を設定することができます。 行動分析の持続時間の設定に関する詳細は、「[IMQA WPM/WCrashインストールガイド >  SPA専用オプション](https://docs.imqa.io/imqa-guide/jpn/installation/web-wpm-wcrash/gong-tong-webagent-she-ding#2-wpm-spaopushon)」を参考にしてください。
{% endhint %}

### 6.3. 画面フロー <a href="#screen-flow" id="screen-flow"></a>

選択したユーザーの行動データを画面フローで表示します。ユーザーが移動したページの移動パスを確認し、各画面の性能情報を確認するとともに、各性能指標の詳細分析機能により問題の原因を詳しく分析することができます。<br>

<figure><img src="https://lh7-us.googleusercontent.com/DV8WNjrPmJEQRG6qOL3fbSS_iczXdNXl81GDCfq5x6hVzAzXkV7SqdPRLBxwa-7_3KdzBAXVWMd8qrCj0l7h954jGr1VAu-zSDSWGROl7dAjpi4zGpSfBm6NtkyarvvCrjCgQyJUdDtroPbnxjCNlJ4" alt=""><figcaption></figcaption></figure>

画面フローは、以下のとおりに構成されています。

**❶ 画面の単位**\
Webサイトのユーザーが訪問したページの単位を表示します。ステップ(段階)情報、ページの訪問時間、画面の名前を表示します。長い画面名は、マウスポインターを動かすと表示されるツールチップにより確認することができます。

**❷ 画面のカードの性能を表示/非表示**\
画面のカードをクリックすると、性能指標領域を表示します。再度クリックすると、性能指標領域を閉じます。

{% hint style="info" %}
複数の画面の性能指標を同時に確認し、前後の性能を比較・分析することができます。
{% endhint %}

**❸ 画面のカードの性能指標**\
ユーザーが訪問した各ページのロード時間、最小/最大レスポンスタイムを表示します。

#### 各画面単位の性能情報

ユーザーが訪問した各ページロード時間、最小/最大レスポンスタイムを確認し、他のページと比較することができます。各性能の数値をクリックすると、性能詳細分析のポップアップを表示します。&#x20;

<figure><img src="https://lh7-us.googleusercontent.com/jw6WJ1zLf42vgDambPvbP9JwmymhEN48M6NtEcdLO0w24F3HypuGmzMYzWbaF8vjmEOFlYMNfk4JO8WP70S_U7qclUot-jxDZUKqWMUagakOp-P4Wc6yIpreprZ1ZrBFp7Whz2dhKAY4JUHNKKO2yvc" alt=""><figcaption></figcaption></figure>

* **ページロード時間**: 画面フローのN番目の特定ページのロード時間を表示します。基準値以上の場合、危険色で表示します。
* **レスポンスタイム**: 画面フローのN番目のページにおいて収集されたレスポンスタイムの最小値と最大値を表示します。基準値以上の場合、危険色で表示します。

<table><thead><tr><th width="177" align="center">性能指標</th><th width="131" align="center">算出区間</th><th width="144" align="center">算出値</th><th align="center">合算方式</th><th align="center">単位</th></tr></thead><tbody><tr><td align="center"><strong>ページロード時間</strong></td><td align="center">特定ページ</td><td align="center">ページロード時間</td><td align="center">固有値</td><td align="center">ms</td></tr><tr><td align="center"><strong>レスポンスタイム</strong></td><td align="center">特定ページ</td><td align="center">レスポンスタイム</td><td align="center">最小値、最大値</td><td align="center">ms</td></tr></tbody></table>

{% hint style="info" %}
トレースバック行動分析機能により、運営中に性能低下が発見された特定のWebサイトのユーザーが、利用中にどの段階でどのような性能問題が発生したか再度確認し、当該ユーザーの移動パスを再現することができます。さらに問題となる画面を基準に、前後の状況を確認の上、「性能詳細分析」機能により問題の原因を詳細に把握することができます。
{% endhint %}

## 7. 統計 <a href="#statistics" id="statistics"></a>

IMQA WPM統計は、様々なテーマの過去データを期間と条件によって照会し、観察及び分析することができます。各性能指標別のユーザーのデータ分布をユーザーの環境と共に分析したり、Webアプリケーションの全般的なステータスの確認やインサイトを得ることができます。

### 7.1. 区間分析

区間分析は、各性能指標のユーザーデータの分布を、ユーザー環境とともに分析することができます。ダッシュボードにより、総合的な平均性能を確認した後、特定の性能低下区間を詳細に30分単位で確認することができます。

<figure><img src="https://lh7-us.googleusercontent.com/f5-_actorUaP3tWGuBPCq-v26zjpQOx-gfIXVZFFLONyWYHQL9xE5QMN6CT48zE77ugYwxpsAwFHEqwPp-5IlMmkZnStxtVe6Hh4ptpQU_q5v-MT0CELNWjxxnOcYezysli-lNd7pb2F0ytEIgAOpkk" alt=""><figcaption></figcaption></figure>

IMQA WPM 区間分析は、以下のとおりに構成されています。

**❶ タイムライン**\
**❷ 性能分布グラフ**\
**❸ ユーザー情報**\
**❹ 性能ヒートマップ**

#### タイムライン&#x20;

分析したい日付、時間（30分単位）を変更することができます。 性能分布グラフ、ユーザー環境を選択した基準に更新します。

<figure><img src="https://lh7-us.googleusercontent.com/1vqmuHe0RyxkQjwmbv1ej_nx0uMzvtpYyhQhGAuyUmqsXUbnpAA1PZv_y_3LCPm8l2iGGzly4IJw0fPktXvnTj0vw0HxKrmisBVpL3fSaChwblEKc6QBlZfQr4f3aXqCcpLMcqlwj-_q7qw0YD3JICE" alt=""><figcaption></figcaption></figure>

**❶ タイムライン**\
分析したい日付、時間(30分単位)を変更することができます。変更すると、性能分布グラフとユーザー環境を選択した基準で更新されます。&#x20;

![](https://lh7-us.googleusercontent.com/khdq593ZlBmWdMcLOmhieas1mpTAqkR5J-V1V-a1OX6Ky743Y0UDaCVgIVqqrKMliVYEkUqmx2BzPxUSp7qaMoGnuyY3CXAKk401trdL7thQA5Ck9233bYCQg2A5KgOw-AHmX-74xsT4irCbjBmbcBQ)

**❷ 分析日**\
基本設定は「今日の日付」で設定されており、\[<] \[>]をクリックすると、分析日を変更することができます。最大15日前まで選択することができます。

**❸ 選択した時間帯**\
選択した時間帯が表示されます。別の時間帯に変更することもできます。&#x20;

**❹ 現在の時間帯**\
「現在の時間」が含まれた時間帯が表示されます。

**❺ 凡例**\
各時間帯ごとに集計されたデータ数によって、タイムラインのカラー濃度が4段階で表示されます。&#x20;

<figure><img src="https://content.gitbook.com/content/QKKid2jVLL20moGjteZR/blobs/fAhRS0nDdmxEwuG1uBdR/image.png" alt=""><figcaption></figcaption></figure>

#### 性能分布グラフ <a href="#performance-rating-graph" id="performance-rating-graph"></a>

選択した30分間のユーザーデータ分布がヒストグラムで表示されます。性能分布グラフから区間を選択し、ユーザー環境と性能ヒートマップを分析することができます。

<figure><img src="https://lh7-us.googleusercontent.com/i2BQFzFkL-zQQKdd9jiGdhUFW7UOF29nNQtJQ9koLRasaBJrcxUw0aH1skUiKaUNuAdX7YUFlqyMqXU6swCNwlaLDZxJkJ1GAGFqO7vQnq_HiOhPrt1oPaXesx-G05cC1gPxInc9iBVMdI3-bh-Pkb0" alt=""><figcaption></figcaption></figure>

**❶ 性能指標**\
「ページロード時間」「レスポンスタイム」に性能指標を変更することができます。指標を変更すると、性能分布グラフ、ユーザー情報が更新されます。

**❷ ヒストグラム**\
ヒストグラムは、横軸は階級、縦軸は度数を表し、集計されたデータを様々な区間に定めて階級をつくり、各階級に属するデータ数で度数を表します。ヒストグラムは、すべての集団の分布状態を把握したり、比較するのに役立ちます。

<table><thead><tr><th width="201" align="center">性能指標</th><th width="194" align="center">X軸</th><th width="176" align="center">階級</th><th align="center">Y軸</th></tr></thead><tbody><tr><td align="center"><strong>ページロード時間</strong></td><td align="center">ページロード時間(ms)</td><td align="center">0 ~ 5,000ms</td><td align="center">収集されたデータ数</td></tr><tr><td align="center"><strong>レスポンスタイム</strong></td><td align="center">レスポンスタイム(ms)</td><td align="center">0 ~ 10,000ms</td><td align="center">収集されたデータ数</td></tr></tbody></table>

**❸ 50%基準線**\
性能平均基準線を表します。全データ分布の中間位置を表示し、全般的な性能を把握する場合に有用です。 基準線が0に近いほど速い性能を意味します。

**❹ 95%基準線**\
性能下位5%基準線を表します。全データ分布の下位5%が始まる地点を表示し、性能が最も低いデータを把握する場合に有用です。 基準線が0に近いほど速い性能を意味します。

**❺ 分析可能な区間**\
基準線で区分された区間を選択して性能データを詳細に分析できます。 選択した区間でユーザー情報をフィルタリングして、性能ヒートマップを表示します。 最大3区間で表示され、データの位置で区間を算出するため区間が重なることがあります。 この場合、%が高い区間と表示されます。

<figure><img src="https://lh7-us.googleusercontent.com/byziJJdCAzxt2dVtM7CfnrpD-XOntYpJkxVDYBbtSK4-t-i7y6RpsLGtLUVGVFzbiBqgw48-z5jV_KBkwKRp1hr0GrzaLMgAkx9odhVCjeNH1bPhHe7hJJ_KN1K8lRY-l0F6c_5RJTfaTzjAES9eqXo" alt=""><figcaption></figcaption></figure>

* **区間1**: 全データ分布の0\~50%未満
* **区間2**: 全データ分布の50%以上\~95%未満
* **区間3**: 全データ分布の95%以上

{% hint style="info" %}
性能分布グラフを通して、Webサイトユーザーがどのような性能環境を利用しているのかを把握することができます。基準値区間にほとんどのユーザーが分布している場合は、Webサイトを円滑に使用できていると判断でき、広く分布されている場合は、Webサイトが様々なユーザー環境に最適化されていないことを表します。Webアプリケーションの目標性能を設定するための改善指標としてご活用ください。
{% endhint %}

#### ユーザー情報 <a href="#user-information" id="user-information"></a>

基本性能分布全区間について表示され、選択した30分ユーザ環境を割合で表示します。 性能分布グラフ領域で区間選択時に更新されます。

<figure><img src="https://lh7-us.googleusercontent.com/pyIfty_Eg2w-sDJ-3HnEYniduy3hzq_LtFO-P38OLM-E4EHyTA83BxWixUyInM2TdU1yH3W4uvzdABkGopzj37OuoswTiQlgxE7t_s9UrKSWFaIVUvij9iSWH62JoL8z6yWOVYxmj4B-1IaIwh5Jwkg" alt=""><figcaption></figcaption></figure>

* **ページ**: 選択した区間で集計されたユーザーデータのページが表示されます。
* **OS**: 選択した区間で集計されたユーザーのOSが表示されます。
* **ブラウザ**: 選択した区間に集計されたユーザーのブラウザを表示します。

{% hint style="info" %}
ユーザー情報はWebサイトにアクセスしたとき、ユーザーのUser-Agent情報に基づいて表示します。IMQA WPMは、ユーザーが主に使用するOSとブラウザに大別されます。 OSの場合、「Windows」 「macOS」 「Android」 「iOS」 「Linux」などに区別されます。 ブラウザの場合、「Chrome」「Safari」「Microsoft Edge」 「Firefox」 「Samsung Browser」などに区別されます。 指定されていないOSやブラウザの場合、「Unknown」で表示されることがあります。
{% endhint %}

#### 性能ヒートマップ <a href="#performance-heat-map" id="performance-heat-map"></a>

選択した性能分布区間と関連性のある性能ヒートマップが表示されます。選択した性能区間のユーザが異なる性能問題を抱えているかをページロード時間、レスポンスタイムに対するヒートマップを確認することができます。性能指標別ヒートマップについての詳細は、「[IMQA WPM ユーザーガイド >  性能ヒートマップ](https://docs.imqa.io/imqa-guide/jpn/installation/web-wpm-wcrash/gong-tong-webagent-she-ding#4-wpm-sukuriputonono)」を参考にしてください。<br>

#### ページロード時間

個別ページまたはSPA方式で実装されたWebブラウザのアプリケーションで測定されたページのロード時間を確認することができます。ヒートマップエリアで特定のセルをクリックしたり、マウスドラッグで区間を選択すると、「性能詳細分析」のポップアップが表示されます。

<figure><img src="https://lh7-us.googleusercontent.com/h4XhVyDXTPUeM4wI7WZhgi7TvZ-TBEZ9SXNE94uym7xvJ0zfIzevOyifmvQ7ADJ1SOWnEwq32Ld2FXowLcxztR5RHr6nZ-9bbrIkjtRbck48Ayrw-3wvs9y5MSWZ26Ac_j1cRrPGIcnR_ZkcwLNmjFc" alt=""><figcaption></figcaption></figure>

* **ページロード時間**: 当該HTMLページがonloadイベントを発生する時点またはDOMの変更によるロード時間を区間で算出します。
* **凡例**: 基準値以上の区間は<mark style="color:red;">赤</mark>、未満は<mark style="color:blue;">青</mark>で表示され、同じ時間の軸に集計されたデータ比率によってカラー濃度は3段階で表示されます。&#x20;

<figure><img src="https://2952799970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQKKid2jVLL20moGjteZR%2Fuploads%2FLLiKEG27OHGGRsuNHxoh%2Fimage.png?alt=media&#x26;token=f9a399d2-6f0c-4235-a956-1f7faa6a685c" alt=""><figcaption></figcaption></figure>

#### レスポンスタイム

ページにおいてリクエストしたHTTPのレスポンスタイムを確認することができます。ヒートマップエリアで特定のセルをクリックしたり、マウスドラッグで区間を選択すると、「性能詳細分析」のポップアップが表示されます。

<figure><img src="https://lh7-us.googleusercontent.com/DmDGtDd2Mr30M15NyGTH1EVmdhbc5fkmDplJQDjlA00BzJIi0q4pFvnuUYiWK8jjK7E8nYe6p0lByhQJNt3EbwqvZZjJFBQLYzOzUUZ_UzNLV2S2TsroDvEZAzjKnGW5wQBMKAKFByIqjr-OES3xJKg" alt=""><figcaption></figcaption></figure>

* **レスポンスタイム**: HTTPレスポンスタイムが区間で算出されます。
* **凡例**: 収集されたHTTP情報でレスポンスコードが4xx番台・5xx番台の場合は<mark style="color:red;">赤</mark>、その他のレスポンスコードは<mark style="color:blue;">青</mark>で表示され、同じ時間の軸に集計されたデータ比率によってカラー濃度が3段階で表示されます。

<figure><img src="https://2952799970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQKKid2jVLL20moGjteZR%2Fuploads%2FSysLywr07bXN655Px7jf%2Fimage.png?alt=media&#x26;token=2530f427-92bc-46e7-8df5-060a3bb8b312" alt=""><figcaption></figcaption></figure>

### 7.2. 性能分析 <a href="#performance-analysis" id="performance-analysis"></a>

性能分析は、Webサイトへの訪問者&訪問数、各性能指標を時系列グラフ表示し、算出区間を変更して性能が低下した区間および性能の変動の推移をマクロ観点で確認することができます。

<figure><img src="https://lh7-us.googleusercontent.com/xwSypegY7YfN5mvgvegsRQSkFNSk67ulnabwcGhiIATWRZr_tkd1MkoPa5jcuivASESpOmHZZosFys0JNcYsfwHfLTH4Dp5_6u-dQBz0QcYdXsaisnXlQH5yN9p_-xAewLtUpCDTp_9YVMkRsFClV1g" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-us.googleusercontent.com/N6_4-nH-Bgmjfpt3cNG9e4mnhujntPQs5hky7seXPbWenguWlE0pQtjBIJLkfPTDXlo9RTRSX6WisSWSLhbmI8ztwhXtiYxhBy-zcfw0r62OcCbsTPESDpiWReqLfXba6qUQcqNsgxqB8lU6G8JPi7o" alt=""><figcaption></figcaption></figure>

* **30分**: 直近の30分の性能が1分間隔で表示されます。
* **1時間**: 直近の1時間の性能が1分間隔で表示されます。
* **3時間**: 直近の3時間の性能が1分間隔で表示されます。
* **12時間**: 直近の12時間の性能が5分間隔で表示されます。
* **1日**: 直近の24時間の性能が10分間隔で表示されます。

### 7.3. 画面分析 <a href="#screen-analysis" id="screen-analysis"></a>

画面分析は、Webサイトのユーザーが訪問したページの訪問率、問題発生率、各性能指標の下位5%と平均値を表示します。算出区間を変更し、各ページのどのような性能低下がどれほどあったか、直観的に確認することができます。ページは訪問率の高い順でソートされ、画面のカードをクリックすると、「ページ分析」ページへ移動することができます。

<figure><img src="https://lh7-us.googleusercontent.com/g76MASgsSb7HGepFQBcqyv1kisIq-LALrar8jJjuLMugxSLrvnmzFKFwlz9JeyZGARjp5tcaLP8H_Pli1Faj4_96UkfHVllUIozDaD-4Skr5LTDsDB4-VRki00r5oxxsfKt3DFV_rHJkRXtvcVJX1KU" alt=""><figcaption></figcaption></figure>

### 7.4. ユーザー統計 <a href="#user" id="user"></a>

ユーザー統計は期間内のユーザーのWebサイト利用に関する過去のデータを確認することができます。テーマ別統計で希望の期間と条件で照会し、Webサイトのユーザーに関するインサイトを得ることができます。マクロな観点からステータス確認及びパターン把握ができます。

<figure><img src="https://lh7-us.googleusercontent.com/zAQWLWA0g8jCkRLZXXUF0Df0_NtkrdMClRIklDSv9ySrDPQkNQTfsig6yu_-PwHf_SVZ69vU44mQdzoVqT2cXBFIM9elXQwZxyQxnjBV8qnlprGAEuD3dkvg0gebM00eWMfUgmIQU6aLBIadyIHt2H0" alt=""><figcaption></figcaption></figure>

IMQA WPM ユーザー統計、以下のとおりに構成されています。

**❶ 統計トピック**\
**❷ 照会期間/照会条件**\
**❸ 要約情報**\
**❹ ページ利用記録**

#### 統計トピック

過去のデータを分析した詳しいテーマを選択することができます。選択したテーマに合う様々な統計指標を分析することができます。

<figure><img src="https://lh7-us.googleusercontent.com/fwe1AhtafcAzrLBSy2C9FhjvCQUrxrK2WJ4M_iLK5vbvZzMMi1T2YU7AzaZuJ6y9MbMnAdnSJnH2trClXwp4on2sQykKZFjJTjQk8xS-1ua0VE-x6o48bzVBdgpuz7TLiXl3e_nM3L0HnlkDb_KlfYs" alt="" width="375"><figcaption></figcaption></figure>

**❶ 統計の詳しいテーマ**\
統計の詳しいテーマを変更することができます。指標の変更時、該当するテーマに合う統計指標を確認することができます。

{% hint style="info" %}
現在ユーザー統計は、Webサイト利用履歴統計を確認することができます。今後様々なテーマ別統計が提供される予定です。
{% endhint %}

#### 照会期間/照会条件 <a href="#data-range" id="data-range"></a>

照会したい期間と照会条件を選択することができます。選択した期間と基準でデータを照会します。

<figure><img src="https://lh7-us.googleusercontent.com/LWmmt8tAXUf4HDZb2vh84v21y4YyOV3t0gtn6QVbRhfmEqeNUgZGoOr1645Bc9gnLZ2UkYDHWq9p9WpVgoW5shNpifReqIkHYm0TPFbIvmYyeOuAAi079XTHIr6wjgz-VYzGet53arFGmfhwbdQEagY" alt="" width="375"><figcaption></figcaption></figure>

① 照会したい照会期間を選択します。基本は「直近7日」に設定されており、「今日」、「昨日」、「直近7日」を選択することができます。

② \[照会する]をクリックすると、選択した期間と基準でデータが照会されます。

#### 要約情報 - 日別利用者数&訪問数

Webサイトの利用履歴に関する要約情報で、日別のWebサイト利用者数&訪問数を月間カレンダーにヒートマップで可視化してデータの密集度を確認することができます。

<figure><img src="https://lh7-us.googleusercontent.com/2OZXJ_tUKF1FaxJqUaXBPGWBiGGZD-CvCUPDRh1q-vlqot-rELzZ3s-1OnNu4ZT8gtSvQhA918OYdZvKLyCbk8EVyiGJJIVvyFsPpq8EBWkr4VLVgarZFW56w1ReEN0jkjbXPWF20Fd38gr01sMCLsU" alt=""><figcaption></figcaption></figure>

* **表示基準**: 照会したい基準を選択します。照会したい基準を選択します。基本は「利用者数」に設定されており、「利用者数」、「訪問数」を選択することができます。変更すると月間カレンダーのヒートマップを更新します。
* **1日平均**: 照会期間内の利用者数、訪問数を1日平均で算出します。
* **期間総計**: 照会期間の合計を算出します。
* **凡例**: 照会期間内の利用者数、訪問数の最小値と最大値を確認することができます。月間カレンダーのヒートマップに表示されるカラー4段階を確認することができます。

<figure><img src="https://2952799970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQKKid2jVLL20moGjteZR%2Fuploads%2F3vGlJBbfHvQbeypXnDNM%2Fimage.png?alt=media&#x26;token=156fbe1f-91bc-451a-a5e4-d9747842dd53" alt=""><figcaption></figcaption></figure>

* **月間カレンダーのヒートマップ**: 日別のWebサイト利用者数&訪問数を月間カレンダーにヒートマップで可視化します。最小値と最大値を基準に、4段階のカラーで区分して数値を可視化して素早く確認することができます。

{% hint style="info" %}
月カレンダーヒットマップを通して、どの日付に利用者数と訪問数が高いか低いか、Webサイトの利用状況を素早く確認できます。
{% endhint %}

#### 要約情報 - ページ利用上位5

Webサイトの利用履歴に関する要約情報で、訪問者とビュー数が多い上位5つのページを確認することができます。ページを基準に訪問者数、ビュー数が多い順に基本的に並べられます。ページ別の訪問者数、ビュー数の高い順に基本的に並べ替えられます。 ページ情報、訪問者数とビュー数を確認できます。

<figure><img src="https://lh7-us.googleusercontent.com/96jZLjAdqVkSPVR36imzd97Qe9DejtG6ONDYEIh2_lyQq9YGQpY3bLKGjjSttMjpocEC6WguEoFkP-2HMzJf0QiF9GfmmY_-T5S7evuZd8yLMadaD22_84pUPG_wD4FK70xcbK2WWWm0VyIncGGCxqM" alt=""><figcaption></figcaption></figure>

* **訪問者数**: 該当するページに訪問したユーザー数をカウントします。 重複を除いたユニークユーザーを意味します。
* **ビュー数**: 該当するページの訪問数をカウントします。

{% hint style="info" %}
ページ利用上位5グラフで訪問の上位/下位のページ別使用性を確認し、性能改善の対象指標として活用してください。
{% endhint %}

#### 日別利用者数&訪問数 <a href="#daily-user" id="daily-user"></a>

照会期間、照会条件に該当するWebサイトの利用者数と訪問数を日別に確認することができます。

<figure><img src="https://lh7-us.googleusercontent.com/MeqQgF6YdGRBjp1Fx3S_5Z9fuFX9Tq64Wke4ixiFOP787ckCX-ExvqWC1SwVocFPJ_iAnsYiB1aLFK0f3tsijD0DxSmb7qe3i6K0KZDT6jGFk3Xfobim2DH0nb-T4C7aexyK1D5LsWMgiel4thbhKJQ" alt=""><figcaption></figcaption></figure>

**❶  ヘッダ(整列)**\
基本は日付の新しい順に並べられます。日付の古い順に並べ替えることができます。

**❷ 合計**\
照会結果の利用者数、訪問数の合計を表示します。

**❸ 日別利用者数&訪問数**\
日付、日別の利用者数と訪問数を表示します。

* **日付**: 照会期間に含まれる日付を表示します。
* **利用者数**: 該当する日付のユーザー数をカウントします。重複を除いたユニークユーザーを意味します。
* **訪問数**: 当該日付にWebサイトに接続した数をカウントします。ユーザーがWebサイトに接続し、開始したセッションの数を意味します。

{% hint style="info" %}
日別利用者数&訪問数で、照会期間内にユーザーの利用が多かった日付や少なかった日付､反復訪問回数を確認することができます。日変化を観察してください。
{% endhint %}

#### ページ利用記録 <a href="#page-view" id="page-view"></a>

照会期間、照会条件に該当するWebサイトのユーザーが訪問したページを表示し、訪問者数が多い順に基本的に並べられます。ページ情報、訪問者数とビュー数を確認することができます。

<figure><img src="https://lh7-us.googleusercontent.com/-tw4RWi6pn_f54FwTXtYWOnoWNL5PLpxhyMO8mnErd3E62R-u-Osj9M6y7qLl3HkGJtN-3UpITcjCoKUAUY8ErlEjh6DqN1weqTB9b_DabLQzATox4RxJgZ0PJLdjLmalppMo3fHt8oXup4lZsOyslk" alt=""><figcaption></figcaption></figure>

**❶ ヘッダ(整列)**\
基本は訪問者数が多い順に並べられます。訪問者数が少ない順に並べ替えることができます。

**❷ 合計**\
照会結果の訪問者数、ビュー数の合計を表示します。

**❸ ページ利用記録**\
ページ情報、ページ別の訪問者数とビュー数を表示します。

* **ページ**: ページ名を表示します。長いページ名はマウスポインターを乗せると表示されるツールチップで確認することができます。
* **利用者数**: 該当するページに訪問したユーザー数をカウントします。重複を除いたユニークユーザーを意味します。
* **ビュー数**: 該当するページの訪問数をカウントします。

{% hint style="info" %}
ページ利用記録で、照会期間内にユーザーの訪問が多かったページと少なかったページ、訪問回数を確認することができます。訪問の上位/下位のページ別使用性を確認し、性能改善の対象指標として活用してください。
{% endhint %}

## 8. レポート <a href="#report" id="report"></a>

IMQA WPMレポートは、Webブラウザアプリケーションに測定された性能指標に対するレポートを提供します。各性能指標別の性能状況とボトルネック現象を要約して日別に確認でき、PDF、CSV形式で保存したり、印刷することができます。

### 8.1. 概要 <a href="#overview5" id="overview5"></a>

<figure><img src="https://lh7-us.googleusercontent.com/A0Tu77qh41eqPXw0aaXVPhOZJYd9HWPgRZImXIEn1tVHWw1KQaR73YBb_MqHpYY2LiB4mlmthk4Q0tBkj96RvaZXlCHmhFnerdItXz0-Ju_SMwOp9VesrcsNN0qRwfbuHVS6BonrCB1GO26v44PUoxY" alt=""><figcaption></figcaption></figure>

IMQA WPMレポートは、以下のとおりに構成されています。

**❶ 照会日**\
**❷ レポート**\
**❸ ダウンロード/プリント**

### 8.2. 照会日

照会したい日付を選択でき、選択した基準でレポートを照会することができます。

<figure><img src="https://lh7-us.googleusercontent.com/ScdK1ap3unTG9f3EnHEBq4eCLL3LasT3AdpcduCloFQTIANfruUOLQvKt_q-Ui8mPeDyfEnHhz-VyX0DdPGLffdD-R-QvvrciLA5M7Y1JT9ntHDZTxGJWoAVyutFJ_byZ-0Brru3cDzQ5k_oO7L4HKI" alt=""><figcaption></figcaption></figure>

① 照会したい照会日を選択してください。基本設定は「今日の日付」で設定されており、最大30日まで選択することができます。

② \[適用]をクリックすると、選択した基準でレポートを照会することができます。&#x20;

### 8.3. 性能レポート <a href="#report2" id="report2"></a>

レポートは、性能とボトルネック現象レポートで構成されています。性能レポートは、各性能指標区間ごとに1日ユーザーデータの分布を%で確認することができます。

<figure><img src="https://lh7-us.googleusercontent.com/tHPJyv41-EVyq4d0z6nw04zpl4PLgYQbu3DRWmv55L842yabBI-M54qQ_sY5pIOtqmpb3Tw5t5A6r-0hE2qoAvftohHN07ltMMPr2oZveQYs3iZoD4ml_sZpV8nhnxliqByEqR-uFmxaTaNU0e11IPE" alt=""><figcaption></figcaption></figure>

**❶ 性能指標**\
性能指標の名前と集計されたデータ数が表示されます。

**❷ 性能区間**\
各性能指標が9つの区間に分けて表示されます。グレーの区間は性能安定区間で、グレー以外の色の区間は危険な区間を表します。

**❸ 区間別比率**\
集計されたデータの区間別比率がで表示されます。

{% hint style="info" %}
性能指標別ユーザー分布を通して、何%のユーザーがどの程度の性能問題を抱えているのかを把握することができます。基準値区間にほとんどのユーザーが分布している場合は、Webサイトを円滑に使用できていると判断でき、広く分布されている場合は、Webサイトが様々なユーザー環境に最適化されていないことを表します。Webサイトの目標性能を設定するための改善指標としてご活用ください。
{% endhint %}

### 8.4. ボトルネック現象レポート <a href="#report3" id="report3"></a>

ボトルネック現象レポートでは、Webブラウザアプリケーションの性能低下の原因を詳細に確認することができます。

#### レスポンスタイム下位20 URL

1日ユーザーデータのうち最もレスポンスタイムが遅かったURL20個が表示されます。基本的に下位5%レスポンスタイムが高い順で整列され、リクエスト情報、下位5%と平均値を確認することができます。

<figure><img src="https://lh7-us.googleusercontent.com/uBdN2mpw0M_JW9Gs_RJsTnh2DuWe9OcUPMf6Q31PsQQbvSg22lTQfUNlMPiPxFQF5pe0Nkho6qF7G5YYAbZ2SxD_eiYjmePoeiDqAg0CJYzmca53WO71fJB_spoUlqtnziqzF6QORRpTtf2gFdXAzfk" alt=""><figcaption></figcaption></figure>

**❶ ヘッダ(整列)**\
基本的に下位5%のレスポンスタイムが高い順に整列され、ステータス、件数、平均、P95(下位5%)で並べ替えることもできます。

**❷ レスポンスタイム下位20 URLの項目**\
リクエスト情報、下位5%と平均値が表示されます。

* **メソッド**: HTTPメソッドが表示されます。
* **ホスト**: ホスト情報が表示されます。
* **状態**: レスポンスコードが表示されます。
* **ルート**: リクエストされたURLが表示されます。
* **件数**当該件数を表示します。集計されたデータ数を意味します。
* **平均**: リクエストされたURLの全体レスポンスタイムが平均で算出されます。
* **P95**: リクエストされたURLの下位5%レスポンスタイムが平均で算出されます。

{% hint style="info" %}
レスポンスタイム下位20 URLを通して、性能低下が発生したURL、性能低下を経験したユーザー環境を確認することができます。特定のURLリクエストのエラーコードとレスポンスコードを確認して、性能改善指標としてご活用ください。
{% endhint %}

#### ページロード時間下位20 <a href="#load20" id="load20"></a>

1日ユーザーデータのうち最もページロード時間が遅かったウェブページ20個が表示されます。基本的に下位5%のページロード時間が高い順に整列され、ページ情報、下位5%と平均値を確認することができます。

<figure><img src="https://lh7-us.googleusercontent.com/etJIbPNKSF6id2EggLWQgij0rBYvJMVazhoUOsfhiWrKl3bXneltNE6VJwCCW0YBlwDR-kBhoCaZ-i4Y0ZtXNoGwvDFCTvQ0i3OaXn0MMabL7tKiyojSEtDfHNgfreu9wIwJs3JDfqCCLmCAAwyb7pM" alt=""><figcaption></figcaption></figure>

**❶ ヘッダ(整列)**\
基本的に下位5%のページロード時間が高い順に整列され、ページ、件数、平均P95(下位5%)で並べ替えることもできます。

**❷ ページロード時間下位20の下位20項目**\
ページ情報、下位5%と平均値が表示されます。

* **ページ**: ウェブページの情報が表示されます。
* **平均**: 当該ウェブページの全体ページロード時間が平均で算出されます。
* **P95**: 当該ウェブページの下位5%のページロード時間が平均で算出されます。

{% hint style="info" %}
ページロード時間下位20を通して、性能低下が発生した特定のウェブページのロード時間を確認して、性能改善指標としてご活用ください。
{% endhint %}

### 8.5. ダウンロード/プリント <a href="#download" id="download"></a>

レポートをPDF、CSV形式で保存したり、印刷することができます。

<figure><img src="https://lh7-us.googleusercontent.com/tkTEHjHvC-n6bU-WEEzJ9cZawWdGMF9amiWLzult5wxZmrblELaWNr07j4CdS4gnv58Q2X3ot5MewziqR4yZSFXefgjHxe7lt428eI4VbZE-wwN6JdM_898IaJEPF3VWsX7xupEsDET0DohMr0ysiVc" alt=""><figcaption></figcaption></figure>

① \[PDF Download]をクリックすると、「\[IMQA\_REPORT]プロジェクト名\_照会日.pdf」ファイルが「Download」フォルダに保存されます。

② \[CSV Download]をクリックすると、「\[IMQA\_REPORT]プロジェクト名\_照会日.xlsx」ファイルが「Download」フォルダに保存されます。

③ \[Print]をクリックすると、レポート様式を保った「印刷プレビューダイアログ」が表示されます。&#x20;

## 9. 通知 <a href="#alert" id="alert"></a>

IMQA WPM通知を通して、Webブラウザアプリケーションの危険状況を認識することができます。通知は、性能指標別の通知基準値によって多様に設定することができます。設定された通知は、「ダッシュボード > 最近発生通知」に表示され、ログインアカウントのEメールで受け取ることができます。

### 9.1. 通知ポリシーリスト <a href="#alert-management" id="alert-management"></a>

基本的に最近追加した通知順に整列され、新しい通知ポリシーを複数追加することができ、通知ポリシーを無効化したり、削除することができます。

<figure><img src="https://lh7-us.googleusercontent.com/o_oa0OKFkX8LdMDl3waWsSx48ZFJKiCb7ris2OEhCKJYd4LoXXVkrjLo0sbtQBIDzLshcCSPj_lMIzoxQDKbGTAC_p3v2u_vGqof1jdfKD66T0DhiUTGpk6xJoXJ99F7rDuLtGi2-36PUdUfbDJdXo4" alt=""><figcaption></figcaption></figure>

IMQA WPM通知ポリシーリストは、以下のとおりに構成されています。

<figure><img src="https://lh7-us.googleusercontent.com/rS6J_XYYWDB_unLVMpd8WC0tE_KWWdZdjvIkBRKGrWapkHmI6VTaPHCEsBm_ZKUu46h2vOIIAjfdx9dEIgJPOrTEQTvPol0P9jMl4tCnsdfx9bDyKxtKZh3qhckK_NCuxmtxpdFQEdqdO9OX9YLm5tY" alt=""><figcaption></figcaption></figure>

**❶ ポリシー追加**\
新しい通知ポリシーを追加することができます。\[ポリシー追加]をクリックすると、「通知ポリシー設定」ページへ移動します。

**❷ ポリシー名**\
通知ポリシーを追加すると、入力したポリシー名が表示されます。

**❸ 削除**\
追加した通知ポリシーを削除します。削除するとその通知項目は削除され、それ以降は通知が送信されません。

**❹ 無効化**\
追加した通知ポリシーを無効化します。\[無効化]をクリックすると、選択した通知項目の通知送信が一時的に中断され、\[有効化]をクリックすると、通知を再び有効化することができます。

{% hint style="info" %}
特定ユーザー環境を選択し、通知を設定する機能は、今後アップデートする予定です。
{% endhint %}

### 9.2. 通知ポリシー設定 <a href="#setting" id="setting"></a>

各性能指標の通知の基準値と通知を受ける特定のプロジェクトメンバーを選択し、通知を色々な方法で設定することができます。<br>

#### 通知ポリシー追加

通知ポリシーリスト右上の\[ポリシー追加]をクリックすると、「通知ポリシー設定」ページへ移動します。

<figure><img src="https://lh7-us.googleusercontent.com/epDgJgYOhPa93A5mid7sBUJyrJpIE8UkIrXkYIZ5YJINF-S5watCf2QJqrR8YCrz00HunEbWsVBNnqkLoUF_Oqyl6WzTdrsst1E_2594zREwhCdF9mzUHzaFGRVsxs2nxh_4PJWwMO1PxGLWjry3mgY" alt=""><figcaption></figcaption></figure>

① 任意のポリシー名を入力してください。

② 性能指標別の通知基準値と危険度として表示される基準値以上のデータの比率を設定してください。画面右上の\[基準値を初期化する]をクリックすると、「プロジェクトプリセット」設定値に初期化されます。

<figure><img src="https://lh7-us.googleusercontent.com/khErPVkmJ_t6q3yYi1ovnLiTI6OKvTsL0Smc5inOG9G6WYzunPT1L3mUTF7p_tbed6SHzetfUeMPQfxGA2pwHjKcyrwZvnYGwGS43HIyy5aLaX6B1uXtmmjVqQNGuM1lHyoOhwpxdzGP6Z4k9XDJh3k" alt="" width="188"><figcaption></figcaption></figure>

**❶ 性能指標**\
通知基準値を設定する性能指標の名前が表示されます。

**❷ 危険度**\
通知基準値以上の正常範囲、警告範囲、危険範囲が表示されます。

**❸ 問題発生率**\
通知基準値以上の正常範囲、警告範囲、危険範囲の比率基準が%で表示され、マウスドラッグで調整することができます。

**❹ 基準値**\
性能指標別の通知基準を入力することができます。「プロジェクトプリセット」で設定した基準値がある場合は、基本値が自動的に入力され、通知基準の基準値に変更することができます。

<table><thead><tr><th width="175" align="center">性能指標</th><th width="143.33333333333331" align="center">基準値の初期値</th><th align="center">危険度の初期値</th></tr></thead><tbody><tr><td align="center">ページロード時間</td><td align="center">100ms</td><td align="center"><p><mark style="color:blue;">正常</mark>：基準値以上のデータが全体の10%未満</p><p><mark style="color:orange;">警告</mark>：基準値以上のデータが全体の10%以上</p><p><mark style="color:red;">危険</mark>：基準値以上のデータが全体の30%以上</p></td></tr><tr><td align="center">レスポンスタイム</td><td align="center">3,000ms</td><td align="center"><p><mark style="color:blue;">正常</mark>：基準値以上のデータが全体の10%未満</p><p><mark style="color:orange;">警告</mark>：基準値以上のデータが全体の10%以上</p><p><mark style="color:red;">危険</mark>：基準値以上のデータが全体の30%以上</p></td></tr></tbody></table>

{% hint style="info" %}
プロジェクトプリセットとは別途に、通知対象基準値と問題発生率を設定することができます。
{% endhint %}

**❺ 性能指標の有効化/無効化**\
性能指標別通知を有効化、または無効化することができます。\[無効化]状態だと当該性能指標に対する通知が送信されず、\[有効化]状態だと当該性能指標に対する通知が送信されます。

<figure><img src="https://lh7-us.googleusercontent.com/1BxslWHA8j3RCyCLsrc63Qcg52JKBg-IcvoNl3OE-SE1TUce1ElKZUSj1wyRhQ3KPccTVd95fEj2wpnpoxLhzD8jI3EMQ6KYxi6r0vF-42I5p2eSLtNUBC6f3p3OS6r8jPxXVkHacLJO6sg4C4ePWR0" alt="" width="375"><figcaption></figcaption></figure>

③ 通知を受けるチャンネルを選択します。

<figure><img src="https://lh7-us.googleusercontent.com/ZAxTESd4XKEZhdX5-vV6OexoCnMShyIPBGfQe6uhoHDYO5CkshdsqeK6GOXqYvK9SaMSA4oZ147HgCqJhcs0GGw5htoi7eOmEhC-GBHjxT9KxgBhKR6FJKDoIVpC22scPdEbWJBwwc2ecqMmcfHTKQs" alt=""><figcaption></figcaption></figure>

* **電子メール**：電子メールで通知を送信します。
* **ブラウザ通知**：Webブラウザのプッシュ通知により、IMQAに接続しなくても通知を受けることができます。接続したPCのブラウザ通知に許可が必要です。通知権限を要求するポップアップは、接続したPCで最初のブラウザの通知設定時にのみ表示されます。\[ブラウザ通知テスト]から設定のステータスを確認することができます。

④ 通知を受けるプロジェクトメンバーを選択します。

⑤ 設定が完了すると、\[保存]をクリックします。

{% hint style="warning" %}

* **ブラウザ通知を直接設定する場合**\
  「ブラウザ通知」をクリックするとき、ブラウザの上に表示される通知権限を要求するポップアップで\[許可]を押してください。

<img src="https://lh7-us.googleusercontent.com/rxFnLVbMbuloVGdLw9QU6GiZbY2-xCTiW27KSN5_Beqyk84kvri_eTnn2aULNbjcmvW8YTVyemgMuRnCFLeIjNoPCyQKF4y2iLxyg-L057NKPuduK47VLjBX9j46NGFDYT3lELyEHqOJWZKAnADiOh0" alt="" data-size="original">

* **ブラウザ通知対象のメンバーの場合**\
  通知設定をした後、通知対象メンバーが「プロジェクトリスト」に接続したとき、ブラウザの上に通知権限を要求するポップアップが表示されます。
  {% endhint %}

{% hint style="warning" %}
現在、ブラウザ通知は、Google Chromeブラウザのみサポートします。
{% endhint %}

**💡Webブラウザからプッシュ通知が届きません。**\
ブラウザ通知を設定してもWebブラウザから通知が届かない場合は、以下の3つのケースに該当しないか確認してください。&#x20;

1. 通知権限を要求するポップアップで「ブロック」した場合
2. 接続したPCの通知センターの設定がOFFの場合
3. 使用中のブラウザがGoogle Chromeではない、もしくは対応バージョンでない場合

**1. 通知権限を要求するポップアップで「ブロック」した場合**\
接続したPCのGoogle Chromeブラウザで通知の許可が必要です。次の権限を変更する二つの方法のいずれかを参照してください。

① IMQAアドレスバーの左側にある\[ロック ![](https://lh7-us.googleusercontent.com/FOiXARPRRSlGGmMoRsgadOqCgOwNefmFScP2jOz22WrS3ZnXa-Yer5gqI3WTW4-8xRQWG5sz_YkQtd8k4nDPy76WXI2WWiYbvoXtIo9ewu5bcD3fVZfViRD16E4L068YSG991twQcWTlBpWhXIUfCR4)]アイコンをクリック > 通知の「許可」をクリックします。\
② ページを更新します。

<figure><img src="https://lh7-us.googleusercontent.com/nhCu1csPtwDtOij-eRoYBobBhiKyVPhgqfGtMyBxcLfgUq-Ht-ucSn_qO0VnzC1_Yg9hHMSM-YWR2rn4eY337o9n8ZONU42nGXQ6CH_5Lt2vX64MCME5UZEunVKzC0jgav3DXBgQNA7h8NjANourIAY" alt=""><figcaption></figcaption></figure>

③ (上記の方法が適用されない場合)\
&#x20;   \- アドレスバーの右側にある \[もっと見る ![](https://lh7-us.googleusercontent.com/-JjRJFUAGujhngW5VU4XHX63oQd1v14JpKuzdOm5bgcwumFOyYs9GUddxGHJIfRGJ7JJMUAm6IF91KNLWAmhiHFAGxFdJEyyNYWAPyiepUDEjuPBPM_CGLvCoCcaygoHn9JqM4DcieZ4FWGrgwGoB8g)] アイコンをクリック > 設定をクリックします。\
&#x20;   \- 「個人情報およびセキュリティ > サイトの設定 > 通知」をクリックし、移動します。\
&#x20;   \- サイトブロックリストでIMQAのWebサイトのURL(https：//OOO.imqa.io)が含まれたサイトの設定値を「許可する」に変更してください。

<figure><img src="https://lh7-us.googleusercontent.com/eGCeqZgV_PVF8AlaluKXNFwAAPfndoGgq5apvrJw2ECZ4JXEPpPlgMoyLE07yAIGssGWmGASaOxj8Ey9DMfkhMW-C5DyXiJQzWJXHsyIp5nT-F31wog5ulW_9cZ6s_j6gTdy0yc6waXXcFBGgzPubN8" alt="" width="375"><figcaption></figcaption></figure>

**2. 接続したPCの通知センターの設定がOFFの場合**\
ブラウザの通知を「許可」しても、接続したPCの各OSの通知センターの設定がOFFの場合、プッシュ通知は正常に届きません。次の各OSの通知センターの設定を変更する方法を参照してください。

1. Window\
   ① 「設定 > システム > 通知および作業」をクリックします。&#x20;

   ② 「アプリおよび他の送信者からの通知を受け取る」を設定します。&#x20;

   ③ 「Chrome」のアプリの通知を受け取るを設定します。

<figure><img src="https://lh7-us.googleusercontent.com/z8zrd08f24TlbbLm5IpTfmruU4shitLXNEkZA9H27LByQsAceM_FQF0rjH10zCFBvwcxk3OGVewiEah9VOaeBbc2Z9wB44lDAGAV4rTMHietFXYuYMRMWYJXfS8SdPz9i8HmgcqyIZS-cCzRHKV6kpw" alt="" width="375"><figcaption></figcaption></figure>

2. Mac \
   ① 「Appleメニュー > システム設定」のポップアップで「通知」をクリックします。&#x20;

   ② 「Google Chrome」を選択し、「通知を許可」を設定します。<br>

   <figure><img src="https://lh7-us.googleusercontent.com/5pXkXAdJf2PFDDwfbc6MQi8hOkIAq9CoBiFek_819KBggcQJUx7Us6nlNVQ4Xc0JULOB3d6tUcMkqGO5gyLqswgXwed8K88niZZ9qvC-2HQtsLOoDnyi9lG_Dwo_iwr7l0huHYJmZxNtB2sNUAPlb7I" alt="" width="563"><figcaption></figcaption></figure>

**3. 使用中のブラウザがGoogle Chromeではない、もしくは対応バージョンでない場合**\
現在、ブラウザの通知機能は、Google Chromeのみサポートします。上記の設定にもかかわらずブラウザの通知が届かない場合、Webプッシュ通知機能のサポートを受けられないバージョンの可能性があります。最新バージョンのブラウザにアップデートしてから設定してください。

## 10. 管理 <a href="#management" id="management"></a>

IMQA WPM管理を通して、基本的なプロジェクト設定とIMQAに表示される性能指標別基準値、画面名を変更することができます。

### 10.1. プロジェクト管理 <a href="#project-management" id="project-management"></a>

プロジェクト情報で作成したプロジェクト情報を変更でき、プロジェクトメンバーを確認することができます。

<figure><img src="https://lh7-us.googleusercontent.com/v1MVgnNy9V--FbbjuhefPVtPBPErJljisOEIghkePKfZuVqZNV32sLu5TFnAS-_F_MwuhMaRWykRAFXPueJ1bx9-FYPaJkj-t-_ihIt5tdCtM7FSOftRQL05td3rGMfnu_1Y8knVGiIw3mm43TkGcUk" alt=""><figcaption></figcaption></figure>

#### プロジェクト情報

プロジェクト名を変更でき、プロジェクトキーを確認することができます。

* **プロジェクト名**: プロジェクト作成時に入力したプロジェクト名が表示されます。プロジェクトマネージャー以上が修正することができます。変更後に\[保存する]をクリックすると適用されます。
* **URL**: プロジェクトを作成するとき、入力したWebサイトのメインドメインのURLを表示します。
* **プロジェクトキー**: プロジェクト作成時に作成されたプロジェクトキーが表示されます。\[コピーする]をクリックすると、クリップボードにコピーすることができます。
* **サービス**：プロジェクトを作成するとき、選択したサービスを表示します。

{% hint style="warning" %}
プロジェクトを作成するとき、入力したメインドメインのURLは、変更できません。他のURLに変更された場合、<support@imqa.io>までお問い合わせください。
{% endhint %}

#### プロジェクトメンバー <a href="#project-member" id="project-member"></a>

「プロジェクトリスト > プロジェクト管理 > プロジェクト情報」で追加したプロジェクトメンバーを確認することができます。

{% hint style="info" %}
プロジェクトメンバー管理は、「[IMQA WPMユーザーガイド > 2.4. プロジェクト管理 > プロジェクト情報](#info)」を参考にしてください。
{% endhint %}

### 10.2. プロジェクトプリセット <a href="#project-preset" id="project-preset"></a>

IMQAに表示する性能指標別の基準値と危険度に表示される基準値以上のデータ比率を任意で設定することができます。

<figure><img src="https://lh7-us.googleusercontent.com/YjiBOTbDBall-_-3pae7QLkSK1jFIsLZ4Fn-UHlSIxKnOhz7qq6hG8Q9eRNqutuKETmo3g6StGXAiWjr5cj6p_ucu1CfoQe_9MIfX-wla4sLOlv4DGNEmBvYbL2z434mu8uimLeiffNJBUskHi0kgjE" alt=""><figcaption></figcaption></figure>

「クラッシュ/訪問数」「ページロード時間」「レスポンスタイム」の基準値と比率を設定することができます。変更後に\[保存]をクリックすると適用されます。

<figure><img src="https://lh7-us.googleusercontent.com/T4flJGVie4pFJIBFTSp_NanvXMgCgJV7s_fy_Ux8NjUvbgUTfdFSF5KoMqW9iUZRJm0vLkb7NIwzZKrzIe-DL70P6hECduNb7qz7bUm5m_hnsi0IXG_tUyAjypqn0SsSdfljXf4ykaVS8pywHGb8qJM" alt="" width="188"><figcaption></figcaption></figure>

**❶ 性能指標**\
通知基準値を設定する性能指標の名前が表示されます。

**❷ 危険度**  \
通知基準値以上の<mark style="color:blue;">正常範囲</mark>、<mark style="color:orange;">警告範囲</mark>、<mark style="color:red;">危険範囲</mark>が表示されます。

**❸ 問題発生率**\
通知基準値以上の<mark style="color:blue;">正常範囲</mark>、<mark style="color:orange;">警告範囲</mark>、<mark style="color:red;">危険範囲</mark>の比率基準が%で表示され、マウスドラッグで調整することができます。

**❹ 基準値**\
性能指標別に問題があると判断される基準を入力することができます。入力した基準値は、IMQAサービス内の表示基準として活用されます。

<table><thead><tr><th width="176" align="center">性能指標</th><th width="166.33333333333331" align="center">基準値の初期値</th><th align="center">危険度の初期値</th></tr></thead><tbody><tr><td align="center"><strong>クラッシュ/訪問数</strong></td><td align="center">-</td><td align="center"><p><mark style="color:blue;">正常</mark>：基準値以上のデータが全体の10%未満</p><p><mark style="color:orange;">警告</mark>：基準値以上のデータが全体の10%以上</p><p><mark style="color:red;">危険</mark>：基準値以上のデータが全体の30%以上</p></td></tr><tr><td align="center"><strong>ページロード時間</strong></td><td align="center">100ms</td><td align="center"><p><mark style="color:blue;">正常</mark>：基準値以上のデータが全体の10%未満</p><p><mark style="color:orange;">警告</mark>：基準値以上のデータが全体の10%以上</p><p><mark style="color:red;">危険</mark>：基準値以上のデータが全体の30%以上</p></td></tr><tr><td align="center"><strong>レスポンスタイム</strong></td><td align="center">3,000ms</td><td align="center"><p><mark style="color:blue;">正常</mark>：基準値以上のデータが全体の10%未満</p><p><mark style="color:orange;">警告</mark>：基準値以上のデータが全体の10%以上</p><p><mark style="color:red;">危険</mark>：基準値以上のデータが全体の30%以上</p></td></tr></tbody></table>

### 10.3. 画面管理 <a href="#screen-management" id="screen-management"></a>

Webサイトの各ページの名前を、理解しやすいようIMQAで表示する名前に変更することができます。管理の重要度が低く、必要のないページは非表示にすることができます。

<figure><img src="https://lh7-us.googleusercontent.com/XotYAcqCkZ8FX5hl6eY8_ingbhCHlXk7iK8lRPcTz-E_9WenWnWvgoIdREYVvbCFJmu1_dWEunxxweAnWFcLucFGhmw7zBRQVFFkXM0F_K6BLJOIBczF3WayjNMd3fppPe7F2OR4GY5g4regdhakM9E" alt=""><figcaption></figcaption></figure>

#### 画面表示設定

<figure><img src="https://lh7-us.googleusercontent.com/PGOYEWTxzsD5RmMpR3MR0TKfSQmfLFmFyyrehTC6lYTZpkvAxRnGPnYLZNRZ6sWMZuu0Vj8-ZWSnAuaDkZxNJvkYGc15uQa9S9dC1rEgF2uXHEgjLkE91WeEE01Jo0it920gC4XeMFztqzslXD24HZY" alt=""><figcaption></figcaption></figure>

**❶ 表示設定されたページ**\
基本は\[チェック]状態に設定されており、表示設定されたページをIMQAで表示します。

**❷ 表示設定**\
基本は\[チェック]状態に設定されており、クリックして解除すると非表示になります。\[チェック]状態に再びページが表示されるように設定することができます。表示したいページの設定が終ると「画面管理」右上の\[保存]をクリックします。

**❸ 非表示に設定されたページ**\
非表示に設定されたページはIMQAで表示されません。

{% hint style="warning" %}
現在の画面表示設定は、データの収集有無、集計有無とは関係なく、「MPM > ダッシュボード > ページ別性能状況」に表示される画面カードを設定する機能です。非表示画面は表示に設定を変えるまで「ページ別性能状況」に表示されません。
{% endhint %}

{% hint style="info" %}
画面表示設定機能でIMQAの管理対象画面を指定することができます。表示設定で重要度の低い画面単位を非表示にすることができます。Webサイトの構造に合わせて活用してください。
{% endhint %}

#### 画面名変更 <a href="#changing-screen-name" id="changing-screen-name"></a>

Webサイトの各ページ名を理解しやすいようにIMQAで表示する名前に変更することができます。

<figure><img src="https://lh7-us.googleusercontent.com/Ae8oOk1ZG2eUoyLhyvHT37opvtXTLk6VBF8TmZey4WMN5OBeXr8XofnQLfBE-nC9FLS9DX8P-5qjK47TtVnZc1qOcJ0F0Bc50dV72lIKqMSxAaEv9prH1VzLvOWpzNwEb9_PIC1wUdfGA4nM0QCo1LY" alt="" width="375"><figcaption></figcaption></figure>

{% hint style="info" %}
固有のページ名を再びIMQAで表示させるためには、表示される画面名を空欄にして保存します。
{% endhint %}

#### ドメイン名非表示&#x20;

ページ名からドメイン情報を削除してIMQAで表示する画面名に一括適用することができます。

<figure><img src="https://lh7-us.googleusercontent.com/FDEapRUBHI2DGSxgx9jqTz7289Lsn-JP1ZbRdvjQ5Q7_k9kGSu-chmTfxmDzTdOqabKEzfi7QCeqhSTQBXE4ObiGUqofI8804Vuzsg36avY3t7UeOoSZSQLEySrWCEFY8titwr75gtphUvCFzQEJA2s" alt=""><figcaption></figcaption></figure>

**❶ ドメイン名非表示** \
基本は\[解除]状態に設定されており、\[チェック]する場合、ドメイン情報を削除して表示される画面名に一括適用します。

**❷ ドメイン情報を削除した画面名**\
ドメイン情報を削除した画面名が表示されます。画面設定が終わったら「画面管理」右上の\[保存]をクリックします。再び固有のページ名を使用する場合は「ドメイン名非表示」機能をクリックして\[解除]します。

**❸ すでに設定された名前がある画面**\
「ドメイン名非表示」機能は、すでに設定された名前があるページ名には適用されません。

<br>