페이지 성능 분석

IMQA WPM 페이지 성능 분석은 페이지별 성능을 30분 단위로 상세하게 확인할 수 있습니다. 페이지 조회 수, 평균 성능 등 사용자에 대한 정보와 각 성능 지표에 대한 히트맵을 통해 성능 분포와 저하 상황을 상세하게 분석할 수 있습니다. 또한 특정 페이지를 기준으로 수집된 핵심 웹 바이탈 평가 수치를 확인하고, 저하 요인을 분석할 수 있습니다.

1. 개요

‘페이지분석' 메뉴나 ‘대시보드' 등에서 특정 화면 카드를 클릭하면 이동할 수 있으며, IMQA WPM 페이지 성능 분석은 다음과 같이 구성됩니다.

❶ 페이지/분석 시간 ❷ 페이지 성능 정보 ❸ 페이지 조회 수 ❹ 핵심 웹 바이탈 ❺ 성능 히트맵 ❻ 웹 바이탈

2. 페이지/분석 시간

분석하고자 하는 페이지와 분석 날짜, 시간을 변경할 수 있습니다. 변경 시 페이지 성능 분석 정보를 선택한 기준으로 갱신합니다.

❶ 분석 날짜 기본 ‘오늘 날짜'로 설정 되며 [<] [>] 클릭 시 분석 날짜를 변경할 수 있습니다. 최대 30일 전까지 선택할 수 있습니다.

❷ 선택한 시간대 선택한 시간대를 표시합니다. 다른 시간대로 변경할 수 있습니다.

❸ 현재 시간대 ‘현재 시간'이 포함된 시간대를 표시합니다.

❹ 범례 각 시간대별 집계된 데이터 수에 따라 타임라인 색상 농도를 4단계로 표시합니다.

3. 페이지 성능 정보

30분 동안의 페이지 로딩시간, 응답시간 성능 지표의 하위 5%의 평균과 전체 평균을 표시합니다.

이를 통해 특정 페이지에 어떤 성능 저하가 있었는지 한눈에 확인할 수 있습니다. 또한 웹 사이트 사용자들이 평균적으로 페이지 로딩에 문제를 겪는지, 요청에 대한 응답이 느렸는지 등 성능 저하 요인을 분석할 수 있습니다.

4. 페이지 조회 수

30분 동안의 페이지 조회 수를 확인할 수 있습니다.

페이지 조회 수: 30분 동안의 해당 페이지 방문 수를 1분 간격으로 카운트합니다.

5. 핵심 웹 바이탈

30분 동안 특정 페이지에서 수집된 핵심 웹 바이탈 성능 지표 LCP, FID, CLS의 30분 평균과 평가 구간별 비율을 확인할 수 있습니다.

핵심 웹 바이탈은 다음과 같이 구성됩니다.

❶ 디바이스 필터 30분 동안 특정 페이지에서 수집된 핵심 웹 바이탈 지표를 사용자 환경 기준으로 분석할 수 있습니다. 기본 ‘전체’로 설정되어 있으며, ‘Desktop’ 또는 ‘Mobile’로 필터링할 수 있습니다. 기준 변경 시 아래의 평균과 평가 구간별 비율을 갱신합니다.

❷ 평균 30분 동안 특정 페이지에서 수집된 핵심 웹 바이탈 지표별 수치를 평균으로 산출합니다. Google 권고 평가 구간별 색상으로 표시합니다.

❸ 평가 구간별 비율 최근 30분 동안 특정 페이지에서 수집된 핵심 웹 바이탈 지표별 수치를 Google 권고 평가 구간인 좋음, 개선 필요, 나쁨의 평가 구간별로 카운트합니다.

핵심 웹 바이탈 LCP, FID, CLS는 웹 사이트의 로딩 성능, 상호 작용, 시각적 안정성 3가지 요소를 기준으로 웹 사이트 사용자 경험을 평가하는 Google의 웹 성능 지표입니다.

핵심 웹 바이탈

좋음

개선 필요

나쁨

6. 성능 히트맵

각 성능 지표에 대한 히트맵을 통해 성능 분포와 성능 저하 상황을 상세하게 분석할 수 있습니다.

페이지 로딩시간

30분 동안 개별 페이지 또는 SPA 방식으로 구현된 웹 브라우저 애플리케이션에서 측정된 페이지 로딩시간을 확인할 수 있습니다. 웹 페이지 기준으로 히트맵이 표시됩니다. 셀에 마우스 포인터를 올리면 ‘분석 날짜 | 분석시간 | 데이터 수 | 성능 구간’으로 툴팁이 표시됩니다. 히트맵 영역에서 원하는 셀을 클릭하거나, 마우스 드래그로 구간을 선택하면 ‘페이지 로딩시간 분석' 팝업을 표시합니다.

페이지 로딩시간: 해당 HTML 페이지가 onload 이벤트를 발생하는 시점 또는 DOM 변경에 의한 로딩시간을 구간으로 산출합니다.
범례: 기준치 이상 구간일 경우 빨강, 미만일 경우 파랑으로 표시하며, 같은 시간 축에 집계된 데이터 비율에 따라 색상 농도를 4단계로 표시합니다.

