성능 상세 분석

성능 상세 분석 기능은 유료 플랜에서 사용 가능합니다.

성능 상세 분석

IMQA MPM 성능 상세 분석은 ‘화면 성능 분석’ ‘구간 분석’페이지의 성능 히트맵을 통해 확인할 수 있는 기능입니다. 성능 히트맵에서 원하는 셀을 선택하거나 구간을 마우스 드래그로 선택하면 표시됩니다. 성능 상세 분석에서는 네이티브 스택 분석, 웹 리소스 분석, 컴포넌트 로딩 분석, 상세 응답 분석을 하실 수 있습니다. 이를 통해 성능의 문제점 또는 문제가 되는 구간을 파악할 수 있습니다.

또한, 사용자 행동분석 기능을 통해 성능 문제가 발견된 앱 사용자가 어떤 이동경로로 앱을 이용했는지 전체 행동 흐름을 확인할 수 있습니다.

1. 네이티브 스택 분석

네이티브 스택 분석은 어플리케이션 내에서 Call Stack 정보를 주기적으로 수집하여 해당 히트맵 시점의 Call Stack 정보를 종합하여 제공하고 있습니다. 예를 들어 화면이 로딩되는 시점의 Call Stack 정보를 확인하면, GUI 관련 함수와 이미지 라이브러리 등 함수들이 많이 콜스택으로 보이게 됩니다. 해당 기능을 통해서 오래 걸리는 화면 또는 CPU, Memory가 높은 시점의 스택 정보를 확인하여 어떤 함수들이 성능을 저하시키고 있는 지 확인할 수 있습니다.

프로가드 설정 / dSYM 설정을 통해 각 버전의 매핑 파일로 복호화가 되었을 경우, 실제 소스의 파일 및 위치까지 정확히 표시됩니다. 프로가드 설정 / dSYM 설정은 ‘MPM 사용하기 > 프로젝트 리스트 > 프로젝트 관리 > 프로가드 설정 / dSYM 설정'을 참고하세요.

디바이스 정보 리스트

‘화면 성능 분석’ ‘구간 분석’ 페이지의 성능 히트맵에서 선택한 영역의 디바이스 정보입니다. 화면, 앱 버전, OS 버전, 디바이스, 통신사, 위치, 화면 로딩시간, 사용자 수에 대한 정보를 리스트 형태로 보여줍니다. 가장 처음 상세 분석에 들어오면 가장 상단에 있는 디바이스 정보가 아래 리버스 스택에 표현되고 있습니다. 다른 스택 정보를 확인하고 싶은 경우에는 다른 디바이스 정보를 선택하면 확인이 가능합니다. 화면 로딩시간은 ‘화면 성능 분석’ ‘구간 분석’에서 선택한 구간의 성능 데이터를 보여줍니다.

사용자 행동 분석 (역추적 행동 분석)

디바이스 정보 리스트에서 선택한 디바이스의 사용자가 어떤 흐름으로 앱을 이용했는지 연계하여 추적 조회할 수 있습니다. 성능 저하가 있었던 디바이스의 성능 정보를 확인하고, 성능 저하 현상 발생 전후 원인 분석이 가능합니다. [사용자 행동분석] 버튼을 클릭하면 해당 디바이스 사용자의 앱 실행 ~ 앱 종료까지의 화면 흐름을 ‘행동분석’ 페이지를 통해 확인할 수 있습니다.

리버스 스택 - 개요

리버스 스택은 단말 정보 리스트에서 선택된 디바이스 정보의 1분간의 Call Stack 정보를 종합하여 리버스 스택 형태로 상세 스택 정보를 보여주고 있습니다.

리버스 스택 - 트리 뷰

트리 뷰는 상세 Call Stack 정보를 트리 형태로 표시합니다. (괄호) 안에 있는 숫자는 퍼센트(%)를 보여주고 있으며 호출 된 함수의 비율을 보여주고 있습니다. 최종 호출 된 함수부터 Top-Down 형태로 함수들을 나열하여 보여줍니다.

트리 뷰에서 가장 문제가 예상되는 함수를 추정할 수 있으며, 연관되는 다른 함수들을 통해 실제 앱에 영향을 주는 정도를 확인할 수 있습니다.

리버스 스택 - 썬버스트 뷰

썬버스트 그래프는 전체 쓰레드의 콜스택을 합한 것으로 어떤 함수가 실행 중 가장 많이 차지하고 있는지 한눈에 확인할 수 있습니다. 그래프에서 마우스를 오버하면 해당되는 함수가 하단에 표시됩니다.

함수가 발생한 위치와 함수가 발견된 횟수, 관련된 다른 함수 정보를 이용하면 앱이 실행 중에 어떤 동작으로 하고 있었는지 파악할 수 있습니다. 이를 토대로 성능 문제의 원인 분석을 할 수 있습니다.

