페이지 로드 통계
홈 화면 > 프로젝트 선택 > Statistics > Page Load Statistics
Page Load Statistics 메뉴는 웹 사이트의 페이지별 로드 성능 정보를 제공합니다. 이 메뉴을 통해 각 페이지가 로드되는 과정을 상세하게 추적할 수 있으며, 성능이 저하된 페이지를 식별하고 개선된 페이지의 성과를 분석할 수 있습니다. 또한 웹 애플리케이션의 사용자 경험을 개선하기 위한 유용한 정보를 얻을 수 있습니다.
-
페이지 URL 경로별 로드 성능 통계를 제공합니다.
-
평균값, 최댓값, 최솟값, 백분위수 기반 통계를 확인할 수 있습니다.
-
페이지 로드 과정의 세부 시간에 대한 필터를 통해 성능을 집중 분석할 수 있습니다.
-
Navigation Timing API를 통해 페이지 로드의 각 단계 별 시간을 수집하여 통계를 제공합니다.
Page Load Statistics 메뉴에서 수집하는 데이터에 대한 자세한 내용은 다음 문서를 참조하세요.
기본 사용 안내
페이지의 URL 경로를 기준으로 페이지 로드 시간 및 DOM 로드 시간, 네트워크 지연 시간, 리소스 로드 시간 등 다양한 성능 지표를 제공합니다. 이를 통해 페이지 성능 최적화 여부를 확인할 수 있습니다
-
Time에서 성능 지표를 조회할 날짜와 시간을 설정하세요.
-
Statistical criteria에서 원하는 기준을 선택하세요.
-
화면 오른쪽 상단의 버튼을 선택하세요.
조회한 시간 범위의 성능 지표를 각 섹션에서 그래프 차트와 목록을 통해서 확인할 수 있습니다. 각 섹션의 그래프 차트로 마우스를 오버하면 해당 시간대의 지표 정보를 확인할 수 있습니다.
Statistical criteria에 대한 자세한 내용은 다음 문서를 참조하세요.
조회 시간 설정하기
Time에서 성능 지표를 조회할 날짜와 시간을 설정하세요.
-
가장 오른쪽의 녹색 버튼을 선택하면 다양한 시간 범위를 선택할 수 있습니다.
-
또는 버튼을 선택해 시간을 이동할 수 있습니다. 이동 간격은 오른쪽에 설정된 시간 간격입니다.
-
원하는 날짜와 시간을 직접 선택하려면 날짜 및 시간 영역을 클릭하세요.
-
최대 선택할 수 있는 시간은 3일이며, 최소 선택할 수 있는 시간은 5분입니다.
-
2시간 이하 범위를 선택하면 5분 단위로 데이터를 조회하고, 2시간을 초과하면 1시간 단위로 데이터를 조회합니다.
통계 기준 선택하기
Statistical criteria은 사용자가 분석하려는 통계 지표를 다음 선택한 기준으로 확인할 수 있는 옵션입니다.
-
Avg: 각 페이지의 평균 로드 시간을 계산하여 통계를 제공합니다.
-
Max: 각 페이지의 최대 로드 시간을 기준으로 통계를 제공합니다. 즉, 페이지 로드 시간이 가장 비효율적인 페이지 URL을 파악할 수 있습니다.
-
Min: 각 페이지의 최소 로드 시간을 기준으로 통계를 제공합니다. 이를 통해 가장 최적의 조건에서 로드된 페이지 URL을 확인할 수 있습니다. 또는 성능 최적화 목표를 설정할 때 유용합니다.
-
percentile: 각 페이지 백분위수 기준 로드 시간에 대한 통계를 제공합니다.
-
95quantile: 가장 느린 5%의 페이지 로드 시간으로, 페이지 로드 시간이 가장 느렸던 상위 5% 사용자의 경험을 의미합니다.
-
90quantile: 가장 느린 10% 사용자의 페이지 로드 시간으로, 주로 느린 사용자 그룹의 성능 문제를 파악할 때 유용합니다.
-
75quantile: 페이지 로드 시간이 하위 75%보다 느린 상위 25% 사용자의 로드 시간을 보여줍니다.
-
50quantile: 중간값으로, 전체 사용자 중 절반은 해당 시간보다 빠르게 페이지를 로드하고, 절반은 더 느리게 로드한 것을 의미합니다.
-
-
Avg은 전체적인 성능의 흐름을 파악하는 데 유용하지만, 성능 저하가 간헐적으로 발생하는 경우를 파악하기 어려울 수 있습니다. 이때 Max과 percentile 옵션을 함께 활용하면 성능 저하가 언제 발생했는지, 그 심각성은 어느 정도인지 확인할 수 있습니다.
-
Min은 성능 최적화 목표를 설정하거나 특정 최적화가 얼마나 효과적인지 평가할 때 참고할 수 있습니다. 하지만 이 값만으로는 성능의 일관성을 평가하기 어렵기 때문에 Avg이나 percentile 옵션과 함께 통계 정보를 분석하는 것이 좋습니다.
-
percentile 옵션은 단순한 평균보다 더 세밀하게 성능 데이터를 분석하는 데 적합하며 사용자 경험을 개선하는 데 중요한 데이터를 제공합니다. 이 옵션을 활용하면 성능 저하가 발생하는 사용자의 비율을 파악하고 최적화 대상 페이지를 효과적으로 선택할 수 있습니다.
조회 결과 다운로드하기
조회한 데이터를 CSV 형식의 파일로 다운로드할 수 있습니다. 화면 오른쪽 상단의 버튼을 선택하세요. CSV 파일 이름은 LoadStatistics_YYYYMMDD_HHMMSS
.csv 형식입니다.
화면 구성
Page load performance trend
페이지 로드 횟수와 성능 지표(응답 시간)의 변화를 시간대별 추이를 시각화한 차트입니다. 이 그래프를 통해 특정 시간대에 성능 변동이 있었는지 확인할 수 있습니다.
-
특정 시간의 파란색 막대 그래프를 선택하면 Top 10 page load times 및 Top 10 page load counts, Page group list 섹션의 데이터를 선택한 시간 범위에 맞춰 조회할 수 있습니다.
-
Statistical criteria에서 선택한 옵션에 따라 차트에 표시되는 항목은 변경됩니다.
Statistical criteria: Avg/Max/Min
-
파란색 막대 그래프는 특정 시간대에 로드된 페이지의 수입니다.
-
보라색 선 그래프는 해당 시간대의 평균 페이지 로드 시간입니다.
Statistical criteria: percentile
-
파란색은 50quantile, 보라색은 75quantile, 주황색은 90quantile, 초록색은 95quantile를 나타냅니다.
-
파란색 막대 그래프는 특정 시간대에 로드된 페이지의 수입니다.
Top 10 page load times
5분 또는 1시간 간격으로 페이지 그룹을 그룹화하고, 단위별 페이지 로드 시간이 가장 긴 상위 10개의 페이지 그룹을 시계열 그래프로 표시합니다. 이 그래프는 페이지 로드 시간이 긴 순으로 정렬하여 표시합니다.
-
섹션 하단의 막대 그래프는 시계열 그래프로 표현되는 데이터의 페이지 그룹별 평균값입니다.
-
Statistical criteria이 Avg 또는 Max, Min이면 선택한 기준값으로 경과 시간을 표현합니다.
-
Statistical criteria이 percentile이면 경과 시간을 95quantile로 표현합니다.
-
데이터가 연속된 시간 구간으로 수집되지 않고 특정 구간에만 존재하는 경우 막대 그래프만 표시됩니다.
Top 10 page load counts
5분 또는 1시간 간격으로 페이지 그룹을 그룹화하고, 단위별 페이지 로드 수가 가장 많은 상위 10개의 페이지 그룹을 시계열 그래프로 표시합니다. 이 그래프는 페이지 로드 수가 많은 순으로 정렬하여 표시합니다.
-
섹션 하단의 막대 그래프는 시계열 그래프로 표현되는 데이터의 페이지 그룹별 합산값입니다.
-
데이터가 연속된 시간 구간으로 수집되지 않고 특정 구간에만 존재하는 경우 막대 그래프만 표시됩니다.
Page group list
페이지 그룹을 기준으로 다양한 성능 지표를 확인할 수 있는 목록입니다.
-
Statistical criteria을 percentile로 선택하면 페이지 그룹별 건수와 50quantile, 75quantile, 90quantile, 95quantile에 대한 경과 시간을 추가로 확인할 수 있습니다.
-
목록의 가장 왼쪽의 Detail 버튼을 선택하면 Page load statistics details 화면이 표시됩니다. Page load statistics details 화면을 통해서 선택한 페이지 그룹의 상세한 통계 정보를 확인할 수 있습니다. 자세한 내용은 다음 문서를 참조하세요.
-
Page group 컬럼의 버튼을 선택하면 User Session Log Search 메뉴로 이동할 수 있습니다. 선택한 페이지 그룹 URL 및 조회 시간을 필터로 적용한 결과를 확인할 수 있습니다.
-
Column Settings: 테이블 헤더 컬럼을 감추거나 원하는 항목을 추가할 수 있습니다. 컬럼 순서를 변경할 수도 있습니다. 자세한 내용은 다음 문서를 참조하세요.
-
Page Load Statistics 메뉴에서 User Session Log Search 메뉴로 이동할 때 지정한 시간 범위 전후의 데이터도 포함될 수 있습니다.
-
2시간 이상 조회: 1시간 단위로 데이터를 조회하며, 조회 시간 범위 전후로 각각 1시간이 추가됩니다.
예, 2024년 10월 21일 11시부터 14시까지 3시간을 조회하면, 실제 조회 범위는 2024년 10월 21일 10시부터 15시까지 5시간으로 확장됩니다.
-
2시간 이내 조회: 5분 단위로 데이터를 조회하며, 조회 시간 범위 전후로 각각 5분이 추가됩니다.
예, 2024년 10월 21일 11시부터 11시 30분까지 30분을 조회하면, 실제 조회 범위는 2024년 10월 21일 10시 55분부터 11시 35분까지 40분으로 확장됩니다.
-
-
테이블의 컬럼 헤더에 마우스를 오버하면 해당 컬럼에 대한 상세 정보를 툴팁 형태로 제공합니다. 컬럼 항목에 대한 자세한 내용은 다음 문서를 참조하세요.
Page load statistics details
선택한 페이지 그룹의 상세한 통계 정보를 확인할 수 있습니다.
-
Page load timeline
웹 애플리케이션의 전체 페이지 로드 성능 정보를 제공합니다. 페이지 로드 시간과 로드 단계별 과정을 평균 시간으로 나타냅니다. 이를 통해 브라우저 애플리케이션의 전반적인 성능을 파악할 수 있습니다. 자세한 내용은 다음 문서를 참조하세요.
NoteStatistical criteria이 percentile이면 페이지 로드 성능을 백분위로 표시합니다. 파란색은 50quantile, 보라색은 75quantile, 주황색은 90quantile, 초록색은 95quantile를 나타냅니다.
-
Page load time
선택한 페이지 그룹의 시간에 따른 페이지 로드 시간을 확인할 수 있습니다. 선택 상자에서 다양한 성능 지표를 선택할 수 있습니다. 성능 지표에 대한 자세한 내용은 다음 문서를 참조하세요.
NoteStatistical criteria이 percentile이면 백분위별 페이지 로드 시간을 제공합니다.
-
Page load count
선택한 페이지 그룹의 시간에 따른 페이지 로드 수를 확인할 수 있습니다.
-
Top 10 page loads by Browser / Top 10 page loads by OS / Top 10 page loads by Device
페이지 로드 건수를 기준으로 상위 10개의 브라우저, 운영체제, 디바이스 항목을 원형 그래프로 제공합니다. 이를 통해 웹 애플리케이션을 이용하는 사용자의 환경을 파악할 수 있습니다.
-
Page load times by Browser / Page load times by OS / Page load times by Device
브라우저, 운영체제, 디바이스 별 페이지 로드 시간을 제공합니다. 이를 통해 페이지 로드 시간이 느려지는 사용자의 환경을 파악할 수 있습니다.
Note각 섹션의 오른쪽 상단의 버튼을 선택하면 테이블 목록 형식으로 변경할 수 있습니다. 테이블 목록 형식에서는 경과 시간과 세부 시간에 대한 정보를 추가로 제공합니다. 다시 그래프 형식으로 변경하려면 버튼을 선택하세요.
-
Page URL Path list
페이지 URL 경로(Path)를 기준으로 다양한 성능 지표를 한눈에 확인할 수 있는 테이블 목록입니다. 정규 표현식으로 그룹화하지 않은 URL path를 기준으로 목록을 제공합니다.
-
목록의 가장 왼쪽의 Detail 버튼을 선택하면 페이지 URL path 기준 Page load statistics details 화면을 확인할 수 있습니다.
-
Page URL Path 컬럼의 버튼을 선택하면 User Session Log Search 메뉴로 이동할 수 있습니다. 선택한 페이지 그룹 URL 및 조회 시간을 필터로 적용한 결과를 확인할 수 있습니다.
Note-
Page URL Path list에서 User Session Log Search 메뉴로 이동할 때 지정한 시간 범위 전후의 데이터도 포함될 수 있습니다.
-
2시간 이상 조회: 1시간 단위로 데이터를 조회하며, 조회 시간 범위 전후로 각각 1시간이 추가됩니다.
예, 2024년 10월 21일 11시부터 14시까지 3시간을 조회하면, 실제 조회 범위는 2024년 10월 21일 10시부터 15시까지 5시간으로 확장됩니다.
-
2시간 이내 조회: 5분 단위로 데이터를 조회하며, 조회 시간 범위 전후로 각각 5분이 추가됩니다.
예, 2024년 10월 21일 11시부터 11시 30분까지 30분을 조회하면, 실제 조회 범위는 2024년 10월 21일 10시 55분부터 11시 35분까지 40분으로 확장됩니다.
-
-
테이블의 컬럼 헤더에 마우스를 오버하면 해당 컬럼에 대한 상세 정보를 툴팁 형태로 제공합니다. 컬럼 항목에 대한 자세한 내용은 다음 문서를 참조하세요.
-
-
데이터 수집 제한
-
5분마다 최대 5,000개의 페이지 URL path 목록을 생성하여 서버로 전송합니다.
-
5분 동안 고유한 URL path의 수가 5,000개를 초과하면 추가 데이터는 무시됩니다.
-
-
데이터 정확성
Navigation Timing API에서 일부 세부 시간 정보가 0으로 수집될 수 있습니다. 이로 인해 특정 성능 지표가 표시되지 않을 수 있습니다.
-
차트 간격
조회하는 데이터의 시간 단위에 따라 차트 간격이 결정됩니다.
-
1시간 데이터로 조회하면 차트 간격은 1시간으로 표시됩니다.
-
5분 데이터로 조회하면 차트 간격은 5분으로 표시됩니다.
-
조회 결과 필터링하기
조회한 통계 데이터를 Page group 또는 Performance metrics ({unit})를 기준으로 필터링하여 원하는 내용을 집중 분석할 수 있습니다.
페이지 그룹 필터
특정 URL과 관련한 페이지를 선택해 성능 데이터를 조회할 수 있습니다. Page group 옵션에서 원하는 페이지 그룹 항목을 선택하세요.
페이지 그룹은 최대 3개까지 선택할 수 있습니다.
성능 지표 필터
성능 지표는 페이지 로드 시간, 리다이렉트 시간, 다운로드 시간 등을 의미합니다. 다양한 성능 지표에 임계값을 적용하여 조회할 수 있습니다. Performance metrics ({unit}) 옵션에서 원하는 지표 항목을 선택한 다음 임계값과 연산자 조건을 적용하세요.
-
연산자 종류:
>
(보다 큼),>=
(보다 크거나 같음),<
(보다 작음),<=
(보다 작거나 같음),==
(같음) -
임곗값으로 양수, 음수, 0을 입력할 수 있지만, 선택한 성능 지표에 따라 음수 입력 여부는 다를 수 있습니다.
-
한 개의 성능 지표에 대해 필터를 적용하고 조회할 수 있습니다.
선택할 수 있는 성능 지표에 대한 자세한 내용은 다음 문서를 참조하세요.
컬럼 설정하기
Page group list에서 테이블 헤더 컬럼을 감추거나 원하는 항목을 추가할 수 있습니다. 컬럼 순서를 변경할 수도 있습니다. Column Settings 버튼을 선택하세요.
왼쪽 목록을 오른차순 또는 내 림차순으로 정렬하려면 / 버튼을 선택하세요.
컬럼 추가하기
-
왼쪽 목록에서 추가할 컬럼 항목을 선택하세요.
-
선택한 컬럼 항목이 오른쪽 목록에 추가된 것을 확인하세요.
-
원하는 컬럼 항목을 모두 추가했으면 Confirm 버튼을 선택하세요.
-
모든 컬럼 항목을 선택하려면 왼쪽 목록 상단의 Select all을 클릭하세요.
-
컬럼 항목에 대한 자세한 내용은 다음 문서를 참조하세요.
컬럼 삭제하기
-
오른쪽 목록에서 삭제할 컬럼 항목의 오른쪽에 버튼을 선택하세요.
-
왼쪽 목록에서 삭제한 컬럼 항목의 체크 박스가 해제된 것을 확인하세요.
-
원하는 컬럼 항목을 모두 삭제했으면 Confirm 버튼을 선택하세요.
컬럼 순서 변경하기
다음 제공하는 기능을 통해 컬럼의 순서를 변경하거나 원하는 항목을 고정할 수 있습니다.
-
오른쪽 목록에서 순서를 변경할 항목을 드래그해서 원하는 위치로 이동해 컬럼의 순서를 변경할 수 있습니다.
-
컬럼 항목 오른쪽의 버튼을 선택하세요. 선택한 컬럼 항목은 최상단에 고정됩니다. 고정된 컬럼 항목은 테이블 목록에서 가장 왼쪽에 고정됩니다.
모든 설정을 완료한 후에는 Confirm 버튼을 선택하세요.
컬럼 설정 초기화하기
변경 사항을 모두 취소하고 초기화하려면 Initialized 버튼을 선택하세요. 초기화 설정을 반영하려면 Confirm 버튼을 선택하세요.
컬럼 및 용어 안내
컬럼 | 단위 | 설명 |
---|---|---|
Backend time | 밀리 세컨드 | 페이지 로드 중 백엔드에서 처리된 평균 시간을 나타내며, startTime 부터 responseEnd 까지 소요된 시간을 의미합니다. |
Frontend time | 밀리 세컨드 | 페이지 로드 중 프론트엔드 영역의 평균 처리 시간을 나타내며, domInteractive 부터 loadEventEnd 까지 소요된 시간을 의미합니다. |
Redirect time | 밀리 세컨드 | 브라우저가 웹 페이지를 불러오면서 리다이렉트 과정에서 소요한 평균 시간을 나타내며, redirectStart 부터 redirectEnd 까지 소요된 시간을 의미합니다. |
Caching time | 밀리 세컨드 | 브라우저가 웹 페이지를 불러오면서 캐시된 리소스를 검색하는데 소요한 평균 시간을 나타내며, fetchStart 부터 domainLookupStart 까지 소요된 시간을 의미합니다. |
DNS time | 밀리 세컨드 | 브라우저가 웹 페이지를 불러오면서 웹사이트 도메인을 조회하는데 소요한 평균 시간을 나타내며, domainLookupStart 부 터 domainLookupEnd 까지 소요된 시간을 의미합니다. |
Connection time | 밀리 세컨드 | 브라우저가 서버와의 네트워크 연결 과정에 소요한 평균 시간을 나타내며, connectStart 부터 connectEnd 까지 소요된 시간을 의미합니다. |
SSL time | 밀리 세컨드 | 브라우저가 웹 페이지를 불러오면서 TCP 헨드쉐이크 과정에서 소요한 평균으로, secureConnectionStart 부터 connectEnd 까지 소요된 시간을 의미합니다. |
FirstByte time | 밀리 세컨드 | 브라우저가 웹 페이지를 불러오면서 네트워크 요청을 보낸 후 서버로부터 첫 번째 바이트(byte)가 수신될 때까지 소요된 평균 시간을 나타내며, requestStart 부터 responseStart 까지 소요된 시간을 의미합니다. |
Download time | 밀리 세컨드 | 브라우저가 웹 페이지를 불러오면서 서버로부터 리소스를 다운로드하는데 소요한 평균 시간을 나타내며, responseStart 부터 responseEnd 까지 시간을 의미합니다. |
DomContentLoaded time | 밀리 세컨드 | 웹 페이지가 초기 콘텐츠를 렌더링하고 상호 작용할 수 있는 상태가 되기까지의 평균 시간을 나타내며, domContentLoadedEventStart 부터 domContentLoadedEventEnd 까지 소요된 시간을 의미합니다. |
Dom load time | 밀리 세컨드 | 웹 페이지의 모든 자원을 로드하고 렌더링이 완료된 후 사용자가 상호 작용할 수 있는 상태까지의 평균 시간을 나타내며, loadEventStart 부터 loadEventEnd 까지 소요된 시간을 의미합니다. |
Rendering time | 밀리 세컨드 | 서버로부터 다운로드한 리소스를 화면에 렌더링하고 페이지 로드 이벤트를 완료하는데 소요한 평균 시간을 나타내며, domInteractive 부터 domComplete 까지 소요된 시간을 의미합니다. |
onLoad event time | 밀리 세컨드 | 브라우저에서 측정하는 load 이벤트가 완료되는 평균 시간을 나타내며, 시작부터 loadEventEnd 까지 소요된 시간을 의미합니다. |
Elapsed time | 밀리 세컨드 | 브라우저가 웹 페이지를 완전히 불러오는데 소요한 평균 시간을 나타내며, loadEventEnd 이후 추가 인터랙션을 완료하기까지의 시간입니다. 브라우저 에이전트가 측정한 페이지 로드 완료 시간을 의미합니다. |
Count | 건수 | 페이지 로드 수입니다. |
Page group | URL 텍스트 | URL 경로(URL Path)를 정규 표현식을 통해 정규화하여 제공하는 통계 그룹입니다. 자세한 내용은 다음 문서를 참조하세요. |
Page URL Path | URL 텍스트 | 정규 표현식을 통해 정규화하지 않은 URL 경로(URL Path)입니다. |
Browser | 텍스트 | Chrome, Edge, Safari 등, 최종 사용자가 사용한 브라우저 종류입니다. |
OS | 텍스트 | macOS, Windows, Linux 등, 최종 사용자가 사용한 기기의 운영체제 종류입니다. |
Device | 텍스트 | Desktop, Mobile, Tablet 등, 최종 사용자가 사용한 기기 종류입니다. |