응답시간

30분 동안의 해당 페이지에서 요청한 HTTP 응답시간을 확인할 수 있습니다. 셀에 마우스 포인터를 올리면 ‘분석 날짜 | 분석시간 | 데이터 수 | 성능 구간’으로 툴팁이 표시됩니다. 히트맵 영역에서 원하는 셀을 클릭하거나, 마우스 드래그로 구간을 선택하면 ‘상세 응답 분석' 팝업을 표시합니다.

응답시간: HTTP 응답시간을 구간으로 산출합니다.
범례: 수집된 HTTP 정보에서 4xx대 5xx대 응답코드인 경우에는 빨강, 그 외 응답코드 일 경우 파랑으로 표시하며, 같은 시간 축에 집계된 데이터 비율에 따라 색상 농도를 4단계로 표시합니다.

7. 웹 바이탈

웹 바이탈 지표별 성능 분포와 웹 바이탈 수치에 영향을 주는 다양한 연관 정보를 함께 확인할 수 있습니다. 이를 통해 웹 바이탈 평가에 가장 영향력이 높은 요인 분석 및 평가 개선이 가능합니다.

LCP 분포 / LCP 연관 정보

LCP 분포 그래프

30분 동안의 특정 페이지에서 수집된 LCP 데이터 분포를 히스토그램으로 표시합니다. 히스토그램은 계급을 가로축에, 도수를 세로축에 나타낸 뒤, 집계된 데이터를 여러 구간을 정해 계급을 만들고, 각 계급에 속하는 데이터 수로 도수를 표시합니다. 히스토그램은 전체 집단의 분포 상태를 파악하거나 비교할 때 유용합니다. Google 권고 평가 구간별 색상으로 표시합니다.

웹 바이탈

좋음

개선 필요

나쁨

Y축

LCP 연관 정보

30분 동안의 특정 페이지에서 수집된 LCP 수치에 영향을 주는 다양한 연관 정보를 함께 확인할 수 있습니다. 이를 통해 LCP 평가에 가장 영향력이 높은 요인 분석 및 평가 개선이 가능합니다.

Element: 가장 큰 콘텐츠 요소인 document object 정보와 비율을 표시합니다.
Screen Resolution: 해당 페이지를 조회한 사용자의 화면 해상도 정보와 비율을 표시합니다.

LCP는 페이지 로드 중 사용자의 뷰포트에서 가장 큰 콘텐츠 요소가 표시되는 시간을 측정합니다. 페이지의 주요 콘텐츠일 확률이 높고, LCP가 빠르면 사용자가 페이지를 사용할 수 있다고 인지하는데 도움이 됩니다.

이미지 리소스의 최적화나 사용자 환경별 리소스 관리가 효과적일 수 있습니다. LCP는 2,500ms 이내를 목표로 개선하는 것을 권고합니다.

FID 분포 / FID 연관 정보

FID 분포 그래프

30분 동안의 특정 페이지에서 수집된 FID 데이터 분포를 히스토그램으로 표시합니다. 히스토그램은 계급을 가로축에, 도수를 세로축에 나타낸 뒤, 집계된 데이터를 여러 구간을 정해 계급을 만들고, 각 계급에 속하는 데이터 수로 도수를 표시합니다. 히스토그램은 전체 집단의 분포 상태를 파악하거나 비교할 때 유용합니다. Google 권고 평가 구간별 색상으로 표시합니다.

웹 바이탈

좋음

개선 필요

나쁨

Y축

FID 연관 정보

30분 동안의 특정 페이지에서 수집된 FID 수치에 영향을 주는 다양한 연관 정보를 함께 확인할 수 있습니다. 이를 통해 FID 평가에 가장 영향력이 높은 요인 분석 및 평가 개선이 가능합니다.

Event: 처음 상호 작용이 발생했을 때의 이벤트를 표시합니다.
Screen Resolution: 해당 페이지를 조회한 사용자의 화면 해상도 정보와 비율을 표시합니다.

FID는 페이지 로드 중 사용자가 페이지와 처음 상호 작용한 이벤트의 처리 지연 시간을 측정합니다. FID가 빠르면 사용자가 상호 작용성과 응답성에 대한 좋은 인상을 가질 수 있습니다.

Javascript 등 리소스의 최적화나 Task를 세분화하는 전략이 효과적일 수 있습니다. FID는 100ms 이내를 목표로 개선하는 것을 권고합니다.

CLS 분포 / CLS 연관 정보

CLS 분포 그래프

30분 동안의 특정 페이지에서 수집된 CLS 데이터 분포를 히스토그램으로 표시합니다. 히스토그램은 계급을 가로축에, 도수를 세로축에 나타낸 뒤, 집계된 데이터를 여러 구간을 정해 계급을 만들고, 각 계급에 속하는 데이터 수로 도수를 표시합니다. 히스토그램은 전체 집단의 분포 상태를 파악하거나 비교할 때 유용합니다. Google 권고 평가 구간별 색상으로 표시합니다.

웹 바이탈

좋음

개선 필요

나쁨

Y축