> For the complete documentation index, see [llms.txt](https://docs.imqa.io/imqa-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.imqa.io/imqa-guide/user-guide/data/mpm3.md).

# MPM - 3. 웹뷰 타임라인

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

&#x20; • 웹 페이지 로딩 과정 이해하기: <https://blog.imqa.io/webpage_loading_process/>

##

## 1. 웹 리소스 분석

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

### 1.1. 웹뷰 표준 지표

<figure><img src="/files/4jmn0YllDrdBxYdyudNt" alt=""><figcaption></figcaption></figure>

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

### 1.2 타임라인 지표

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

<figure><img src="/files/Vd93wjT4oiXDh5uEVaSD" alt=""><figcaption></figcaption></figure>

#### (1) Document Request (페이지)

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

{% hint style="info" %}
Load 이벤트는 화면 로딩이 완료되는 시점에 발생합니다.
{% endhint %}

<figure><img src="/files/cRTqzFHDcUMCv1GFBBLP" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="114" align="center">표시</th><th width="172" align="center">라벨</th><th align="center">설명</th></tr></thead><tbody><tr><td align="center">◽︎</td><td align="center">대기 (Wait)</td><td align="center">요청 전 대기하는 시간</td></tr><tr><td align="center"><mark style="color:orange;">◼︎</mark></td><td align="center">네트워크</td><td align="center"><p>네트워크 탐색 및 연결 시간으로</p><p>Connect와 Domainlookup 지표를 합쳐 표현</p></td></tr><tr><td align="center"><mark style="color:purple;">◼︎</mark></td><td align="center">서버</td><td align="center">Request sent와 Respose를 합쳐, 하나의 http 트랜젝션을 수행하는 데 드는 시간 (서버에서 요청을 처리한 시간)</td></tr><tr><td align="center"><mark style="color:green;">◼︎</mark></td><td align="center">돔 (DOM)</td><td align="center">DOM(Document Object Model)을 만들 때 걸리는 시간</td></tr><tr><td align="center"><mark style="color:blue;">◼︎</mark></td><td align="center">로딩</td><td align="center">그려지는 로딩 시간</td></tr><tr><td align="center"><mark style="color:yellow;">◼︎</mark></td><td align="center">컨텐츠 다운로드</td><td align="center">화면이 그려지는 시간</td></tr></tbody></table>

#### (2) Resource (리소스)

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

<figure><img src="/files/5pNgemjQCDeDIOrynwrx" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="115.33333333333331" align="center">표시</th><th width="170" align="center">라벨</th><th align="center">설명</th></tr></thead><tbody><tr><td align="center">◽︎</td><td align="center">Waiting</td><td align="center">요청 전 대기하는 시간</td></tr><tr><td align="center"><mark style="color:blue;">◼︎</mark></td><td align="center">Redirect</td><td align="center">HTTP 리다이렉트 수행 시간</td></tr><tr><td align="center"><mark style="color:purple;">◼︎</mark></td><td align="center">Fetch</td><td align="center">요청 전 대기하는 시간 또는 캐시 조회 시간</td></tr><tr><td align="center"><mark style="color:blue;">◼︎</mark></td><td align="center">DomainLookup</td><td align="center"><p>도메인에 해당하는 IP를 DNS에서 검색하는 시간</p><p>(서버의 주소를 찾는 과정)</p></td></tr><tr><td align="center"><mark style="color:orange;">◼︎</mark></td><td align="center">Connect</td><td align="center">서버 연결에 걸린 시간</td></tr><tr><td align="center"><mark style="color:green;">◼︎</mark></td><td align="center">Request sent</td><td align="center">서버에 리소스를 요청하는 시간</td></tr><tr><td align="center"><mark style="color:yellow;">◼︎</mark></td><td align="center">Response</td><td align="center">서버 응답 시간</td></tr></tbody></table>

## 2. Case Study

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

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

<figure><img src="/files/uPHKtnATg6dXl2JnInsi" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/ACucNOjVKUHqADoM7yLb" alt=""><figcaption></figcaption></figure>

➊ **Document Request**\
&#x20; 네트워크 또는 서버 바가 길게 나타납니다.

**➋** **Resource**\
&#x20; Fetch, DomainLookup, Connect, Request sent, Response 지표 수치가 다른 수치보다 높게 수집됩니다.

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

<figure><img src="/files/pQ77pmIePoXzdPjD6c94" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/TwMli8wgcShJc6tmLlE6" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/24CHMtYeRwaakc4kT8cw" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/6aGZjAVqmIXMkzFMF63B" alt=""><figcaption></figcaption></figure>

➊ **Document Request**\
&#x20; 돔과 로딩 지표가 높게 나타납니다.

**➋** **Resource**\
&#x20; Request sent, Response 지표 수치가 다른 수치보다 높게 수집됩니다.

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

<figure><img src="/files/rJQbKhZj8si9919g1jiL" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/eUpjN1ecQzDmk4vh9v5S" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/3vuV7iC1ALGx651Bf2wn" alt=""><figcaption></figcaption></figure>

➊ **Resource**\
&#x20;  \- Resource 중에 API 요청 이후에 리소스가 불러와지고 있습니다.\
&#x20;  \- 특정 API 요청 전까지는 Resource 데이터가 불러와지지 않고, API가 다 불러와진 이후 Resource 데이터가 수집되는 것을 확인할 수 있습니다.\
&#x20;  \- <mark style="color:red;">API 응답이 완료되어야만 다음 화면을 그리는 경우 발생합니다.</mark>