화면 성능 분석
Last updated
Last updated
IMQA MPM 화면 성능 분석은 화면 별 성능을 30분 단위로 상세하게 확인할 수 있습니다. 화면 조회 수, 이벤트 등 사용자에 대한 정보와 각 성능 지표에 대한 히트맵을 통해 성능 분포와 저하 상황을 상세하게 분석할 수 있습니다.
현재 리액트 네이티브 프로젝트에서의 화면 성능 분석은 네이티브 데이터 중심으로 표시됩니다. 컴포넌트별 성능 분석 기능은 추후 업데이트 예정입니다.
‘대시보드'에서 특정 화면 카드를 클릭하면 이동할 수 있으며, IMQA MPM 화면 성능 분석은 다음과 같이 구성됩니다.
❶ 화면/분석 시간 ❷ 화면 성능 정보 ❸ 화면 유입 정보 ❹ 화면 이벤트 ❺ 성능 히트맵
분석하고자 하는 화면과 분석 날짜, 시간을 변경할 수 있습니다. 기본 ‘대시보드’에서 클릭한 ‘화면', ‘오늘 날짜’, ‘현재 시간대'로 설정되어 있으며 변경 시 화면 성능 분석 정보를 선택한 기준으로 갱신합니다.
❶ 분석 날짜 기본 ‘오늘 날짜'로 설정 되며 [<] [>] 클릭 시 분석 날짜를 변경할 수 있습니다. 최대 30일 전까지 선택할 수 있습니다.
❷ 선택한 시간대 선택한 시간대를 표시합니다. 다른 시간대로 변경할 수 있습니다.
❸ 현재 시간대 ‘현재 시간'이 포함된 시간대를 표시합니다.
❸ 범례 각 시간대별 집계된 데이터 수에 따라 타임라인 색상 농도를 4단계로 표시합니다.
30분 동안의 화면 로딩시간, 응답시간, CPU, 메모리의 성능 지표의 하위 5%의 평균과 전체 평균을 표시합니다.
이를 통해 특정 화면에 어떤 성능 저하가 있었는지 한눈에 확인할 수 있습니다. 또한 앱 사용자들이 평균적으로 화면 로딩에 문제를 겪는지, 요청에 대한 응답이 느렸는지 등 성능 저하 요인을 분석할 수 있습니다.
30분 동안의 화면 조회 수를 확인할 수 있습니다.
화면 조회 수: 30분 동안의 해당 화면 방문 수를 카운트합니다.
30분 동안의 사용자가 이동한 직전, 직후 화면 경로를 확인할 수 있습니다.
해당 화면을 중심으로 가장 주된, 중요한 흐름을 찾을 때 유용하며 시각적으로 파악할 수 있습니다. 화면과 화면 사이의 영역에 마우스 포인터를 올리면 ‘From : 유입화면→화면이름: 방문 수 & 화면이름→ To : 대상화면: 방문 수’로 툴팁이 표시됩니다.
방문 수: 특정 화면에서 특정 화면으로 이동한 사용자 수를 카운트합니다.
특정 경로가 크게 강조될 경우, 해당 경로로 이동하는 사용자가 많다고 해석할 수 있습니다. 앱의 목표 화면 기준, 강조된 경로를 최적화해야 함을 의미합니다.
30분 동안의 해당 화면에서 발생한 이벤트를 10개까지 표시합니다. 발생 시간 순으로 정렬되며, 이벤트 속도를 함께 확인할 수 있습니다.
이벤트 명: 발생한 이벤트를 표시합니다.
발생일시: 해당 이벤트가 발생한 시간을 표시합니다.
속도: 해당 이벤트의 속도를 표시합니다.
각 성능 지표에 대한 히트맵을 통해 성능 분포와 성능 저하 상황을 상세하게 분석할 수 있습니다. 웹/하이브리드 앱의 경우 ‘웹뷰 화면 로딩시간', ‘웹뷰 응답시간'이 추가 표시됩니다. 안드로이드 앱의 경우 ‘프래그먼트 로딩시간'이 추가 표시됩니다.
30분 동안의 해당 네이티브 화면의 화면 로딩시간을 확인할 수 있습니다. 셀에 마우스 포인터를 올리면 ‘분석 날짜 | 분석시간 | 데이터 수 | 성능 구간’으로 툴팁이 표시됩니다. 히트맵 영역에서 원하는 셀을 클릭하거나, 마우스 드래그로 구간을 선택하면 ‘네이티브 트레이스 뷰 분석' 팝업을 표시합니다.
화면 로딩시간: 해당 네이티브 화면 로딩시간을 구간으로 산출합니다.
범례: 기준치 이상 구간일 경우 빨강, 미만일 경우 파랑으로 표시하며, 같은 시간 축에 집계된 데이터 비율에 따라 색상 농도를 4단계로 표시합니다.
◼︎ 기준치 이상 ◼︎ 기준치 미만
해당 네이티브 화면에 속한 웹뷰 화면이 있을 경우, 웹뷰 화면 로딩시간을 확인할 수 있습니다. 기본 ‘전체' 웹 페이지 기준으로 히트맵이 표시되며 페이지 변경 시 히트맵을 갱신합니다. 셀에 마우스 포인터를 올리면 ‘분석 날짜 | 분석시간 | 데이터 수 | 성능 구간’으로 툴팁이 표시됩니다. 히트맵 영역에서 원하는 셀을 클릭하거나, 마우스 드래그로 구간을 선택하면 ‘웹 리소스 분석' 팝업을 표시합니다.
화면 로딩시간: 해당 웹 페이지의 화면 로딩시간을 구간으로 산출합니다.
범례: 기준치 이상 구간일 경우 빨강, 미만일 경우 파랑으로 표시하며, 같은 시간 축에 집계된 데이터 비율에 따라 색상 농도를 4단계로 표시합니다.
◼︎ 기준치 이상 ◼︎ 기준치 미만
웹 페이지는 ‘{host}:{port}/{path}’ 형태로 표시 되며, 숫자 형태의 주소는 별표(*)로 대체됩니다. ‘관리 > 화면 관리'에서 이해하기 쉬운 이름으로 변경할 수 있습니다.
30분 동안의 해당 네이티브 화면에서 요청한 HTTP 응답시간을 확인할 수 있습니다. 셀에 마우스 포인터를 올리면 ‘분석 날짜 | 분석시간 | 데이터 수 | 성능 구간’으로 툴팁이 표시됩니다. 히트맵 영역에서 원하는 셀을 클릭하거나, 마우스 드래그로 구간을 선택하면 ‘상세 응답 분석' 팝업을 표시합니다.
응답시간: HTTP 응답시간을 구간으로 산출합니다.
범례: 수집된 HTTP 정보에서 4xx대 5xx대 응답코드인 경우에는 빨강, 그 외 응답코드일 경우 파랑으로 표시하며, 같은 시간 축에 집계된 데이터 비율에 따라 색상 농도를 4단계로 표시합니다.
◼︎ 4xx, 5xx 대 상태 코드 ◼︎ 그 외
30분 동안의 해당 웹뷰 화면에서 요청한 HTTP 응답시간을 확인할 수 있습니다. 셀에 마우스 포인터를 올리면 ‘분석 날짜 | 분석시간 | 데이터 수 | 성능 구간’으로 툴팁이 표시됩니다. 히트맵 영역에서 원하는 셀을 클릭하거나, 마우스 드래그로 구간을 선택하면 ‘상세 응답 분석' 팝업을 표시합니다.
응답시간: HTTP 응답시간을 구간으로 산출합니다.
범례: 수집된 HTTP 정보에서 4xx대 5xx대 응답코드인 경우에는 빨강, 그 외 응답코드일 경우 파랑으로 표시하며, 같은 시간 축에 집계된 데이터 비율에 따라 색상 농도를 4단계로 표시합니다.
◼︎ 4xx, 5xx 대 상태 코드 ◼︎ 그 외
* 안드로이드 앱 전용
해당 네이티브 화면에 속한 프래그먼트 화면이 있을 경우, 프래그먼트 로딩시간을 확인할 수 있습니다. 기본 ‘전체' 프래그먼트 기준으로 히트맵이 표시되며 프래그먼트 변경 시 히트맵을 갱신합니다. ‘대시보드' 또는 ‘화면 분석'에서 특정 프래그먼트 화면 카드를 클릭해서 이동했을 경우, 선택한 프래그먼트로 히트맵을 표시합니다. 셀에 마우스 포인터를 올리면 ‘분석 날짜 | 분석시간 | 데이터 수 | 성능 구간’으로 툴팁이 표시됩니다. 히트맵 영역에서 원하는 셀을 클릭하거나, 마우스 드래그로 구간을 선택하면 ‘네이티브 트레이스 뷰 분석' 팝업을 표시합니다.
로딩시간: 해당 프래그먼트 화면 로딩시간을 구간으로 산출합니다.
범례: 같은 시간 축에 집계된 데이터 비율에 따라 색상 농도를 4단계로 표시합니다.
30분 동안의 해당 네이티브 화면에서 소모된 CPU 사용량을 확인할 수 있습니다. 셀에 마우스 포인터를 올리면 ‘분석 날짜 | 분석시간 | 데이터 수 | 성능 구간’으로 툴팁이 표시됩니다. 히트맵 영역에서 원하는 셀을 클릭하거나, 마우스 드래그로 구간을 선택하면 ‘네이티브 스택 분석' 팝업을 표시합니다.
CPU 사용량: CPU 사용량을 구간으로 산출합니다.
범례: OS 사용량은 초록, APP은 검정으로 표시하며, 같은 시간 축에 집계된 데이터 비율에 따라 색상 농도를 4단계로 표시합니다.
◼︎ OS CPU 사용량 ◼︎ APP CPU 사용량
30분 동안의 해당 네이티브 화면에서 소모된 메모리 사용량을 확인할 수 있습니다. 셀에 마우스 포인터를 올리면 ‘분석 날짜 | 분석시간 | 데이터 수 | 성능 구간’으로 툴팁이 표시됩니다. 히트맵 영역에서 원하는 셀을 클릭하거나, 마우스 드래그로 구간을 선택하면 ‘네이티브 스택 분석' 팝업을 표시합니다.
메모리 사용량: 메모리 사용량을 구간으로 산출합니다.
범례: OS 메모리 사용량은 초록, 앱 메모리 사용량의 경우 검정으로 표시하며, 같은 시간 축에 집계된 데이터 비율에 따라 색상 농도를 4단계로 표시합니다.
◼︎ OS 메모리 사용량 ◼︎ APP 메모리 사용량
