# MPM - 3. 웹뷰 타임라인

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

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

##

## 1. 웹 리소스 분석

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

### 1.1. 웹뷰 표준 지표

<figure><img src="https://3726060384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzFyCopc6yAp3UcEYW6la%2Fuploads%2FbJWQXAw4ICJdrVJq0rVX%2Fsaas_data_guide_3-1.png?alt=media&#x26;token=786eff7a-596d-4495-9ccd-c57d2dbdc214" alt=""><figcaption></figcaption></figure>

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

### 1.2 타임라인 지표

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

<figure><img src="https://3726060384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzFyCopc6yAp3UcEYW6la%2Fuploads%2Fd0zPkjFhCTsn8lzBmlD0%2Fsaas_data_guide_3-2-1.jpg?alt=media&#x26;token=ef345ce3-fd65-4201-bf07-a2d243997dc4" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="https://3726060384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzFyCopc6yAp3UcEYW6la%2Fuploads%2Fe0JWK5EZWtcDyGgnri9Y%2Fsaas_data_guide_3-3.jpg?alt=media&#x26;token=955a5e52-db8e-4918-8caf-09a4b11f3779" 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="https://3726060384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzFyCopc6yAp3UcEYW6la%2Fuploads%2FWAqctVevhJApxYBrPIZk%2Fsaas_data_guide_3-4.jpg?alt=media&#x26;token=a6b369ae-e776-46bf-a831-aa7e15442380" 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="https://3726060384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzFyCopc6yAp3UcEYW6la%2Fuploads%2FyxAVUA4un6SgvHlg9jSX%2Fsaas_data_guide_3-5.jpg?alt=media&#x26;token=52bf91e1-8fd3-4705-82db-7d6474296275" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3726060384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzFyCopc6yAp3UcEYW6la%2Fuploads%2F8GgdkXIq2mXX2iAH8khT%2Fsaas_data_guide_3-6-2.jpg?alt=media&#x26;token=6d2b28ae-5dde-40a1-9b54-b0b904a38a77" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="https://3726060384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzFyCopc6yAp3UcEYW6la%2Fuploads%2F61571omNkRlMEwPWbcjZ%2Fsaas_data_guide_3-7-2.jpg?alt=media&#x26;token=68d98375-ce92-4423-9488-cf04125886ea" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://3726060384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzFyCopc6yAp3UcEYW6la%2Fuploads%2FebdhijV8yElee71Ynt01%2Fsaas_data_guide_3-8-2.jpg?alt=media&#x26;token=f7a880ca-4180-498b-8a6a-e480f289dbac" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://3726060384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzFyCopc6yAp3UcEYW6la%2Fuploads%2FIiIkWv7yFLq5ggmS4X3N%2Fsaas_data_guide_3-9.jpg?alt=media&#x26;token=85068c2b-1fe9-4aeb-8956-df8fb42769b5" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3726060384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzFyCopc6yAp3UcEYW6la%2Fuploads%2FQ2G1YXR1LGGrM0eyEhyC%2Fsaas_data_guide_3-10-2.jpg?alt=media&#x26;token=8c3ad359-876d-4667-9554-77875896b0dd" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="https://3726060384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzFyCopc6yAp3UcEYW6la%2Fuploads%2FXsHM0l0ffRTJlhdkHjHQ%2Fsaas_data_guide_3-11.jpg?alt=media&#x26;token=2356bcca-04d9-42bb-8ac4-226c3efb8d69" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://3726060384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzFyCopc6yAp3UcEYW6la%2Fuploads%2FXGR5S2CkndLmo8KRWHZs%2Fsaas_data_guide_3-12-2.jpg?alt=media&#x26;token=1083953b-c8ac-4002-9602-5d8378c8d379" 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="https://3726060384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzFyCopc6yAp3UcEYW6la%2Fuploads%2FU89wGvjZdR23IceHsjsY%2Fsaas_data_guide_3-13.jpg?alt=media&#x26;token=b728d7b7-198a-41cc-b9e1-105ae0eb0a74" alt=""><figcaption></figcaption></figure>

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