페이지 로드 통계

홈 화면 > 프로젝트 선택 > 통계 > 페이지 로드 통계

페이지 로드 통계 메뉴는 웹 사이트의 페이지별 로드 성능 정보를 제공합니다. 이 메뉴을 통해 각 페이지가 로드되는 과정을 상세하게 추적할 수 있으며, 성능이 저하된 페이지를 식별하고 개선된 페이지의 성과를 분석할 수 있습니다. 또한 웹 애플리케이션의 사용자 경험을 개선하기 위한 유용한 정보를 얻을 수 있습니다.

• 페이지 URL 경로별 로드 성능 통계를 제공합니다.

• 평균값, 최댓값, 최솟값, 백분위수 기반 통계를 확인할 수 있습니다.

• 페이지 로드 과정의 세부 시간에 대한 필터를 통해 성능을 집중 분석할 수 있습니다.

• Navigation Timing API를 통해 페이지 로드의 각 단계 별 시간을 수집하여 통계를 제공합니다.

노트

페이지 로드 통계 메뉴에서 수집하는 데이터에 대한 자세한 내용은 다음 문서를 참조하세요.

기본 사용 안내

페이지의 URL 경로를 기준으로 페이지 로드 시간 및 DOM 로드 시간, 네트워크 지연 시간, 리소스 로드 시간 등 다양한 성능 지표를 확인할 수 있습니다. 이를 통해 각 페이지 성능 상태를 평가하고, 최적화 여부를 판단할 수 있습니다.

1. 시간에서 성능 지표를 조회할 날짜와 시간을 설정하세요.

2. 통계 기준에서 원하는 기준을 선택하세요.

3. 화면 오른쪽 상단의 버튼을 선택하세요.

조회한 시간 범위의 성능 지표를 각 섹션에서 그래프 차트와 목록을 통해서 확인할 수 있습니다. 각 섹션의 그래프 차트로 마우스를 오버하면 해당 시간대의 지표 정보를 확인할 수 있습니다.

노트

통계 기준에 대한 자세한 내용은 다음 문서를 참조하세요.

조회 시간 설정하기

시간에서 성능 지표를 조회할 날짜와 시간을 설정하세요.

노트

• 최대 선택할 수 있는 시간은 3일이며, 최소 선택할 수 있는 시간은 5분입니다.

• 2시간 이하 범위를 선택하면 5분 단위로 데이터를 조회하고, 2시간을 초과하면 1시간 단위로 데이터를 조회합니다.

통계 기준 선택하기

통계 기준은 사용자가 분석하려는 통계 지표를 다음 선택한 기준으로 확인할 수 있는 옵션입니다.

• 평균: 각 페이지의 평균 로드 시간을 계산하여 통계를 제공합니다.

• 최대값: 각 페이지의 최대 로드 시간을 기준으로 통계를 제공합니다. 즉, 페이지 로드 시간이 가장 비효율적인 페이지 URL을 파악할 수 있습니다.

• 최소값: 각 페이지의 최소 로드 시간을 기준으로 통계를 제공합니다. 이를 통해 가장 최적의 조건에서 로드된 페이지 URL을 확인할 수 있습니다. 또는 성능 최적화 목표를 설정할 때 유용합니다.

• 백분위: 각 페이지 백분위수 기준 로드 시간에 대한 통계를 제공합니다.

  • 95분위: 가장 느린 5%의 페이지 로드 시간으로, 페이지 로드 시간이 가장 느렸던 상위 5% 사용자의 경험을 의미합니다.

  • 90분위: 가장 느린 10% 사용자의 페이지 로드 시간으로, 주로 느린 사용자 그룹의 성능 문제를 파악할 때 유용합니다.

  • 75분위: 페이지 로드 시간이 하위 75%보다 느린 상위 25% 사용자의 로드 시간을 보여줍니다.

  • 50분위: 중간값으로, 전체 사용자 중 절반은 해당 시간보다 빠르게 페이지를 로드하고, 절반은 더 느리게 로드한 것을 의미합니다.

팁

