# 페이지 성능 분석

IMQA WPM 페이지 성능 분석은 페이지별 성능을 30분 단위로 상세하게 확인할 수 있습니다. 페이지 조회 수, 평균 성능 등 사용자에 대한 정보와 각 성능 지표에 대한 히트맵을 통해 성능 분포와 저하 상황을 상세하게 분석할 수 있습니다. 또한 특정 페이지를 기준으로 수집된 핵심 웹 바이탈 평가 수치를 확인하고, 저하 요인을 분석할 수 있습니다. 

## 1. 개요 <a href="#overview3" id="overview3"></a>

<figure><img src="https://lh7-us.googleusercontent.com/OeqzI0IYPaLWJN2isb_OSuXIX_5EyVOiQ7cbVi8Ifx_RnvhHkYxVqiS8srwpzR6Zpy8ekf06kYKvIkyRoJ-GO0Vt-cQWxakdQD-U5iKVPuBI2r-3aFXJmJZ94SJB-DPDpbofU2tGdbs9xPpOkKx6fY0" alt=""><figcaption></figcaption></figure>

‘페이지분석' 메뉴나 ‘대시보드' 등에서 특정 화면 카드를 클릭하면 이동할 수 있으며, IMQA WPM 페이지 성능 분석은 다음과 같이 구성됩니다.

❶ 페이지/분석 시간\
❷ 페이지 성능 정보\
❸ 페이지 조회 수\
❹ 핵심 웹 바이탈\
❺ 성능 히트맵\
❻ 웹 바이탈

## 2. 페이지/분석 시간 <a href="#page-time" id="page-time"></a>

분석하고자 하는 페이지와 분석 날짜, 시간을 변경할 수 있습니다. 변경 시 페이지 성능 분석 정보를 선택한 기준으로 갱신합니다.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcGe8YRKTyJSfhdbC1ogXKYZEr5iBA-sVP6MI9zxuUYDGidDMYVF7i6DZcGL5vmgmvzLhw1xJC6fzJgV-ScVy41q-ykbCfKiD8uYf2Co9PhONmaissLjHK8RkX2tPyKkq7sB8uErYM-r6e7z7wNkjoCsZyC?key=BnhyaiW4al_p9p7hwRh7jA" alt=""><figcaption></figcaption></figure>

### 페이지

분석하고자 하는 페이지를 선택할 수 있습니다. ‘대시보드' 또는 ‘화면 분석'에서 특정 화면 카드를 클릭해서 이동했을 경우, 선택한 페이지 정보가 표시됩니다. 왼쪽 페이지 표시 영역을 클릭하면 페이지 목록이 표시되며, 2글자 이상의 단어로 페이지를 검색할 수 있습니다. &#x20;

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXf58u0OaMLlJ6g2XDAprnS3zlw1a03DIGhMFOuVcH2PiTmLc5U-65EJpJxrGmKmOKvbOSM-ZJ0CVHmJo4Y4jWdD6_VKdbKJoInPSiYn5SrGC2xqrk-jXllfGdzhAREHPA3-z1Nd5gxU2YuhIgZAwEeGOwyx?key=BnhyaiW4al_p9p7hwRh7jA" alt="" width="375"><figcaption></figcaption></figure>

① 페이지 목록은 기본 수집된 페이지 정보 순으로 정렬되어 표시됩니다. 수집된 페이지의 정보와 페이지에 설정된 이름이 표시됩니다.

② 조회하고자 하는 특정 페이지가 있을 경우 페이지명에 2글자 이상의 단어로 검색어를 입력합니다.&#x20;

③ \[조회]를 클릭하면 검색어가 ‘페이지 정보' 에 포함된 결과가 조회됩니다.

④ 목록에서 원하는 페이지를 선택하거나, 다시 페이지 목록을 초기화 하려면 페이지명을 공란으로 \[조회] 합니다.&#x20;

{% hint style="info" %}
**페이지명** 검색은 수집된 ‘페이지 정보'를 대상으로 조회됩니다. (예: <https://imqa.io/products/{group})&#x20>;

수집된 ‘페이지' 의 경로 단위나, 파라미터의 키 또는 값과 같이 연속된 2글자 이상의 완성된 단어를 검색어로 입력하시는 것을 권장합니다. <br>

**페이지명 검색 예시)**

*“URL 쿼리 파라미터에 붙는 외부 유입ID ‘NaPm’ 로 페이지를 검색하고 싶어요.”*

![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXeIjIfgTjI1QRD21kDP_wSwBoA_h_WmKrqV7Z2h0dV4pCjunADzKiX4elLfYTCpzww5mIAuR40LgGqxHKCYC17WG6rb8IjEUBwNKQN-Dp6vZh7t4tuc6gzHzS_YxfZnD0mw8ZIxqErXt_OfHxh2PhNtKCU?key=BnhyaiW4al_p9p7hwRh7jA)

