성능 상세 분석
IMQA WPM 성능 상세 분석은 ‘페이지 성능 분석’ ‘구간 분석’페이지의 성능 히트맵 등을 통해 확인할 수 있는 기능입니다. 성능 히트맵에서 원하는 셀을 선택하거나 구간을 마우스 드래그로 선택하면 표시됩니다. 성능 상세 분석에서는 페이지 로딩시간 분석, 상세 응답 분석을 하실 수 있습니다. 이를 통해 성능의 문제점 또는 문제가 되는 구간을 파악할 수 있습니다.
또한, 사용자 행동분석 기능을 통해 성능 문제가 발견된 웹 사이트 사용자가 어떤 이동경로로 이용했는지 전체 행동 흐름을 확인할 수 있습니다.
1. 페이지 로딩시간 분석
HTML 페이지가 onload 이벤트를 발생하는 시점 또는 SPA 방식으로 구현된 웹 브라우저 애플리케이션에서 DOM 변경에 의한 로딩시간을 측정합니다. CSS, Javascript, Image 등 자원을 요청할 때 걸리는 네트워크 시간과 FMP, FCP, DCL 등 타이밍 정보, LCP, LS, FID의 웹 바이탈 성능 지표를 함께 제공합니다. 따라서 사용자들은 웹 페이지의 로딩 중 어떤 외부 요청이 있었는지 파악할 수 있으며, 페이지 로드 시 느려지는 병목 구간을 정확히 판단할 수 있습니다.
사용자 디바이스 정보 리스트
‘페이지 성능 분석’ ‘구간 분석’ 성능 히트맵 등에서 선택한 영역의 사용자 디바이스 정보입니다. 페이지, 디바이스, OS, 브라우저, 브라우저 버전, 페이지 로딩시간, 사용자 수에 대한 정보를 리스트 형태로 보여줍니다. 가장 처음 상세 분석에 들어오면 가장 상단에 있는 디바이스 정보로 성능 정보를 조회합니다. 다른 성능 정보를 확인하고 싶은 경우에는 다른 디바이스 항목을 선택하면 확인이 가능합니다. 동일 조건으로 그룹핑 된 디바이스 항목의 경우, 가장 느린 수치의 사용자 성능 정보를 조회합니다.
페이지: 선택한 시간대와 구간의 페이지를 표시합니다.
디바이스: 사용자 접속 OS에 따라 ‘Desktop’과 ‘Mobile’로 분류하여 표시됩니다.
OS: 사용자 접속 OS를 표시합니다.
브라우저/버전: 사용자 접속 브라우저와 버전을 표시합니다.
로딩시간(ms): 사용자 페이지 로딩시간을 표시합니다. 동일 조건으로 그룹핑 된 항목의 경우, 평균으로 산출합니다.
사용자 수: 해당 건 수를 표시합니다. 동일 조건으로 집계된 데이터 수를 의미합니다.
사용자 정보는 웹 사이트에 접속했을 때 사용자의 User-Agent 정보를 기반으로 표시합니다. IMQA WPM은 사용자들이 주로 사용하는 OS와 브라우저로 크게 구분하고 있습니다. OS의 경우, ‘Windows’ ‘macOS’ ‘Android’ ‘iOS’ ‘Linux’ 등으로 구분됩니다.
브라우저의 경우, ‘Chrome’ ‘Safari’ ‘Microsoft Edge’ ‘Firefox’ ‘Samsung Browser’ 등으로 구분됩니다. 특정되지 않은 OS나 브라우저의 경우, ‘Unknown’으로 표시될 수 있습니다.
사용자 행동분석
디바이스 정보 리스트에서 선택한 디바이스의 사용자가 어떤 흐름으로 웹 사이트를 이용했는지 연계하여 추적 조회할 수 있습니다. 성능 저하가 있었던 디바이스의 성능 정보를 확인하고, 성능 저하 현상 발생 전후 원인 분석이 가능합니다. [사용자 행동분석] 버튼을 클릭하면 해당 디바이스 사용자의 세션 시작 ~ 세션 종료까지의 화면 흐름을 ‘행동분석’ 페이지를 통해 확인할 수 있습니다.
성능 상세 분석 ~ 사용자 행동분석은 ‘IMQA WPM 사용자 가이드 > 행동분석 역추적'을 참고하세요.
요약정보
선택한 디바이스 사용자의 Document 평균 네트워크 / 서버 / 돔 / 로딩 시간을 요약하여 표시합니다. 핵심 웹 바이탈 지표인 LCP / FID / LS가 발생하였을 경우, 수치 정보를 KPI로 표시합니다. Google 권고 평가 구간별 색상으로 표시합니다.
성능 프로파일링
성능 프로파일링을 통해 선택한 디바이스 사용자의 웹 페이지의 로딩 중 CSS, Javascript, Image 등 자원을 요청할 때 걸리는 네트워크 시간과 FMP, FCP, DCL, LCP, FID, LS 등 웹 바이탈 타이밍 정보를 함께 확인할 수 있습니다.
성능 프로파일링 - 툴바
툴바에서는 성능 프로파일링 기능 가이드를 보거나, 네트워크 항목의 키워드 검색과 리소스 유형으로 필터링할 수 있습니다.
❶ 기능 가이드 보기 성능 프로파일링의 핵심 기능을 확인할 수 있습니다. 클릭시 기능 가이드 팝업을 표시합니다.
❷ 검색 네트워크 섹션에 표시되는 리소스 항목을 키워드 검색으로 필터링할 수 있습니다.
❸ 리소스 유형 필터 네트워크 섹션에 표시되는 리소스 항목을 유형별로 필터링할 수 있습니다.
전체: 기본 ‘전체’로 설정되어 있으며, 전체 유형의 리소스 항목을 표시합니다.
HTML: 리소스 유형이 ‘document’인 항목을 표시합니다.
CSS: 리소스 유형이 ‘css’ 등의 항목을 표시합니다.
Media: 리소스 유형이 ‘img’, ‘video’, ‘media’ 등의 항목을 표시합니다.
JS: 리소스 유형이 ‘script’인 항목을 표시합니다.
Others: 그 외 리소스 유형 항목을 표시합니다.
성능 프로파일링 - 오버 뷰 / 네비게이션
오버 뷰 / 네비게이션 섹션에서는 웹 페이지 로딩까지 네트워크, 스크립팅 과정에서의 병목 지점을 한눈에 확인할 수 있습니다. 병목 구간을 확인하고 오버 뷰 영역을 드래그하여 해당 구간을 선택하여 자세히 보거나, 좌/우 마우스 동작으로 구간을 빠르게 탐색할 수 있습니다.
오버 뷰는 기본 전체 구간으로 설정되어 있으며, 리소스 요청/응답, 스크립팅 과정에서 수집된 요소들이 동일한 색상으로 표시됩니다. 같은 시간축에 중첩된 요소가 많을수록 그래프가 높게 표시됩니다.
성능 프로파일링 영역에서 눈에 띄는 구간이 있다면 오버 뷰 영역을 드래그하여 해당 구간을 자세히 확인할 수 있습니다.
성능 프로파일링 - 타이밍 / 웹 바이탈
웹 페이지의 로딩 중 수집된 타이밍 정보와 웹 바이탈 성능 지표를 확인할 수 있습니다. 핵심 웹 바이탈의 경우, 연관 정보를 함께 표시합니다. 수집하는 타이밍 정보는 다음과 같습니다. 오버 뷰 영역 아래에 표시된 마커로 확인할 수 있습니다.
| 표시 | 라벨 | 설명 |
|---|---|---|
FP | First Paint | FP는 브라우저가 탐색 전에 화면에 있던 것과 시각적으로 다른 어떤 것이든 첫 비트를 렌더링 할 때의 지점입니다. |
FCP | First Contentful Paint | FCP는 첫 번째 콘텐츠(텍스트, 이미지 등)가 렌더링 완료되는 시점입니다. |
DCL | Dom Content Loaded | DCL 이벤트는 최초 HTML 문서가 완전히 로드 및 파싱되었을 때 발생되고, 스타일시트나 이미지 및 서브프레임 로드가 끝나기를 기다리지 않습니다. |
LOAD | Onload | onload 이벤트는 최초 HTML 문서와 이미지 등의 컨텐츠가 완전히 로딩 완료되는 시점입니다. |
수집하는 웹 바이탈 정보는 다음과 같습니다. 오버 뷰 영역 아래에 표시된 마커로 확인할 수 있습니다.
| 표시 | 라벨 | 설명 |
|---|---|---|
LCP | Largest Contentful Paint | LCP는 페이지 로드 중 사용자의 뷰포트에서 가장 큰 콘텐츠 요소가 표시되는 시점입니다. |
FID | First Input Delay | FID는 페이지 로드 중 사용자가 페이지와 처음 상호 작용한 이벤트의 처리 시점입니다. |
LS | Layout Shift | LS는 페이지 로드 중 예상치 못한 레이아웃 전환 시점입니다. |
타이밍 정보를 통해 웹 페이지 로딩 중 중요한 시점 정보를 확인할 수 있습니다. 예를 들어, 빠른 FP와 FCP는 사용자에게 웹 페이지가 빠르게 응답하고 있다는 인상을 줄 수 있습니다. 웹 바이탈 성능 지표인 LCP, FID, LS(CLS)는 페이지의 로딩 성능, 상호 작용, 시각적 안정성 3가지 요소를 기준으로 페이지의 사용자 경험을 평가하는 Google의 웹 성능 지표입니다.
웹 바이탈 성능 지표의 경우, 웹 바이탈 수치에 영향을 주는 다양한 연관 정보를 함께 확인할 수 있습니다. 이를 통해 웹 바이탈 평가에 가장 영향력이 높은 요인 분석 및 평가 개선이 가능합니다.
LCP Element: 가장 큰 콘텐츠 요소인 document object를 표시합니다.
FID Event: 처음 상호 작용이 발생했을 때의 이벤트를 표시합니다.
FID Delay: 처음 상호 작용 이벤트의 처리 시간을 표시합니다.
LS Element: 레이아웃 전환이 발생했을 때 이동한 object를 표시합니다.
LS Score: 레이아웃 전환 시 이동한 object의 이동 점수를 표시합니다.
Viewport: 해당 사용자의 뷰포트 사이즈를 표시합니다.
<meta>: 해당 사용자가 로드한 document의 head 태그 안 meta viewport 타입 값을 표시합니다.
성능 상세 분석의 웹 바이탈 연관 정보를 통해, 선택한 개별 사용자의 실제 이용 환경과 웹 바이탈 평가를 비교 분석해볼 수 있습니다. 특정 사용자 환경에서 웹 바이탈 평가가 좋지 않다면, 웹 사이트가 해당 사용자 환경에 최적화되어 있지 않음을 의미합니다. 웹 브라우저 애플리케이션의 목표 성능을 설정하기 위한 개선 지표로 활용해보세요.
성능 프로파일링 - 네트워크
HTML Document 자체와 각 리소스 요청/응답에 걸린 시간을 Waterfall 차트로 확인할 수 있습니다. Document의 전체 DOM이 그려지고 로딩되는 과정에서 확인할 수 있는 정보는 다음과 같습니다. Document request 요소에 마우스 포인터를 올리면 표시되는 툴팁으로 확인할 수 있습니다.
Request Type: 리소스 유형을 표시합니다.
Request URL: 해당 사용자가 접속한 원시 URL 정보를 표시합니다.
구간별 성능 정보:
| 표시 | 라벨 | 설명 |
|---|---|---|
◻︎ | 대기 (Wait) | 요청 전 대기하는 시간 |
◼︎ | 네트워크 | 네트워크 탐색 및 연결 시간 |
◼︎ | 서버 | 서버에서 요청을 처리한 시간 |
◼︎ | 돔 (DOM) | HTML 해석 및 DOM 구축 시간 |
◼︎ | 로딩 | 그려지는 로딩 시간 |
◼︎ | 컨텐츠 다운로드 | 화면이 그려지는 시간 |
각 리소스에 대해 확인할 수 있는 정보는 다음과 같습니다. 각 리소스 요소에 마우스 포인터를 올리면 표시되는 툴팁으로 확인할 수 있습니다.
Request Type: 리소스 유형을 표시합니다.
Request URL: 리소스 요청 URL 정보를 표시합니다.
구간별 성능 정보:
| 표시 | 라벨 | 설명 |
|---|---|---|
◻︎ | Waiting | 요청 전 대기하는 시간 |
︎◼︎ | Redirect | HTTP 리다이렉트 수행 시간 |
◼︎ | Fetch | 요청 전 대기하는 시간 또는 캐시 조회 시간 |
◼︎ | DomainLookup | 도메인에 해당하는 IP를 DNS에서 검색하는 시간 구축 시간 |
◼︎ | Connect | 서버 연결에 걸린 시간 |
◼︎ | Request sent | 서버에 리소스를 요청하는 시간 |
◼︎ | Response | 서버 응답 시간 |
성능 프로파일링 - 스크립팅
페이지 로드 중 동적으로 렌더링 하는 요소들의 스크립트 실행시간을 측정할 수 있습니다. 렌더링 과정에서 실행되는 함수를 정의하고, 스크립트 실행에 걸린 시간을 FlameGraph로 확인할 수 있습니다.
페이지 로딩 과정에서 특정 JavaScript 의 실행시간을 측정하거나, A가 B를, B가 C를 실행하는 등의 구성에서 스크립트의 실행 시간을 확인하여 비효율적으로 구성된 코드를 개선할 수 있습니다. 스크립트 실행시간 측정은 ‘IMQA WPM/WCrash 설치 가이드 > 2.4. [WPM] 스크립트 실행시간 측정'을 참고하세요.
2. 상세 응답 분석
IMQA WPM 에서는 HTTP 응답시간과 응답 코드를 수집하고 있습니다. 클라이언트로부터 HTTP 요청을 분석할 수 있습니다. 브라우저에서 수집된 HTTP정보는 ms 단위로 수집되며 HTTP 헤더 정보와 응답 코드를 보여줍니다. 이를 이용하여 특정 URL에서 발생하는 응답시간 분석, 에러 코드를 발생하는 URL 등을 파악할 수 있습니다.
클라이언트에서 수집하는 HTTP 관련 정보는 다음과 같습니다.
| 라벨 | 설명 |
|---|---|
메소드 | HTTP Method (GET, POST, UPDATE, PUT, DELETE 등) |
호스트 | 도메인 정보 |
상태 | HTTP 응답 코드 |
경로 | 요청 URL |
응답 시간 | HTTP 요청에 대한 응답시간 |
Last updated