• 평균은 전체적인 성능의 흐름을 파악하는 데 유용하지만, 성능 저하가 간헐적으로 발생하는 경우를 파악하기 어려울 수 있습니다. 이때 최대값과 백분위 옵션을 함께 활용하면 성능 저하가 언제 발생했는지, 그 심각성은 어느 정도인지 확인할 수 있습니다.

• 최소값은 성능 최적화 목표를 설정하거나 특정 최적화가 얼마나 효과적인지 평가할 때 참고할 수 있습니다. 하지만 이 값만으로는 성능의 일관성을 평가하기 어렵기 때문에 평균이나 백분위 옵션과 함께 통계 정보를 분석하는 것이 좋습니다.

• 백분위 옵션은 단순한 평균보다 더 세밀하게 성능 데이터를 분석하는 데 적합하며 사용자 경험을 개선하는 데 중요한 데이터를 제공합니다. 이 옵션을 활용하면 성능 저하가 발생하는 사용자의 비율을 파악하고 최적화 대상 페이지를 효과적으로 선택할 수 있습니다.

조회 결과 다운로드하기

조회한 데이터를 CSV 형식의 파일로 다운로드할 수 있습니다. 화면 오른쪽 상단의 버튼을 선택하세요. CSV 파일 이름은 Page_LoadStatistics_YYYYMMDD_HHMMSS.csv 형식입니다.

화면 구성

페이지 로드 성능 추이

페이지 로드 횟수와 성능 지표(응답 시간)의 시간대별 추이를 시각화한 차트입니다. 이 그래프를 통해 특정 시간대에 성능 변동이 있었는지 확인할 수 있습니다.

• 특정 시간의 파란색 막대 그래프를 선택하면 페이지 로드 시간 Top10 및 페이지 로드 수 Top10, 페이지 그룹 목록 섹션의 데이터를 선택한 시간 범위에 맞춰 조회할 수 있습니다.

  

• 통계 기준에서 선택한 옵션에 따라 차트에 표시되는 항목은 변경됩니다.

통계 기준: 평균/최대값/최소값

• 파란색 막대 그래프는 특정 시간대에 로드된 페이지의 수입니다.

• 보라색 선 그래프는 해당 시간대의 평균 페이지 로드 시간입니다.

통계 기준: 백분위

• 파란색은 50분위, 보라색은 75분위, 주황색은 90분위, 초록색은 95분위를 나타냅니다.

• 파란색 막대 그래프는 특정 시간대에 로드된 페이지의 수입니다.

페이지 로드 시간 Top10

5분 또는 1시간 간격으로 페이지 그룹을 그룹화하고, 단위별 페이지 로드 시간이 가장 긴 상위 10개의 페이지 그룹을 시계열 그래프로 표시합니다. 이 그래프는 페이지 로드 시간이 긴 순으로 정렬하여 표시합니다.

• 섹션 하단의 막대 그래프는 시계열 그래프로 표현되는 데이터의 페이지 그룹별 평균값입니다.

• 통계 기준이 평균 또는 최대값, 최소값이면 선택한 기준값으로 경과 시간을 표현합니다.

• 통계 기준이 백분위이면 경과 시간을 95분위로 표현합니다.

• 데이터가 연속된 시간 구간으로 수집되지 않고 특정 구간에만 존재하는 경우 막대 그래프만 표시됩니다.

페이지 로드 수 Top10

5분 또는 1시간 간격으로 페이지 그룹을 그룹화하고, 단위별 페이지 로드 수가 가장 많은 상위 10개의 페이지 그룹을 시계열 그래프로 표시합니다. 이 그래프는 페이지 로드 수가 많은 순으로 정렬하여 표시합니다.

• 섹션 하단의 막대 그래프는 시계열 그래프로 표현되는 데이터의 페이지 그룹별 합산값입니다.

• 데이터가 연속된 시간 구간으로 수집되지 않고 특정 구간에만 존재하는 경우 막대 그래프만 표시됩니다.

페이지 그룹 목록

페이지 그룹을 기준으로 다양한 성능 지표를 확인할 수 있는 목록입니다.