① 페이지의 특정 ‘경로' 또는 ‘쿼리 파라미터’의 키 또는 값 등으로 연속된 2글자 이상의 단어를 입력합니다. 대소문자는 구분하지 않습니다.

② 검색어가 페이지 정보에 포함된 결과를 확인할 수 있습니다.
{% endhint %}

{% hint style="info" %}
원하는 검색 결과가 조회되지 않을 경우, 입력한 검색어가 구분자(예: /, =, &) 사이에 포함된 연속된 완성형 단어인지 확인하시거나, 다른 검색어로 조회해 주세요.
{% endhint %}

### 분석 시간

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXe1ysecmf3wVHOBbQ9Hp8LmMweRgnIB6EzN3Co-Wwfy37F7svX-jnsodctJwtZ1bg3w2m6QKvYGhXr1vT5nuHpdg0g6e3Swk6pwM0NBkZwuvqtuzS33qqol_fit18m7bD2bVUPYyARKq5jOQkZGVMZa9rJ7?key=BnhyaiW4al_p9p7hwRh7jA" alt=""><figcaption></figcaption></figure>

**❶ 분석 날짜**\
기본 ‘오늘 날짜'로 설정 되며 \[<] \[>] 클릭 시 분석 날짜를 변경할 수 있습니다. 최대 30일 전까지 선택할 수 있습니다.

**❷ 선택한 시간대**\
선택한 시간대를 표시합니다. 다른 시간대로 변경할 수 있습니다.&#x20;

**❸ 현재 시간대**\
‘현재 시간'이 포함된 시간대를 표시합니다.

**❹ 범례**\
각 시간대별 집계된 데이터 수에 따라 타임라인 색상 농도를 4단계로 표시합니다.&#x20;

<figure><img src="https://3726060384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzFyCopc6yAp3UcEYW6la%2Fuploads%2FJLU2thiXnZYT4NwgBLoL%2Fimage.png?alt=media&#x26;token=fec53b2c-c94f-417b-b90b-b188545abf92" alt="" width="563"><figcaption></figcaption></figure>

## 3. 페이지 성능 정보 <a href="#page-performance" id="page-performance"></a>

30분 동안의 페이지 로딩시간, 응답시간 성능 지표의 하위 5%의 평균과 전체 평균을 표시합니다.

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

{% hint style="info" %}
이를 통해 특정 페이지에 어떤 성능 저하가 있었는지 한눈에 확인할 수 있습니다. 또한 웹 사이트 사용자들이 평균적으로 페이지 로딩에 문제를 겪는지, 요청에 대한 응답이 느렸는지 등 성능 저하 요인을 분석할 수 있습니다.
{% endhint %}

## 4. 페이지 조회 수 <a href="#views" id="views"></a>

30분 동안의 페이지 조회 수를 확인할 수 있습니다.

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

* 페이지 조회 수: 30분 동안의 해당 페이지 방문 수를 1분 간격으로 카운트합니다.

## 5. 핵심 웹 바이탈 <a href="#core-web-vitals" id="core-web-vitals"></a>

30분 동안 특정 페이지에서 수집된 핵심 웹 바이탈 성능 지표 LCP, FID, CLS의 30분 평균과 평가 구간별 비율을 확인할 수 있습니다.&#x20;

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

핵심 웹 바이탈은 다음과 같이 구성됩니다.

**❶ 디바이스 필터**\
30분 동안 특정 페이지에서 수집된 핵심 웹 바이탈 지표를 사용자 환경 기준으로 분석할 수 있습니다. 기본 ‘전체’로 설정되어 있으며, ‘Desktop’ 또는 ‘Mobile’로 필터링할 수 있습니다. 기준 변경 시 아래의 평균과 평가 구간별 비율을 갱신합니다.

