# 성능 대시보드 IMQA WPM 대시보드는 다양한 성능 지표 구성을 제공합니다. IMQA WPM 성능 대시보드는 웹 브라우저 애플리케이션의 성능을 실시간으로 파악할 수 있습니다. 웹 사이트 요약 정보와 주 성능 현황, 핵심 웹 바이탈 지표를 시계열 데이터로 확인할 수 있으며, 사용자가 방문한 페이지에 대한 성능을 종합적으로 확인할 수 있습니다. ## 1. 개요
IMQA WPM 성능 대시보드는 다음과 같이 구성됩니다. ❶ 상단 바(공통)\ ❷ 툴바(성능 대시보드)\ ❸ 웹 사이트 요약 정보\ ❹ 성능 문제 발생률\ ❺ 시계열 성능 정보\ ❻ 페이지별 성능 현황\ ❼ 성능 하위 목록\ ❽ 최근 발생 알림 ### 상단 바(공통)
**❶ 로고**\ 클릭 시 프로젝트 리스트의 메인으로 이동합니다. **❷ WPM 메뉴**\ 클릭 시 각 WPM 메뉴 페이지로 이동합니다. **❸ 모드 변경 아이콘**\ ‘대시보드' 페이지에서 화면 테마를 변경할 수 있습니다. 클릭 시 화면 테마를 ‘Light 모드'와 ‘Dark 모드’로 변경합니다. **❹ WCrash 아이콘**\ 프로젝트 생성 시 WCrash 서비스를 생성했을 경우 표시되며, 클릭 시 동일한 웹의 ‘WCrash > 대시보드' 페이지로 이동합니다. **❺ 프로젝트 네비게이션**\ 현재 위치한 프로젝트에서 다른 프로젝트로 이동할 수 있습니다. \[홈] 아이콘을 클릭하면 프로젝트 리스트로 이동하며 프로젝트 변경 시 해당 프로젝트의 ‘서비스 > 대시보드’로 이동합니다. **❻ 회원 메뉴**\ 로그인 계정의 회원 메뉴가 표시됩니다. * IMQA 가이드: IMQA의 가이드를 확인할 수 있습니다. 클릭 시 브라우저 새 탭으로 표시합니다. * 사용자 설정: 사용자 이름과 비밀번호를 변경할 수 있습니다. 브라우저 시간대는 IMQA 분석 정보의 표시 기준 시간을 변경할 수 있습니다. {% hint style="info" %} 로그인 사용자가 시간대를 자동으로 가져오지 못하는 환경에 있을 경우, IMQA의 시간 정보가 제대로 표현되지 않을 수 있습니다. 브라우저 시간대로 접속한 지역에 맞는 GMT 표준 시간으로 수동 설정할 수 있습니다. {% endhint %} * 언어 설정: IMQA의 표시 언어를 변경할 수 있습니다. ‘한국어’와 ‘영어', ‘일본어'로 변경 가능합니다. * 로그아웃: 계정을 로그아웃합니다. ## 2. 툴바(성능 대시보드)
**❶ 대시보드 정보**\ 현재 대시보드 뷰 모드를 표시합니다. **❷ 프로젝트 정보**\ 프로젝트의 플랫폼 아이콘과 프로젝트 이름을 표시합니다. ## 3. 웹 사이트 요약 정보 웹 사이트의 오늘 사용자 수, 방문 수와 최근 30분 평균 문제 발생률을 확인하고 비교할 수 있습니다.
### 오늘 이용자 수/방문 수 오늘 날짜 00시부터 \~ 현재 시간까지의 사용자 수, 방문 수를 확인할 수 있습니다.
* 이용자 수 Today : 오늘의 사용자 수를 카운트합니다. 중복을 제외한 순 사용자를 의미합니다. * 방문 수 Today : 오늘의 웹 사이트 접속 수를 카운트합니다. 이용자가 웹 사이트에 접속하여 시작한 세션의 수를 의미합니다.
성능 지표산출 구간산출 값병합 방식
이용자 수오늘 날짜 00시 ~ 현재 시간사용자 수카운트
방문 수오늘 날짜 00시 ~ 현재 시간세션 수카운트
빠른 파악을 위해 1,000단위를 ‘1K’로 요약 표시하며, 실제 데이터는 ‘K’로 요약 표시된 숫자에 마우스 포인터를 올리면 표시되는 툴팁으로 확인할 수 있습니다. ### 평균 문제 발생률/성능 날씨 최근 30분의 평균 문제 발생률과 성능 날씨 지표를 확인할 수 있습니다.
* 평균 문제 발생률 : 최근 30분 동안의 각 성능 지표(페이지 로딩시간, 응답시간, 크래시)의 기준치를 넘는 데이터 비율인 문제 발생률의 평균을 산출합니다. * 성능 날씨 : 최근 30분 동안의 평균 문제 발생률에 따라 5단계 날씨 아이콘이 표시됩니다.