• 통계 기준을 백분위로 선택하면 페이지 그룹별 건수와 50분위, 75분위, 90분위, 95분위에 대한 경과 시간을 추가로 확인할 수 있습니다.

• 목록의 가장 왼쪽의 상세 버튼을 선택하면 페이지 로드 통계 상세 화면이 표시됩니다. 페이지 로드 통계 상세 화면을 통해서 선택한 페이지 그룹의 상세한 통계 정보를 확인할 수 있습니다. 자세한 내용은 다음 문서를 참조하세요.

• 페이지 그룹 컬럼의 버튼을 선택하면 사용자 세션 로그 검색 메뉴로 이동할 수 있습니다. 선택한 페이지 그룹 URL 및 조회 시간을 필터로 적용한 결과를 확인할 수 있습니다.

• 컬럼 설정: 테이블 헤더 컬럼을 감추거나 원하는 항목을 추가할 수 있습니다. 컬럼 순서를 변경할 수도 있습니다. 자세한 내용은 다음 문서를 참조하세요.

노트

• 페이지 로드 통계 메뉴에서 사용자 세션 로그 검색 메뉴로 이동할 때 지정한 시간 범위 전후의 데이터도 포함될 수 있습니다.

  • 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분으로 확장됩니다.

• 테이블의 컬럼 헤더에 마우스를 오버하면 해당 컬럼에 대한 상세 정보를 툴팁 형태로 제공합니다. 컬럼 항목에 대한 자세한 내용은 다음 문서를 참조하세요.

  

페이지 로드 통계 상세

선택한 페이지 그룹의 상세한 통계 정보를 확인할 수 있습니다.

• 페이지 로드 타임라인

  

  웹 애플리케이션의 전체 페이지 로드 성능 정보를 제공합니다. 페이지 로드 시간과 로드 단계별 과정을 평균 시간으로 나타냅니다. 이를 통해 브라우저 애플리케이션의 전반적인 성능을 파악할 수 있습니다. 자세한 내용은 다음 문서를 참조하세요.

  노트

  통계 기준이 백분위이면 페이지 로드 성능을 백분위로 표시합니다. 파란색은 50분위, 보라색은 75분위, 주황색은 90분위, 초록색은 95분위를 나타냅니다.

• 페이지 로드 시간

  

  선택한 페이지 그룹의 시간에 따른 페이지 로드 시간을 확인할 수 있습니다. 선택 상자에서 다양한 성능 지표를 선택할 수 있습니다. 성능 지표에 대한 자세한 내용은 다음 문서를 참조하세요.

  노트

  통계 기준이 백분위이면 백분위별 페이지 로드 시간을 제공합니다.

• 페이지 로드 수

  

  선택한 페이지 그룹의 시간에 따른 페이지 로드 수를 확인할 수 있습니다.

• 브라우저 별 페이지 로드 Top10 / 운영체제 별 페이지 로드 Top10 / 디바이스 별 페이지 로드 Top10

  

  페이지 로드 건수를 기준으로 상위 10개의 브라우저, 운영체제, 디바이스 항목을 원형 그래프로 제공합니다. 이를 통해 웹 애플리케이션을 이용하는 사용자의 환경을 파악할 수 있습니다.

• 브라우저 별 페이지 로드 시간 / 운영체제 별 페이지 로드 시간 / 디바이스 별 페이지 로드 시간

  

  브라우저, 운영체제, 디바이스 별 페이지 로드 시간을 제공합니다. 이를 통해 페이지 로드 시간이 느려지는 사용자의 환경을 파악할 수 있습니다.

  노트

  각 섹션의 오른쪽 상단의 버튼을 선택하면 테이블 목록 형식으로 변경할 수 있습니다. 테이블 목록 형식에서는 경과 시간과 세부 시간에 대한 정보를 추가로 제공합니다. 다시 그래프 형식으로 변경하려면 버튼을 선택하세요.