**❷ 평균**\
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는 웹 사이트의 로딩 성능, 상호 작용, 시각적 안정성 3가지 요소를 기준으로 웹 사이트 사용자 경험을 평가하는 Google의 웹 성능 지표입니다.
{% 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">LCP</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">FID</td><td align="center">100ms 미만</td><td align="center">100ms 이상 300ms 이하</td><td align="center">300ms 초과</td></tr><tr><td align="center">CLS</td><td align="center">0.1 미만</td><td align="center">0.1 이상 0.25 이하</td><td align="center">0.25 초과</td></tr></tbody></table>

## 6. 성능 히트맵 <a href="#heatmap" id="heatmap"></a>

각 성능 지표에 대한 히트맵을 통해 성능 분포와 성능 저하 상황을 상세하게 분석할 수 있습니다.&#x20;

### 페이지 로딩시간 <a href="#load2" id="load2"></a>

30분 동안 개별 페이지 또는 SPA 방식으로 구현된 웹 브라우저 애플리케이션에서 측정된 페이지 로딩시간을 확인할 수 있습니다. 웹 페이지 기준으로 히트맵이 표시됩니다. 셀에 마우스 포인터를 올리면 ‘분석 날짜 | 분석시간 | 데이터 수 | 성능 구간’으로 툴팁이 표시됩니다. 히트맵 영역에서 원하는 셀을 클릭하거나, 마우스 드래그로 구간을 선택하면 ‘페이지 로딩시간 분석' 팝업을 표시합니다.

<figure><img src="https://lh7-us.googleusercontent.com/v8ltoAwPZzfnl4zMBJyoFFSge95_UhiiecAwbUMFYbzh7C8z4R_WiE1mlVs4gGtLfL0RYi6WP0KIP1RvfmdtsxH0il_5ATMKDyV6uztekGmnKwxgosDePpqEk6Sx0SCkHD4Ch-9zwvUGwbo-6ehZnAg" alt=""><figcaption></figcaption></figure>

* 페이지 로딩시간: 해당 HTML 페이지가 onload 이벤트를 발생하는 시점 또는 DOM 변경에 의한 로딩시간을 구간으로 산출합니다.
* 범례: 기준치 이상 구간일 경우 <mark style="color:red;">빨강</mark>, 미만일 경우 <mark style="color:blue;">파랑</mark>으로 표시하며, 같은 시간 축에 집계된 데이터 비율에 따라 색상 농도를 4단계로 표시합니다.&#x20;

<figure><img src="https://3726060384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzFyCopc6yAp3UcEYW6la%2Fuploads%2FzRjtbNkHvFJ9wsC2alJi%2Fimage.png?alt=media&#x26;token=2e2813e7-6843-4c40-b98b-9b4d2185a905" alt=""><figcaption></figcaption></figure>

### 응답시간 <a href="#response2" id="response2"></a>

30분 동안의 해당 페이지에서 요청한 HTTP 응답시간을 확인할 수 있습니다. 셀에 마우스 포인터를 올리면 ‘분석 날짜 | 분석시간 | 데이터 수 | 성능 구간’으로 툴팁이 표시됩니다. 히트맵 영역에서 원하는 셀을 클릭하거나, 마우스 드래그로 구간을 선택하면 ‘상세 응답 분석' 팝업을 표시합니다.

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

* 응답시간: HTTP 응답시간을 구간으로 산출합니다.
* 범례: 수집된 HTTP 정보에서 4xx대 5xx대 응답코드인 경우에는 <mark style="color:red;">빨강</mark>, 그 외 응답코드 일 경우 <mark style="color:blue;">파랑</mark>으로 표시하며, 같은 시간 축에 집계된 데이터 비율에 따라 색상 농도를 4단계로 표시합니다.&#x20;

<figure><img src="https://3726060384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzFyCopc6yAp3UcEYW6la%2Fuploads%2FZm3wKX5zAxVYmtaP82Db%2Fimage.png?alt=media&#x26;token=df32bcf9-b82b-43d2-b676-53c249654bd7" alt=""><figcaption></figcaption></figure>

## 7. 웹 바이탈 <a href="#vitals" id="vitals"></a>

웹 바이탈 지표별 성능 분포와 웹 바이탈 수치에 영향을 주는 다양한 연관 정보를 함께 확인할 수 있습니다. 이를 통해 웹 바이탈 평가에 가장 영향력이 높은 요인 분석 및 평가 개선이 가능합니다.&#x20;

### LCP 분포 / LCP 연관 정보 <a href="#lcp" id="lcp"></a>

<figure><img src="https://lh7-us.googleusercontent.com/PVNIe7KC2QrTmeiaXiu5LLuMAr2dTkZ_ZEOC2VFtJGMIdWu2uomRRXXUXHY8C6Yl9BuvXwdthwoe-gRtWcClalYkGKJVluGoQLLVv3H1m-D-ncRZ5N4-sxCRYvIS6nSOPOMVpQHAgtVgohcf9IzKBh4" alt=""><figcaption></figcaption></figure>

### **LCP 분포 그래프** <a href="#lcp2" id="lcp2"></a>

30분 동안의 특정 페이지에서 수집된 LCP 데이터 분포를 히스토그램으로 표시합니다. 히스토그램은 계급을 가로축에, 도수를 세로축에 나타낸 뒤, 집계된 데이터를 여러 구간을 정해 계급을 만들고, 각 계급에 속하는 데이터 수로 도수를 표시합니다. 히스토그램은 전체 집단의 분포 상태를 파악하거나 비교할 때 유용합니다. Google 권고 평가 구간별 색상으로 표시합니다.

<table><thead><tr><th width="122" align="center">웹 바이탈</th><th width="152" align="center">좋음</th><th align="center">개선 필요</th><th align="center">나쁨</th><th align="center">Y축</th></tr></thead><tbody><tr><td align="center">LCP</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>

### **LCP 연관 정보** <a href="#lcp3" id="lcp3"></a>

30분 동안의 특정 페이지에서 수집된 LCP 수치에 영향을 주는 다양한 연관 정보를 함께 확인할 수 있습니다. 이를 통해 LCP 평가에 가장 영향력이 높은 요인 분석 및 평가 개선이 가능합니다.

* Element: 가장 큰 콘텐츠 요소인 document object 정보와 비율을 표시합니다.
* Screen Resolution: 해당 페이지를 조회한 사용자의 화면 해상도 정보와 비율을 표시합니다.

{% hint style="info" %}
LCP는 페이지 로드 중 사용자의 뷰포트에서 가장 큰 콘텐츠 요소가 표시되는 시간을 측정합니다. 페이지의 주요 콘텐츠일 확률이 높고, LCP가 빠르면 사용자가 페이지를 사용할 수 있다고 인지하는데 도움이 됩니다.&#x20;

이미지 리소스의 최적화나 사용자 환경별 리소스 관리가 효과적일 수 있습니다. LCP는 2,500ms 이내를 목표로 개선하는 것을 권고합니다.
{% endhint %}

### FID 분포 / FID 연관 정보 <a href="#fid1" id="fid1"></a>

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

### **FID 분포 그래프** <a href="#fid2" id="fid2"></a>

30분 동안의 특정 페이지에서 수집된 FID 데이터 분포를 히스토그램으로 표시합니다. 히스토그램은 계급을 가로축에, 도수를 세로축에 나타낸 뒤, 집계된 데이터를 여러 구간을 정해 계급을 만들고, 각 계급에 속하는 데이터 수로 도수를 표시합니다. 히스토그램은 전체 집단의 분포 상태를 파악하거나 비교할 때 유용합니다. Google 권고 평가 구간별 색상으로 표시합니다.

<table><thead><tr><th width="122" align="center">웹 바이탈</th><th width="152" align="center">좋음</th><th align="center">개선 필요</th><th align="center">나쁨</th><th align="center">Y축</th></tr></thead><tbody><tr><td align="center">FID</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/mRzED3bUaUV0AI8TmHCGsDIpRTDNw8d-h8KpndVkuT7iM6qxVNY_sQJb3OY6J6_dAxkJ2hHQverW4GIx0OZ0m57G4y7RWKZW6UZjymSJZRmYCCIdUgc4rDwYVssFCcuZHCpozSA5saTKRMDNo1Rq5ZY" alt=""><figcaption></figcaption></figure>

### **CLS 분포 그래프** <a href="#cls2" id="cls2"></a>

30분 동안의 특정 페이지에서 수집된 CLS 데이터 분포를 히스토그램으로 표시합니다. 히스토그램은 계급을 가로축에, 도수를 세로축에 나타낸 뒤, 집계된 데이터를 여러 구간을 정해 계급을 만들고, 각 계급에 속하는 데이터 수로 도수를 표시합니다. 히스토그램은 전체 집단의 분포 상태를 파악하거나 비교할 때 유용합니다. Google 권고 평가 구간별 색상으로 표시합니다.

<table><thead><tr><th width="122" align="center">웹 바이탈</th><th width="152" align="center">좋음</th><th align="center">개선 필요</th><th align="center">나쁨</th><th align="center">Y축</th></tr></thead><tbody><tr><td align="center">CLS</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>

### **CLS 연관 정보** <a href="#cls3" id="cls3"></a>

30분 동안의 특정 페이지에서 수집된 CLS 수치에 영향을 주는 다양한 연관 정보를 함께 확인할 수 있습니다. 이를 통해 CLS 평가에 가장 영향력이 높은 요인 분석 및 평가 개선이 가능합니다.

* Element: 레이아웃 전환이 발생했을 때 이동한 object 정보와 비율을 표시합니다.
* Screen Resolution: 해당 페이지를 조회한 사용자의 화면 해상도 정보와 비율을 표시합니다.

{% hint style="info" %}
CLS는 페이지 로드 중 예상치 못한 레이아웃 전환 경험들을 점수로 측정 후 합산합니다. CLS가 낮으면 사용자가 시각적 안정성에 대한 좋은 인상을 가질 수 있습니다.

사용자 환경별 리소스 관리나 동적 컨텐츠 처리 방식 검토 등이 효과적일 수 있습니다. CLS는 0.1 이내를 목표로 개선하는 것을 권고합니다.
{% endhint %}