❶ 전체 전체 Thread에 대한 Call Stack 정보를 보여줍니다. 주로 전체적인 함수 사용량을 확인할 때 사용됩니다.

❷ 액티비티 콜 대기 중을 의미하는 함수 (루프를 돌고 있거나 Wait를 호출하고 있는 함수)를 제외한 나머지 정보만 보여주고 있습니다. Active Call 정보를 활용하여 영향력이 적은 정보가 제거된 실제 영향을 끼친 함수를 파악할 수 있습니다.

❸ 전체 스레드 UI와 비UI 상관 없이 전체 스레드 정보를 확인할 수 있습니다.

❹ UI 스레드 UI와 관련된 함수 정보만 파악할 수 있습니다.

❺ 비 UI 스레드 UI를 제외한 함수 정보를 확인할 수 있으며, 백그라운드에서 자원을 사용하는 함수를 파악할 수 있습니다.

❻ 자원 사용량 썬버스트 그래프와 함께 제공되는 CPU, Memory, Network 영역은 선택된 시간 동안 단말의 평균 사용량을 나타내 주며 이를 OS 영역과 App 영역으로 구분하여 표시됩니다.

2. 웹 리소스 분석

HTML 페이지가 onload 이벤트를 발생하는 시점까지의 데이터를 수집합니다. CSS, Javascript, Image 등 자원을 요청할 때 걸리는 시간과 FMP, FCP, DCL 등 타이밍 정보들을 함께 제공합니다.

따라서 사용자들은 웹 페이지의 load 시점까지 어떤 외부 요청이 있었는지 파악할 수 있으며, 페이지 로드 시 느려지는 병목 구간을 정확히 판단할 수 있습니다.

디바이스 정보 리스트

‘화면 성능 분석’ ‘구간 분석’ 성능 히트맵에서 선택한 영역의 디바이스 정보입니다. 화면, 앱 버전, OS 버전, 디바이스, 통신사, 위치, 화면 로딩시간, 사용자 수에 대한 정보를 리스트 형태로 보여줍니다. 가장 처음 상세 분석에 들어오면 가장 상단에 있는 디바이스 정보가 아래 타임라인에 표현되고 있습니다. 다른 타임라인을 확인하고 싶은 경우에는 다른 디바이스 정보를 선택하면 확인이 가능합니다.

사용자 행동 분석 (역추적 행동 분석)

디바이스 정보 리스트에서 선택한 디바이스의 사용자가 어떤 흐름으로 앱을 이용했는지 연계하여 추적 조회할 수 있습니다. 성능 저하가 있었던 디바이스의 성능 정보를 확인하고, 성능 저하 현상 발생 전후 원인 분석이 가능합니다. [사용자 행동분석] 버튼을 클릭하면 해당 디바이스 사용자의 앱 실행 ~ 앱 종료까지의 화면 흐름을 ‘행동분석’ 페이지를 통해 확인할 수 있습니다.

요약 정보

평균 페이지 로드 시간을 네트워크 / 서버 / 돔 / 로딩 시간을 요약하여 보여주고 있습니다. 또한 해당 시점의 디바이스 성능 정보도 요약해서 보여주고 있습니다.

타임라인

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 문서가 완전히 로드 및 파싱되었을 때 발생되고, 스타일시트나 이미지 및 서브프레임 로드가 끝나기를 기다리지 않습니다.

3. 상세 응답 분석 / 컴포넌트 로딩 분석

IMQA MPM 에서는 HTTP 응답시간과 응답 코드를 수집하고 있습니다. 클라이언트로부터 HTTP 요청을 분석할 수 있습니다. 단말에서 수집된 HTTP정보는 ms 단위로 수집되며 HTTP 헤더 정보와 응답 코드를 보여줍니다. 이를 이용하여 특정 URL에서 발생하는 응답시간 분석, 에러 코드를 발생하는 URL 등을 파악할 수 있습니다.

리액트 네이티브의 경우, 컴포넌트 로딩 분석이 가능합니다. 리액트 네이티브에서 네이티브 UI 구성 요소를 사용하여 UI를 렌더링 할 때, 제일 우선적으로 렌더링이 이루어지는 상위 컴포넌트 (부모 컴포넌트)와 해당 컴포넌트에서 import 하여 사용되는 컴포넌트 (자식 컴포넌트) 를 구분하여 분석할 수 있습니다.

클라이언트에서 수집하는 HTTP 관련 정보는 다음과 같습니다.

라벨	설명
메소드	HTTP Method (GET, POST, UPDATE, PUT, DELETE 등)
호스트	도메인 정보
상태	HTTP 응답 코드
경로	요청 URL
응답 시간	HTTP 요청에 대한 응답시간