• 페이지 URL Path 목록

  

  페이지 URL 경로(Path)를 기준으로 다양한 성능 지표를 한눈에 확인할 수 있는 테이블 목록입니다. 정규 표현식으로 그룹화하지 않은 URL path를 기준으로 목록을 제공합니다.

  • 목록의 가장 왼쪽의 상세 버튼을 선택하면 페이지 URL path 기준 페이지 로드 통계 상세 화면을 확인할 수 있습니다.

  • 페이지 URL Path 컬럼의 버튼을 선택하면 사용자 세션 로그 검색 메뉴로 이동할 수 있습니다. 선택한 페이지 그룹 URL 및 조회 시간을 필터로 적용한 결과를 확인할 수 있습니다.

  노트

  • 페이지 URL Path 목록 메뉴에서 사용자 세션 로그 검색 메뉴로 이동할 때 지정한 시간 범위 전후의 데이터도 포함될 수 있습니다.

    • 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분으로 표시됩니다.

조회 결과 필터링하기

조회한 통계 데이터를 페이지 그룹 또는 성능 지표 (ms)를 기준으로 필터링하여 원하는 내용을 집중 분석할 수 있습니다.

페이지 그룹 필터

특정 URL과 관련한 페이지를 선택해 성능 데이터를 조회할 수 있습니다. 페이지 그룹 옵션에서 원하는 페이지 그룹 항목을 선택하세요.

노트

페이지 그룹은 최대 3개까지 선택할 수 있습니다.

성능 지표 필터

성능 지표는 페이지 로드 시간, 리다이렉트 시간, 다운로드 시간 등을 의미합니다. 다양한 성능 지표에 임계값을 적용하여 조회할 수 있습니다. 성능 지표 (ms) 옵션에서 원하는 지표 항목을 선택한 다음 임계값과 연산자 조건을 적용하세요.

• 연산자 종류: >(보다 큼), >=(보다 크거나 같음), <(보다 작음), <=(보다 작거나 같음), ==(같음)

• 임곗값으로 양수, 음수, 0을 입력할 수 있지만, 선택한 성능 지표에 따라 음수 입력 여부는 다를 수 있습니다.

• 한 개의 성능 지표에 대해 필터를 적용하고 조회할 수 있습니다.

노트

선택할 수 있는 성능 지표에 대한 자세한 내용은 다음 문서를 참조하세요.

컬럼 설정하기

페이지 그룹 목록에서 테이블 헤더 컬럼을 감추거나 원하는 항목을 추가할 수 있습니다. 컬럼 순서를 변경할 수도 있습니다. 컬럼 설정 버튼을 선택하세요.

노트

왼쪽 목록을 오른차순 또는 내림차순으로 정렬하려면 / 버튼을 선택하세요.

컬럼 추가하기

1. 왼쪽 목록에서 추가할 컬럼 항목을 선택하세요.

2. 선택한 컬럼 항목이 오른쪽 목록에 추가된 것을 확인하세요.

3. 원하는 컬럼 항목을 모두 추가했으면 확인 버튼을 선택하세요.

노트

• 모든 컬럼 항목을 선택하려면 왼쪽 목록 상단의 전체 선택을 클릭하세요.

• 컬럼 항목에 대한 자세한 내용은 다음 문서를 참조하세요.

컬럼 삭제하기

1. 오른쪽 목록에서 삭제할 컬럼 항목의 오른쪽에 버튼을 선택하세요.

2. 왼쪽 목록에서 삭제한 컬럼 항목의 체크 박스가 해제된 것을 확인하세요.

3. 원하는 컬럼 항목을 모두 삭제했으면 확인 버튼을 선택하세요.

컬럼 순서 변경하기

다음 제공하는 기능을 통해 컬럼의 순서를 변경하거나 원하는 항목을 고정할 수 있습니다.

• 오른쪽 목록에서 순서를 변경할 항목을 드래그해서 원하는 위치로 이동해 컬럼의 순서를 변경할 수 있습니다.

• 컬럼 항목 오른쪽의 버튼을 선택하세요. 선택한 컬럼 항목은 최상단에 고정됩니다. 고정된 컬럼 항목은 테이블 목록에서 가장 왼쪽에 고정됩니다.

모든 설정을 완료한 후에는 확인 버튼을 선택하세요.

컬럼 설정 초기화하기

