MPM - 3. 웹뷰 타임라인

많이 보는 데이터지만 대개 개발 영역이라고 생각하고 지나가는 것 중 하나가 바로 웹뷰 타임라인일 것입니다. 그러나 타임라인을 구성하는 기본 지표를 이해하고, 자주 발생하는 케이스를 중심으로 익혀보면 누구나 타임라인을 읽을 수 있습니다. 아래 각 지표에 대한 설명과 사례를 통해 타임라인을 읽어 보세요.

웹 페이지의 전반적인 로딩 과정을 알고 타임라인 지표를 보신다면 더욱 쉽게 데이터를 읽으실 수 있습니다. 웹 페이지 로딩에 대한 상세 설명은 아래 블로그 게시물을 통해 확인하실 수 있습니다.

• 웹 페이지 로딩 과정 이해하기: https://blog.imqa.io/webpage_loading_process/

1. 웹 리소스 분석

성능 히트맵 선택 시, 확인할 수 있는 웹 리소스 상세 페이지에서는 해당 구간의 디바이스 요약 정보와 함께 시각화된 웹 상세 지표를 확인하실 수 있습니다. 웹 페이지의 load 시점까지 어떤 외부 요청이 있었는지 파악할 수 있으며, 페이지 로드 시 느려지는 병목 구간을 정확히 판단할 수 있습니다.

1.1. 웹뷰 표준 지표

웹뷰 타임라인 지표는 표준 지표인 ‘Navigation Timing’를 기준으로 사용자 환경에서 데이터를 수집하여 IMQA MPM의 타임라인 데이터로 제공하고 있습니다.

1.2 타임라인 지표

타임라인 지표는 Document Request 데이터와 Resource 데이터, 두 가지 타입으로 수집하여 보여주고 있습니다.

(1) Document Request (페이지)

페이지에 접근했을 때, 페이지가 Load 이벤트 타임까지 수집된 현황을 보여줍니다. 따라서 Document Request 데이터를 통해 페이지에서 로딩이 완료되기까지 어떤 일이 발생했는지 확인할 수 있습니다.

Load 이벤트는 화면 로딩이 완료되는 시점에 발생합니다.

표시	라벨	설명
◽︎	대기 (Wait)	요청 전 대기하는 시간
◼︎	네트워크	네트워크 탐색 및 연결 시간으로 Connect와 Domainlookup 지표를 합쳐 표현
◼︎	서버	Request sent와 Respose를 합쳐, 하나의 http 트랜젝션을 수행하는 데 드는 시간 (서버에서 요청을 처리한 시간)
◼︎	돔 (DOM)	DOM(Document Object Model)을 만들 때 걸리는 시간
◼︎	로딩	그려지는 로딩 시간
◼︎	컨텐츠 다운로드	화면이 그려지는 시간

(2) Resource (리소스)

Resource에서는 페이지에 진입하였을 때, 페이지가 Load 이벤트 타임까지 수집된 리소스들 현황을 확인할 수 있습니다. 수집된 리소스는 Document Request 수치에 영향을 끼칩니다.

표시	라벨	설명
◽︎	Waiting	요청 전 대기하는 시간
◼︎	Redirect	HTTP 리다이렉트 수행 시간
◼︎	Fetch	요청 전 대기하는 시간 또는 캐시 조회 시간
◼︎	DomainLookup	도메인에 해당하는 IP를 DNS에서 검색하는 시간 (서버의 주소를 찾는 과정)
◼︎	Connect	서버 연결에 걸린 시간
◼︎	Request sent	서버에 리소스를 요청하는 시간
◼︎	Response	서버 응답 시간

2. Case Study

사용자 환경에서 수집된 지표를 통해 다양한 상황을 확인할 수 있습니다. 크게 몇 가지 유형으로 구분할 수 있으며, 해당 데이터를 통해 특정 상황/문제를 확인할 수 있습니다. 자주 발생하는 상황을 참고하여, 사용자가 겪는 문제 상황을 예측하고 빠르게 대응해 보세요.

2.1. 서버에서 리소스가 늦는 경우

사용자가 웹 페이지에서 특정 행동을 할 때, 서버에 요청하여 문서를 받아옵니다. 이 과정에서 서버가 클라이언트의 요청을 늦게 인식하거나 응답이 늦는 경우 화면이 느리게 나타납니다. 사용자 화면에서는 서버에서 리소스가 늦게 불러와지는 경우, 흰 화면이 보여지거나 화면이 변경되지 않는 증상을 볼 수 있습니다. 이 경우, 타임라인 지표의 형태는 아래와 같습니다. Document Request와 Resource의 각 지표가 어떤 형태일 때, 서버에서 리소스가 늦는 상황인지 확인해 보세요.

➊ Document Request 네트워크 또는 서버 바가 길게 나타납니다.

➋ Resource Fetch, DomainLookup, Connect, Request sent, Response 지표 수치가 다른 수치보다 높게 수집됩니다.

(1) 리소스의 사이즈가 크거나 서버가 불안정한 경우

Resource의 Fetch, Request sent, Response가 높아지고 Document Request에서는 서버가 길어지는 상황으로 리소스의 사이즈가 커서 느리게 받아와지거나 서버가 불안정한 경우 발생합니다.

(2) 서버가 불안정한 경우

Resource의 DomainLookup, Connect가 높아지고, Document Request에서는 네트워크가 높아지는 상황으로 서버가 불안정하여 리소스들이 요청에 대한 응답이 느린 경우 발생합니다.

2.2. 화면이 느리게 그려지는 경우

서버에서는 빠르게 응답하여 html 문서를 받아왔지만 클라이언트에서 렌더링이 느린 경우가 있습니다. 이때, 사용자는 화면이 버벅이는 증상과, 콘텐츠가 부분적으로 그려지는 현상을 경험하게 됩니다.

➊ Document Request 돔과 로딩 지표가 높게 나타납니다.

➋ Resource Request sent, Response 지표 수치가 다른 수치보다 높게 수집됩니다.

(1) DOM은 완성되었지만, 문서를 계속 그리는 경우

Document Request에서 로딩이 높아지는 상황으로, DOM은 완성되었지만 문서는 아직 그리는 상황입니다. 주로 스타일을 재정의하거나 동적으로 스타일을 구성해주는 경우 발생합니다.

(2) 리소스가 DOM에 영향을 주는 경우

Resource에서 Request sent, Response이 높아지면, Document Request에서 돔이 높아지는 상황입니다. 리소스가 DOM에 영향을 주는 경우 발생하며, 주로 동적으로 DOM을 조작하거나 렌더링하는 JS의 응답이 늦어져 화면이 느리게 그려진 경우입니다.

2.3. API 응답 여부가 화면 로딩 속도에 영향을 끼는 경우

➊ Resource - Resource 중에 API 요청 이후에 리소스가 불러와지고 있습니다. - 특정 API 요청 전까지는 Resource 데이터가 불러와지지 않고, API가 다 불러와진 이후 Resource 데이터가 수집되는 것을 확인할 수 있습니다. - API 응답이 완료되어야만 다음 화면을 그리는 경우 발생합니다.