~20%: 맑음 ~40%: 조금흐림 ~60%: 흐림 ~80%: 비 ~100%: 번개

성능 지표산출 구간산출 값병합 방식
평균 문제 발생률최근 30분문제 발생률

각 성능 지표 문제 발생률

(문제 데이터 / 전체 데이터)*100 의 평균

성능 날씨최근 30분평균 문제 발생률~20%, 5단계
{% hint style="info" %} 평균 문제 발생률과 성능 날씨는 최근 30분 동안의 웹 사이트 전반 성능을 파악하는 경우에 유용합니다. 웹 사이트 단위의 상위 평가 지표를 통해 빠르게 성능을 평가할 수 있습니다. {% endhint %} ## 4. 성능 문제 발생률 최근 30분 동안의 페이지 로딩시간, 응답시간, 크래시의 3가지 성능 지표의 문제 발생률을 그래프로 표시합니다. 각 성능 지표 별 기준치를 넘는 데이터의 비율을 비교해 볼 수 있습니다. ‘성능 문제 발생률’은 1분마다 갱신됩니다.
* 문제 발생률 : 최근 30분 동안의 성능 지표 별 문제 발생률을 산출합니다.
성능 지표산출 구간산출 값병합 방식
크래시최근 30분문제 발생률(크래시 발생 수 / 방문 수)*100
페이지 로딩시간최근 30분문제 발생률(기준치 이상 데이터 / 전체 데이터)*100
응답시간최근 30분문제 발생률(기준치 이상 데이터 / 전체 데이터)*100
{% hint style="info" %} 성능 지표별 기준치는 ‘[관리 > 프로젝트 프리셋](https://docs.imqa.io/imqa-guide/user-guide/management#project-preset)'에서 설정할 수 있습니다. {% endhint %} ## 5. 시계열 성능 정보 최근 30분간 사용자 수, 방문 수, 크래시 발생 수와 페이지 로딩시간, 응답시간 성능 지표의 하위 5%의 평균과 전체 평균을 시계열 그래프로 표시합니다. 핵심 웹 바이탈 지표는 최근 30분 간 평균과 가장 성능이 저하된 시점의 수치를 표시합니다. 성능이 저하된 구간 및 성능의 변동 추이를 확인하고 비교할 수 있습니다. 시계열 성능 정보는 1분마다 갱신됩니다. ### 현재 이용자 & 방문 수 최근 30분간 사용자 수, 방문 수를 1분 간격으로 확인하고 비교할 수 있습니다. ‘현재 이용자 & 방문 수’는 1분마다 갱신됩니다.
* 이용자 수: 최근 30분간 사용자 수를 1분 간격으로 카운트합니다. 중복을 제외한 순 사용자를 의미합니다. * 방문 수: 최근 30분간 웹 사이트 접속 수를 1분 간격으로 카운트합니다. 이용자가 웹 사이트에 접속한 세션의 수를 의미합니다. ### 크래시 최근 30분간 웹 크래시 발생 수를 1분 간격으로 확인하고 비교할 수 있습니다. ‘크래시’는 1분마다 갱신됩니다.
* 크래시: 최근 30분간 웹 크래시 발생 수를 1분 간격으로 카운트합니다. ### 페이지 로딩시간 최근 30분간 개별 페이지 또는 SPA 방식으로 구현된 웹 브라우저 애플리케이션에서 측정된 페이지 로딩시간을 1분 간격으로 확인하고 비교할 수 있습니다. 하위 5% 평균과 전체 평균을 표시하며 ‘페이지 로딩시간’은 1분마다 갱신됩니다.
* 하위 5%: 최근 30분 동안의 하위 5% 페이지 로딩시간을 평균으로 산출합니다. * 평균: 최근 30분 동안의 전체 페이지 로딩시간을 평균으로 산출합니다.
성능 지표산출 구간산출 값병합 방식단위
하위 5%최근 30분페이지 로딩시간하위 5% 평균ms
평균최근 30분페이지 로딩시간전체 평균ms
그래프에 표시된 가로선은 성능 기준치로, 이를 통해 기준치 이상의 성능 문제가 있었던 시간과 값을 확인하기 용이합니다. {% hint style="info" %} Y축은 페이지 로딩시간을 의미합니다. 하위 5%는 IMQA가 수집한 전체 데이터 중 로딩시간이 오래 걸린 순으로 정렬하여 산출합니다. 이를 통해 평균적인 페이지 로딩 상황과 일부 사용자의 상황을 비교해 볼 수 있습니다. 하위 5%와 평균의 차이가 적을 수록 대부분의 사용자가 비슷한 웹 사이트 사용성을 경험한다고 판단할 수 있습니다. {% endhint %} {% hint style="info" %} 페이지 로딩시간은 기본적으로 HTML 의 onload 이벤트가 발생하여 페이지 로드가 완료된 시간을 의미합니다. SPA 방식으로 구현된 환경에서의 페이지 로딩시간 수집은 ‘[IMQA WPM/WCrash 설치 가이드 > 2.2. \[WPM\] SPA 전용 옵션](https://docs.imqa.io/imqa-guide/installation/web-wpm#2.2.-wpm-spa)'을 참고하세요. {% endhint %} ### 응답시간 최근 30분간 응답시간을 1분 간격으로 확인하고 비교할 수 있습니다. 하위 5% 평균과 전체 평균을 표시하며 ‘응답시간’은 1분마다 갱신됩니다.
* 하위 5%: 최근 30분 동안의 하위 5% 응답시간을 평균으로 산출합니다. * 평균: 최근 30분 동안의 전체 응답시간을 평균으로 산출합니다.
성능 지표산출 구간산출 값병합 방식단위
하위 5%최근 30분응답시간하위 5% 평균ms
평균최근 30분응답시간전체 평균ms
그래프에 표시된 가로선은 성능 기준치로, 이를 통해 기준치 이상의 성능 문제가 있었던 시간과 값을 확인하기 용이합니다. {% hint style="info" %} 하위 5%는 IMQA가 수집한 전체 데이터 중 응답시간이 오래 걸린 순으로 정렬하여 산출합니다. 이를 통해 평균적으로 사용자 요청에 걸린 응답시간과 일부의 성능 저하 상황을 비교해 볼 수 있습니다. 응답시간이 오래 걸린 경우, 특정 시간에 네트워크나 서버에 문제가 있었는지 확인해 볼 수 있으며, ‘종합 성능 현황'과 연계하여 어떤 환경의 사용자에게 성능 저하가 있었는지 분석할 수 있습니다. {% endhint %} ### 핵심 웹 바이탈 최근 30분간 웹 브라우저 애플리케이션에서 측정된 핵심 웹 바이탈 성능 지표 LCP, FID, CLS의 30분 평균과 최댓값을 확인할 수 있습니다. 전체 평균과 1분 평균 최댓값을 표시하며 ‘핵심 웹 바이탈’은 1분마다 갱신됩니다.
핵심 웹 바이탈은 다음과 같이 구성됩니다. **❶ 디바이스 필터**\ 최근 30분 동안 수집된 핵심 웹 바이탈 지표를 사용자 환경 기준으로 분석할 수 있습니다. 기본 ‘전체’로 설정되어 있으며, ‘Desktop’ 또는 ‘Mobile’로 필터링할 수 있습니다. 기준 변경 시 아래의 평균과 1분 최댓값을 갱신합니다. **❷ 평균** \ 최근 30분 동안 수집된 핵심 웹 바이탈 지표별 수치를 평균으로 산출합니다. Google 권고 평가 구간별 색상으로 표시합니다. **❸ 1분 최댓값**\ 최근 30분 동안 수집된 핵심 웹 바이탈 지표별 수치 중, 가장 성능이 저하된 시점의 수치를 표시합니다. Google 권고 평가 구간별 색상으로 표시합니다. {% hint style="info" %} 핵심 웹 바이탈 LCP, FID, CLS는 웹 사이트의 로딩 성능, 상호 작용, 시각적 안정성 3가지 요소를 기준으로 웹 사이트 사용자 경험을 평가하는 Google의 웹 성능 지표입니다. {% endhint %}
핵심 웹 바이탈좋음개선 필요나쁨
LCP2,500ms 미만2,500ms 이상 4,000ms 이하4,000ms 초과
FID100ms 미만100ms 이상 300ms 이하300ms 초과
CLS0.1 미만0.1 이상 0.25 이하0.25 초과
## 6. 페이지별 성능 현황 최근 30분 동안 사용자가 방문한 페이지별 성능 현황을 확인할 수 있습니다. 페이지별 사용자 방문율과 각 성능의 문제 발생률, 하위 5%와 평균 값을 모니터링할 수 있습니다. ‘페이지별 성능 현황'은 1분마다 갱신됩니다.
페이지별 성능 현황은 다음과 같이 구성됩니다. **❶ 성능 지표**\ ‘페이지 로딩시간' ‘응답시간'으로 성능 지표를 변경할 수 있습니다. 지표 변경 시 아래의 ‘화면 카드’에 표시된 하위 5%와 평균 값을 갱신합니다. **❷ 화면 카드 정렬**\ 기본 ‘방문율순’으로 설정되어 있으며, ‘방문율순', ‘문제 발생률순', ‘하위 5%순’, ‘평균순'으로 정렬할 수 있습니다. 수치가 높은 순으로 정렬됩니다. **❸ 요약 정보**\ 최근 30분 동안의 사용자가 방문한 페이지별 문제 발생률을 요약 텍스트 형태로 빠르게 확인이 가능합니다. **❹ 화면 카드**\ 최근 30분 동안의 사용자가 방문한 페이지별 방문율, 문제 발생률, 하위 5%와 평균값을 확인할 수 있습니다. ### 요약 정보 최근 30분 동안의 사용자가 방문한 페이지별 각 성능의 문제 발생률을 빠르게 확인이 가능합니다. 오른쪽의 \[요약 정보]를 클릭하면 팝업이 표시됩니다.
선택한 정렬 기준에 따라 화면이 정렬되며, ‘관리 > 프로젝트 프리셋'에서 설정한 기준치를 넘는 데이터의 비율을 문제 발생률로 표시하고 문제 발생률에 따라 위험도 색상으로 표시합니다. {% hint style="info" %} 이를 통해 방문율, 성능 수치가 높은 페이지에 어떤 성능 저하가 있었는지 한눈에 확인할 수 있습니다. 또한 웹 사이트 사용자들이 평균적으로 페이지 로딩에 문제를 겪는지, 요청에 대한 응답이 느렸는지 등 성능 저하 요인을 분석할 수 있습니다. {% endhint %} ### 화면 카드 최근 30분 동안의 사용자가 방문한 페이지별 방문율, 문제 발생률, 성능 지표 별 하위 5%와 평균값을 확인할 수 있습니다. 선택한 정렬 기준에 따라 페이지가 정렬되며, 화면 카드 클릭 시 ‘페이지별 성능 분석’ 페이지로 이동할 수 있습니다.
**❶ 페이지 정보**\ 수집된 페이지의 정보를 표시합니다. URL 패턴 설정을 통해 패턴이 적용된 단위로 표시됩니다. 긴 페이지 정보는 마우스 포인터를 올리면 표시되는 툴팁으로 확인할 수 있습니다. **❷ 화면 이름**\ 페이지에 설정된 이름을 표시합니다. 긴 화면 이름은 마우스 포인터를 올리면 표시되는 툴팁으로 확인할 수 있습니다. 웹 사이트의 각 페이지 이름을 이해하기 쉽도록 IMQA에서 표시할 이름으로 변경 가능하며 ‘관리 > 화면 관리'에서 변경할 수 있습니다. **❸ 문제 발생률/방문율/성능 정보**\ 최근 30분 동안의 특정 페이지에 방문한 사용자의 비율과 문제 발생률을 표시합니다. 문제 발생률의 위험도에 따라 색상으로 표시합니다. 선택한 성능 기준에 따라 하위 5%와 평균 값을 표시합니다. {% hint style="info" %} 이를 통해 방문율이 높은 페이지에 어떤 성능 저하가 얼마나 있었는지 한눈에 확인할 수 있습니다. 또한 웹 사이트 사용자들의 평균적인 성능과 일부 사용자의 성능을 비교해 볼 수 있습니다. 문제가 발견된 화면의 ‘페이지별 성능 분석’에서 성능 저하 원인을 상세하게 분석할 수 있습니다. {% endhint %} ## 7. 성능 하위 목록 ### 크래시 상위 6 최근 30분 동안 가장 많이 발생한 웹 크래시 6개를 표시합니다. 크래시 수 높은 순으로 정렬되며 긴 크래시 이름은 마우스 포인터를 올리면 표시되는 툴팁으로 확인할 수 있습니다. ‘크래시 상위 6'은 1분마다 갱신됩니다.
* 크래시 명: 에러의 이름을 표시합니다. 항목 클릭 시 해당 크래시의 ‘에러 상세’ 페이지로 이동할 수 있습니다. * 크래시 수 : 해당 에러의 30분 발생 누적 횟수를 카운트합니다. * 비율 : 30분 동안 발생한 에러 중 해당 에러가 차지하는 비율을 표시합니다. ### 응답시간 하위 6 URL 최근 30분 동안 가장 응답시간이 느린 URL 경로 6개를 표시합니다. 응답시간 높은 순으로 정렬되며 긴 URL은 마우스 포인터를 올리면 표시되는 툴팁으로 확인할 수 있습니다. ‘응답시간 하위 6 URL'은 1분마다 갱신됩니다.
* URL : 요청된 URL을 표시합니다. * 호출 횟수 : 해당 URL의 30분 요청 누적 횟수를 카운트합니다. * 응답시간 : 해당 URL의 평균 응답시간을 표시합니다. ## 8. 최근 발생 알림 최근 30분 동안 기준치 이상의 문제에 대한 알림을 표시합니다. 알림은 ‘알림 > 알림 정책 목록'에서 설정할 수 있습니다. 최근 발생한 알림 순으로 정렬되며 ‘\[정책 이름]의 ‘성능 지표' 값이 ‘위험도'입니다.’로 표시됩니다. ‘최근 발생 알림'은 1분마다 갱신됩니다.