성능 상세 분석
Last updated
Last updated
IMQA MPM 성능 상세 분석은 ‘화면 성능 분석’ ‘구간 분석’ 페이지 등의 성능 히트맵 또는 특정 성능 수치 선택을 통해 확인할 수 있는 기능입니다. 성능 상세 분석에서는 네이티브 스택 분석, 네이티브 트레이스 분석, 웹 리소스 분석, 상세 응답 분석을 하실 수 있습니다. 이를 통해 성능의 문제점 또는 문제가 되는 구간을 파악할 수 있습니다.
또한, 사용자 행동분석 기능을 통해 성능 문제가 발견된 앱 사용자가 어떤 이동경로로 앱을 이용했는지 전체 행동 흐름을 확인할 수 있습니다.
네이티브 스택 분석은 CPU, 메모리 성능 히트맵 등을 통해 확인할 수 있습니다.
어플리케이션 내에서 Call Stack 정보를 주기적으로 수집하여 해당 히트맵 시점의 Call Stack 정보를 종합하여 제공하고 있습니다. 예를 들어 화면이 로딩되는 시점의 Call Stack 정보를 확인하면, GUI 관련 함수와 이미지 라이브러리 등 함수들이 많이 콜스택으로 보이게 됩니다. 해당 기능을 통해서 오래 걸리는 화면 또는 CPU, Memory가 높은 시점의 스택 정보를 확인하여 어떤 함수들이 성능을 저하시키고 있는 지 확인할 수 있습니다.
프로가드 설정 / dSYM 설정을 통해 각 버전의 매핑 파일로 복호화가 되었을 경우, 실제 소스의 파일 및 위치까지 정확히 표시됩니다. 프로가드 설정 / dSYM 설정은 ‘MPM 사용하기 > 프로젝트 리스트 > 프로젝트 관리 > 프로가드 설정 / dSYM 설정'을 참고하세요.
CPU, 메모리 성능 히트맵 등에서 선택한 영역 또는 수치의 사용자 디바이스 정보입니다. 화면, 앱 버전, OS 버전, 디바이스, 통신사, 위치, 성능 수치, 사용자 수에 대한 정보를 리스트 형태로 보여줍니다. 가장 처음 상세 분석에 들어오면 가장 상단에 있는 디바이스 정보가 아래 리버스 스택에 표현되고 있습니다. 다른 스택 정보를 확인하고 싶은 경우에는 다른 디바이스 정보를 선택하면 확인이 가능합니다. 성능 수치는 선택한 구간의 성능 데이터를 보여줍니다. 동일한 화면, 동일한 환경의 데이터일 경우 그 중 가장 최댓값을 표시합니다.
최신 iOS 버전의 경우, Apple의 보안정책에 의해 위치 및 통신사 정보 수집이 불가능합니다. 이 경우 위치 또는 통신사 정보가 ‘NONE’ 또는 ‘Unknown’으로 표시될 수 있습니다.
디바이스 정보 리스트에서 선택한 디바이스의 사용자가 어떤 흐름으로 앱을 이용했는지 연계하여 추적 조회할 수 있습니다. 성능 저하가 있었던 디바이스의 성능 정보를 확인하고, 성능 저하 현상 발생 전후 원인 분석이 가능합니다. [사용자 행동분석] 버튼을 클릭하면 해당 디바이스 사용자의 앱 실행 ~ 앱 종료까지의 화면 흐름을 ‘행동분석’ 페이지를 통해 확인할 수 있습니다.
리버스 스택은 디바이스 정보 리스트 중, 가장 성능 수치가 높은 사용자의 1분간의 Call Stack 정보를 종합하여 리버스 스택 형태로 상세 스택 정보를 보여주고 있습니다.
트리 뷰는 상세 Call Stack 정보를 트리 형태로 표시합니다. 최종 호출 된 함수부터 Top-Down 형태로 함수들을 나열하여 보여줍니다.
트리 뷰에서 가장 문제가 예상되는 함수를 추정할 수 있으며, 연관되는 다른 함수들을 통해 실제 앱에 영향을 주는 정도를 확인할 수 있습니다.
네이티브 트레이스 뷰는 네이티브 화면 로딩시간, 프래그먼트 로딩시간 성능 히트맵 또는 성능 수치 선택을 통해 확인할 수 있습니다.
네이티브 화면을 기준으로 어떤 성능 문제가 있었는지 다양한 각도에서 요인 분석이 가능합니다. 화면을 준비하고, 그리는 과정에서 성능 저하가 있었는지, 서버 요청/응답이 느렸는지 여러 요인을 빠르게 분석할 수 있습니다.
특정 네이티브 화면을 기준으로 네이티브 화면 로딩, Lifecycle, HTTP 요청 정보, 스택 정보를 통합 분석할 수 있습니다.
안드로이드 앱의 경우, 해당 네이티브 화면에서 호출했던 프래그먼트 정보도 함께 분석이 가능합니다.
해당 네이티브 화면 정보와 화면 로딩을 시작한 시간 정보를 표시합니다.
요약 정보에서는 선택한 성능 데이터의 사용자 정보와 화면 로딩시간 / 네이티브 화면 Lifecycle 단계 중 가장 소요시간이 긴 단계와 그 소요시간 / 해당 네이티브 화면에서 HTTP 요청이 있었을 경우, 요청 횟수와 가장 오래걸린 HTTP 요청의 응답시간을 요약하여 표시합니다.
트레이스 뷰를 통해 특정 네이티브 화면을 기준으로 네이티브 화면 로딩, Lifecycle, HTTP 요청 정보, 스택 정보를 통합 분석할 수 있습니다. 안드로이드 앱의 경우, 해당 네이티브 화면에서 호출했던 프래그먼트 정보도 함께 분석이 가능합니다.
❶ 검색 트레이스 뷰에 표시되는 항목을 키워드 검색으로 필터링할 수 있습니다.
❷ 범례 트레이스 뷰 표시 항목과 기준을 확인할 수 있습니다.
네이티브 화면 기준, 해당 화면에서 수집된 스택 정보가 있을 경우 오버 뷰 영역 아래에 표시된 마커로 확인할 수 있습니다. 클릭시 스택 상세 팝업을 표시합니다.
Lifecycle 단계별 시점에 따른 타이밍 정보를 확인할 수 있습니다. 표시하는 타이밍 정보는 다음과 같습니다. 오버 뷰 영역 아래에 표시된 마커로 확인할 수 있습니다. 안드로이드 앱의 경우, 해당 네이티브 화면에서 호출했던 프래그먼트 정보도 함께 표시합니다.
| 표시 | 라벨 | 설명 |
|---|---|---|
CP | Native Contentful Paint | CP는 네이티브 화면의 콘텐츠(텍스트, 이미지 등)가 렌더링 완료되어 사용자가 화면을 볼 수 있는 시점(OnCreate)입니다. |
TTI | Native Time to Interactive | TTI는 사용자가 네이티브 화면과 상호작용을 할 수 있는 시점(OnResume)입니다. |
CP | Fragment Contentful Paint | CP는 프래그먼트의 콘텐츠(텍스트, 이미지 등)가 렌더링 완료되어 사용자가 화면을 볼 수 있는 시점(OnCreateView)입니다. |
TTI | Fragment Time to Interactive | TTI는 사용자가 프래그먼트와 상호작용을 할 수 있는 시점(OnResume)입니다. |
네이티브 화면 로딩시간과 각 Lifecycle 단계별 시작시간, 종료까지 걸린 시간을 Waterfall 차트로 확인할 수 있습니다.
네이티브 화면 로딩시간 측정 과정에서 확인할 수 있는 정보는 다음과 같습니다. 네이티브 화면 로딩시간 / Lifecycle 막대에 마우스 포인터를 올리면 표시되는 툴팁으로 확인할 수 있습니다.
네이티브 화면 이름 / Duration: 네이티브 화면 로딩시간을 표시합니다.
Lifecycle 단계별 성능 정보: 각 Lifecycle의 시작 시간 ~ 종료 시간을 산출하여 표시합니다.
네이티브 화면 로딩시간과 Lifecycle 단계별 측정 과정에서 확인할 수 있는 정보는 다음과 같습니다.
네이티브 화면 Lifecycle을 통해 앱 사용자가 보는 화면의 상태를 알 수 있습니다.
onCreate는 화면을 그리기 위한 준비 단계(Initialization) 후 콘텐츠(텍스트, 이미지 등)가 렌더링 완료되어 사용자가 화면을 볼 수 있는 시점(Contentful Paint)을 의미합니다.
onResume는 사용자가 화면과 상호작용을 할 수 있는 시점(Time to Interactive)을 의미합니다.
어느 단계에 지연이 있는지 확인하여 네이티브 화면의 목표 성능을 설정하기 위한 개선 지표로 활용해 보세요.
* 안드로이드 앱 전용
네이티브 화면 기준, 해당 화면에서 수집된 프래그먼트 정보가 있을 경우 프래그먼트 로딩시간과 각 Lifecycle 단계별 시작시간, 종료까지 걸린 시간을 Waterfall 차트로 확인할 수 있습니다. 프래그먼트 로딩시간 측정 과정에서 확인할 수 있는 정보는 다음과 같습니다. 프래그먼트 로딩시간 / Lifecycle 막대에 마우스 포인터를 올리면 표시되는 툴팁으로 확인할 수 있습니다.
프래그먼트 화면 이름 / Duration: 프래그먼트 로딩시간을 표시합니다.
Lifecycle 단계별 성능 정보: 각 Lifecycle의 시작 시간 ~ 종료 시간을 산출하여 표시합니다.
프래그먼트 로딩시간과 Lifecycle 단계별 측정 과정에서 확인할 수 있는 정보는 다음과 같습니다.
프래그먼트 Lifecycle을 통해 앱 사용자가 보는 화면의 상태를 알 수 있습니다.
onCreate는 화면을 그리기 위한 준비 단계(Initialization)를 의미합니다.
onCreateView는 콘텐츠(텍스트, 이미지 등)가 렌더링 완료되어 사용자가 화면을 볼 수 있는 시점(Contentful Paint)을 의미합니다.
onResume는 사용자가 화면과 상호작용을 할 수 있는 시점(Time to Interactive)을 의미합니다.
어느 단계에 지연이 있는지 확인하여 프래그먼트의 목표 성능을 설정하기 위한 개선 지표로 활용해 보세요.
프래그먼트 Lifecycle 중 일부 단계의 수치가 ‘0ms’ 등으로 표시되는 경우, 각 단계 정보는 수집되었으나 실제 함수 실행은 없을 수 있습니다.
최신 Android Fragment 특성상 기본 코드 실행이 onViewCreate 단계로 이양되어, 디바이스 사양에 따라 일부 단계의 수치가 0ms ~ 5ms으로 측정될 수 있습니다.
네이티브 화면 기준, 해당 화면에서 HTTP 요청이 있었을 경우, 요청 정보와 응답 시간, 응답 코드를 보여줍니다. 이를 이용하여 특정 URL에서 발생하는 응답시간 분석, 에러 코드를 발생하는 URL 등을 파악할 수 있습니다. 4xx, 5xx 응답이었을 경우 위험 색상으로 표시합니다.
HTML 페이지가 onload 이벤트를 발생하는 시점까지의 데이터를 수집합니다. CSS, Javascript, Image 등 자원을 요청할 때 걸리는 시간과 FMP, FCP, DCL 등 타이밍 정보들을 함께 제공합니다.
따라서 사용자들은 웹 페이지의 load 시점까지 어떤 외부 요청이 있었는지 파악할 수 있으며, 페이지 로드 시 느려지는 병목 구간을 정확히 판단할 수 있습니다.
웹뷰 화면 로딩시간 성능 히트맵 등에서 선택한 영역 또는 수치의 사용자 디바이스 정보입니다. 화면, 앱 버전, OS 버전, 디바이스, 통신사, 위치, 화면 로딩시간, 사용자 수에 대한 정보를 리스트 형태로 보여줍니다. 가장 처음 상세 분석에 들어오면 가장 상단에 있는 디바이스 정보가 아래 타임라인에 표현되고 있습니다. 다른 타임라인을 확인하고 싶은 경우에는 다른 디바이스 정보를 선택하면 확인이 가능합니다. 성능 수치는 선택한 구간의 성능 데이터를 보여줍니다. 동일한 화면, 동일한 환경의 데이터일 경우 그 중 가장 최댓값을 표시합니다.
최신 iOS 버전의 경우, Apple의 보안정책에 의해 통신사 정보 수집이 불가능합니다. 이 경우 통신사 정보가 표시되지 않거나, ‘Unknown’ 등으로 표시될 수 있습니다.
디바이스 정보 리스트 중, 가장 성능 수치가 높은 사용자의 평균 페이지 로드 시간을 네트워크 / 서버 / 돔 / 로딩 시간을 요약하여 보여주고 있습니다. 또한 해당 시점의 디바이스 성능 정보도 요약해서 보여주고 있습니다.
Document의 전체 DOM이 그려지고 로딩되는 과정에서 확인할 수 있는 정보는 다음과 같습니다. Document request 타임라인에 마우스 포인터를 올리면 표시되는 툴팁으로 확인할 수 있습니다.
| 표시 | 라벨 | 설명 |
|---|---|---|
◻︎ | 대기 (Wait) | 요청 전 대기하는 시간 |
◼︎ | 네트워크 | 네트워크 탐색 및 연결 시간 |
◼︎ | 서버 | 서버에서 요청을 처리한 시간 |
◼︎ | 돔 (DOM) | HTML 해석 및 DOM 구축 시간 |
◼︎ | 로딩 | 그려지는 로딩 시간 |
◼︎ | 컨텐츠 다운로드 | 화면이 그려지는 시간 |
각 리소스에 대해 확인할 수 있는 정보는 다음과 같습니다. 각 리소스 타임라인에 마우스 포인터를 올리면 표시되는 툴팁으로 확인할 수 있습니다.
| 표시 | 라벨 | 설명 |
|---|---|---|
◻︎ | Waiting | 요청 전 대기하는 시간 |
︎◼︎ | Redirect | HTTP 리다이렉트 수행 시간 |
◼︎ | Fetch | 요청 전 대기하는 시간 또는 캐시 조회 시간 |
◼︎ | DomainLookup | 도메인에 해당하는 IP를 DNS에서 검색하는 시간 구축 시간 |
◼︎ | Connect | 서버 연결에 걸린 시간 |
◼︎ | Request sent | 서버에 리소스를 요청하는 시간 |
◼︎ | Response | 서버 응답 시간 |
수집하는 타이밍 정보는 다음과 같습니다. 타임라인에 표시된 마커로 확인할 수 있습니다.
| 표시 | 라벨 | 설명 |
|---|---|---|
⬇︎ | First-Paint (FP) | FP는 브라우저가 탐색 전에 화면에 있던 것과 시각적으로 다른 어떤 것이든 첫 비트를 렌더링 할 때의 지점입니다. |
⬇︎ | First-Contentful-Paint (FCP) | FCP는 첫 번째 콘텐츠(텍스트, 이미지 등)가 렌더링 완료되는 시점입니다. |
⬇︎ | First-Meaningful-Paint (FMP) | FMP는 폰트가 적용되는 등의 주요 콘텐츠가 사용자에게 보여지는 시점입니다. 이는 브라우저마다 측정하는 기준이 다릅니다. |
⬇︎ | Dom-Content-Loaded (DCL) | DCL 이벤트는 최초 HTML 문서가 완전히 로드 및 파싱되었을 때 발생되고, 스타일시트나 이미지 및 서브프레임 로드가 끝나기를 기다리지 않습니다. |
디바이스 정보 리스트에서 선택한 디바이스의 사용자가 어떤 흐름으로 앱을 이용했는지 연계하여 추적 조회할 수 있습니다. 성능 저하가 있었던 디바이스의 성능 정보를 확인하고, 성능 저하 현상 발생 전후 원인 분석이 가능합니다. [사용자 행동분석] 버튼을 클릭하면 해당 디바이스 사용자의 앱 실행 ~ 앱 종료까지의 화면 흐름을 ‘행동분석’ 페이지를 통해 확인할 수 있습니다.
IMQA MPM 에서는 HTTP 응답시간과 응답 코드를 수집하고 있습니다. 클라이언트로부터 HTTP 요청을 분석할 수 있습니다. 단말에서 수집된 HTTP정보는 ms 단위로 수집되며 HTTP 헤더 정보와 응답 코드를 보여줍니다. 이를 이용하여 특정 URL에서 발생하는 응답시간 분석, 에러 코드를 발생하는 URL 등을 파악할 수 있습니다. 성능 수치는 선택한 구간의 성능 데이터를 보여줍니다. 동일한 화면, 동일한 환경의 데이터일 경우 그 중 가장 최댓값을 표시합니다.
리액트 네이티브의 경우, 컴포넌트 로딩 분석이 가능합니다. 리액트 네이티브에서 네이티브 UI 구성 요소를 사용하여 UI를 렌더링 할 때, 제일 우선적으로 렌더링이 이루어지는 상위 컴포넌트 (부모 컴포넌트)와 해당 컴포넌트에서 import 하여 사용되는 컴포넌트 (자식 컴포넌트) 를 구분하여 분석할 수 있습니다.
클라이언트에서 수집하는 HTTP 관련 정보는 다음과 같습니다.
| 라벨 | 설명 |
|---|---|
메소드 | HTTP Method (GET, POST, UPDATE, PUT, DELETE 등) |
호스트 | 도메인 정보 |
상태 | HTTP 응답 코드 |
경로 | 요청 URL |
응답 시간 | HTTP 요청에 대한 응답시간 |
