KOR
IMQA 자주 묻는 질문 개발자 포럼 Release Note

페이지 성능 분석

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의 웹 성능 지표입니다.

핵심 웹 바이탈좋음개선 필요나쁨

LCP

2,500ms 미만

2,500ms 이상 4,000ms 이하

4,000ms 초과

FID

100ms 미만

100ms 이상 300ms 이하

300ms 초과

CLS

0.1 미만

0.1 이상 0.25 이하

0.25 초과

6. 성능 히트맵

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

페이지 로딩시간

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

  • 페이지 로딩시간: 해당 HTML 페이지가 onload 이벤트를 발생하는 시점 또는 DOM 변경에 의한 로딩시간을 구간으로 산출합니다.

  • 범례: 기준치 이상 구간일 경우 빨강, 미만일 경우 파랑으로 표시하며, 같은 시간 축에 집계된 데이터 비율에 따라 색상 농도를 4단계로 표시합니다.

응답시간

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

  • 응답시간: HTTP 응답시간을 구간으로 산출합니다.

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

7. 웹 바이탈

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

LCP 분포 / LCP 연관 정보

LCP 분포 그래프

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

웹 바이탈좋음개선 필요나쁨Y축

LCP

2,500ms 미만

2,500ms 이상 4,000ms 이하

4,000ms 초과

수집된 데이터 수

LCP 연관 정보

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

  • Element: 가장 큰 콘텐츠 요소인 document object 정보와 비율을 표시합니다.

  • Screen Resolution: 해당 페이지를 조회한 사용자의 화면 해상도 정보와 비율을 표시합니다.

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

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

FID 분포 / FID 연관 정보

FID 분포 그래프

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

웹 바이탈좋음개선 필요나쁨Y축

FID

100ms 미만

100ms 이상 300ms 이하

300ms 초과

수집된 데이터 수

FID 연관 정보

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

  • Event: 처음 상호 작용이 발생했을 때의 이벤트를 표시합니다.

  • Screen Resolution: 해당 페이지를 조회한 사용자의 화면 해상도 정보와 비율을 표시합니다.

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

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

CLS 분포 / CLS 연관 정보

CLS 분포 그래프

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

웹 바이탈좋음개선 필요나쁨Y축

CLS

0.1 미만

0.1 이상 0.25 이하

0.25 초과

수집된 데이터 수

CLS 연관 정보

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

  • Element: 레이아웃 전환이 발생했을 때 이동한 object 정보와 비율을 표시합니다.

  • Screen Resolution: 해당 페이지를 조회한 사용자의 화면 해상도 정보와 비율을 표시합니다.

CLS는 페이지 로드 중 예상치 못한 레이아웃 전환 경험들을 점수로 측정 후 합산합니다. CLS가 낮으면 사용자가 시각적 안정성에 대한 좋은 인상을 가질 수 있습니다.

사용자 환경별 리소스 관리나 동적 컨텐츠 처리 방식 검토 등이 효과적일 수 있습니다. CLS는 0.1 이내를 목표로 개선하는 것을 권고합니다.

Last updated