변경 사항을 모두 취소하고 초기화하려면 초기화 버튼을 선택하세요. 초기화 설정을 반영하려면 확인 버튼을 선택하세요.

컬럼 및 용어 안내

컬럼	단위	설명
백엔드 시간	밀리 세컨드	페이지 로드 중 백엔드에서 처리된 시간입니다. (startTime부터 responseEnd까지의 시간)
프론트엔드 시간	밀리 세컨드	페이지 로드 중 프론트엔드 영역의 처리 시간입니다. (domInteractive부터 loadEventEnd까지의 시간)
리다이렉트 시간	밀리 세컨드	브라우저가 웹 페이지를 불러오면서 리다이렉트에 소요된 시간입니다. (redirectStart부터 redirectEnd까지의 시간)
캐싱 시간	밀리 세컨드	브라우저가 웹 페이지를 불러오면서 캐시된 리소스를 검색하는데 소요된 시간입니다. (fetchStart부터 domainLookupStart까지의 시간)
DNS 시간	밀리 세컨드	브라우저가 웹 페이지를 불러오면서 웹사이트 도메인을 조회하는데 소요된 시간입니다. (domainLookupStart부터 domainLookupEnd의 시간)
서버 연결 시간	밀리 세컨드	페이지 로드 중 브라우저와 서버 간의 네트워크 연결을 설정하는 데 소요된 시간으로, 클라이언트와 서버가 연결하는 데 소요된 시간입니다.
SSL 시간	밀리 세컨드	TLS 핸드셰이크에 소요된 시간입니다. (connectEnd부터 secureConnectionStart까지의 시간) 마지막 요청이 HTTPS를 사용한 경우에만 측정합니다.
FirstByte 시간	밀리 세컨드	브라우저가 웹 페이지를 불러오면서 네트워크 요청을 보낸 후 서버로부터 첫 번째 바이트(byte)를 수신할 때까지 소요된 시간입니다. (requestStart부터 responseStart까지의 시간)
다운로드 시간	밀리 세컨드	브라우저가 웹 페이지를 불러오면서 서버로부터 리소스를 다운로드하는데 소요된 시간입니다. (responseStart부터 responseEnd까지의 시간)
DomContentLoaded 시간	밀리 세컨드	웹 페이지가 초기 콘텐츠를 렌더링하고 상호 작용할 수 있는 상태가 되기까지의 시간입니다. (domContentLoadedEventStart부터 domContentLoadedEventEnd까지의 시간)
Dom 로드 시간	밀리 세컨드	웹 페이지의 모든 자원을 로드하고 렌더링이 완료된 후 사용자가 상호 작용할 수 있는 상태까지의 시간입니다. (loadEventStart부터 loadEventEnd까지의 시간)
렌더링 시간	밀리 세컨드	서버로부터 다운로드한 리소스를 화면에 렌더링하고 페이지 로드 이벤트를 완료하는데 소요된 시간입니다. (domInteractive부터 domComplete까지의 시간)
onLoad 이벤트 시간	밀리 세컨드	브라우저에서 측정하는 load 이벤트가 완료되는 시간입니다. (시작부터 loadEventEnd까지의 시간)
경과 시간	밀리 세컨드	브라우저가 웹 페이지를 완전히 불러오는데 소요된 시간입니다.
건수	건수	페이지 로드 수입니다.
페이지 그룹	URL 텍스트	URL 경로(URL Path)를 정규 표현식을 통해 정규화하여 제공하는 통계 그룹입니다. 자세한 내용은 다음 문서를 참조하세요.
페이지 URL Path	URL 텍스트	정규 표현식을 통해 정규화하지 않은 URL 경로(URL Path)입니다.
브라우저	텍스트	Chrome, Edge, Safari 등, 최종 사용자가 사용한 브라우저 종류입니다.
운영체제	텍스트	macOS, Windows, Linux 등, 최종 사용자가 사용한 기기의 운영체제 종류입니다.
디바이스	텍스트	Desktop, Mobile, Tablet 등, 최종 사용자가 사용한 기기 종류입니다.

노트

Navigation timing에 대한 자세한 내용은 다음 문서를 참조하세요.