리소스 통계
홈 화면 > 프로젝트 선택 > 통계 > 리소스 로드 통계
리소스 로드 통계는 웹 페이지 성능 개선에 필요한 판단 기준을 제공합니다. 웹 페이지의 리소스별 성능 데이터를 시각화하여 성능 추이, 응답 시간, 크기를 한눈에 보여줍니다. 이를 통해 각 리소스가 페이지 로드에 미치는 영향을 파악하고, 성능 병목을 분석할 수 있습니다. 로드 시간이 긴 리소스를 식별하고, 대용량 리소스를 최적화하며, 서드파티(3rd party) 리소스가 전체 성능에 미치는 영향을 점검할 수 있습니다.
수집 데이터에 대한 자세한 내용은 다음 문서를 참조하세요.
리소스 로드 통계 확인하기
페이지 로드 시간을 단축시키고, 사용자 경험을 향상시키는 데 필요한 데이터를 제공합니다. 성능 저하의 원인을 명확히 파악할 수 있어, 개선 작업을 효과적으로 진행할 수 있습니다.
-
통계 > 리소스 로드 통계 메뉴로 이동하세요.
-
시간에서 성능 지표를 조회할 날짜와 시간을 설정하세요.
-
설정 가능한 시간 범위: 최소 5분, 최대 3일
-
데이터 조회 단위: 2시간 이하 → 5분 단위, 2시간 초과 → 1시간 단위
-
-
통계 기준에서 원하는 항목을 선택하세요. 자세한 내용은 통계 기준 문서를 참고하세요.
-
화면 오른쪽 위의
버튼을 클릭하세요. -
선택한 시간 범위의 성능 지표가 각 섹션에 차트와 목록으로 표시됩니다.
- 그래프 위에 마우스를 올리면 해당 시간대의 상세 지표를 확인할 수 있습니다.
통계 기준 선택하기
통계 기준은 사용자가 분석하려는 통계 지표를 다음 선택한 기준으로 확인할 수 있는 옵션입니다.
| 통계 기준 | 설명 | |
|---|---|---|
| 평균 | 각 리소스의 평균 로드 시간을 계산하여 통계를 제공합니다. 전체 성능을 파악하는데 유용합니다. | |
| 최대값 | 각 리소스의 최대 로드 시간을 기준으로 통계를 제공합니다. 페이지 로드 시간이 가장 비효율적인 리소스를 파악할 수 있습니다. 리소스 응답 시간이나 크기가 큰 구간을 분석하는데 활용할 수 있습니다. | |
| 최소값 | 각 리소스의 최소 로드 시간을 기준으로 통계를 제공합니다. 페이지 로드 시간이 가장 빠른 리소스를 확인할 수 있습니다. | |
리소스 타입 별 로드 수 추이
리소스 타입별 로드 수를 시간 단위로 시각화합니다. 특정 리소스 유형의 로드 비율이 과도하게 높으면 성능 병목이 발생할 수 있습니다. 이 경우 해당 리소스의 원인을 분석하고 최적화를 진행하세요.
-
원형 차트는 리소스 유형별 비율을 표시합니다. 차트에 마우스를 올리면 해당 리소스의 비율을 툴팁으로 확인할 수 있습니다.
-
막대 그래프는 시간 단위의 리소스 로드 수 추이를 표시합니다. 그래프에 마우스를 올리면 해당 시간대의 리소스 타입별 로드 수를 툴팁으로 확인할 수 있습니다. 사용자가 특정 시간을 막대 그래프를 선택하면 리소스 로드 수 Top 10 - 경과 시간, 크기 및 리소스 그룹 목록 섹션의 데이터를 선택한 시간 범위에 맞춰 갱신합니다.
리소스 유형에 대한 자세한 내용은 다음 문서를 참조하세요.
리소스 로드 수 - 경과 시간
로드 수가 가장 많은 상위 10개 리소스의 응답 시간을 차트와 목록으로 제공합니다. 트래픽이 집중된 리소스의 성능 영향을 빠르게 파악할 수 있습니다. 시간대별 응답 시간 추이를 함께 확인하여 특정 시간에 발생하는 지연을 분석할 수 있습니다. 응답 시간이 긴 리소스를 중심으로 서버 처리 시간과 네트워크 지연을 점검하고 최적화에 활용할 수 있습니다.
리소스 로드 수 - 건수
로드 수가 가장 많은 상위 10개 리소스의 크기를 차트와 목록으로 제공합니다. 웹 페이지 로딩 성능 저하를 유발하는 대용량 리소스를 확인할 수 있습니다. 이미지 최적화, JS 번들링 및 압축을 통해 페이지 성능을 개선할 수 있습니다.
리소스 그룹 목록
웹 페이지에 로드된 모든 리소스를 목록으로 제공합니다. 각 리소스의 세부 성능 지표를 확인할 수 있습니다. 리소스의 로드 경로와 요청 건수를 분석하여 불필요한 반복 요청을 줄일 수 있습니다. 외부 리소스(3rd party)의 리소스 호스트 컬럼을 확인하여 타사 API 또는 CDN의 성능 상태를 점검할 수 있습니다. 자세한 내용은 다음 문서를 참고하세요.
-
테이블의 헤더 컬럼을 클릭하면 해당 컬럼을 기준으로 목록을 정렬할 수 있습니다.
-
헤더 컬럼에 마우스를 오버하면 해당 컬럼에 대한 설명을 툴팁으로 확인할 수 있습니다.
아이콘 항목 | 설명 |
|---|---|
 | CSV 버튼을 클릭하면 조회 결과를 CSV 파일로 저장할 수 있습니다. |
 컬럼 설정 | 컬럼을 숨기거나 추가하고 순서를 변경할 수 있습니다. 자세한 내용은 컬럼 설정 문서를 참고하세요. |
 | 새 창 아이콘을 클릭하면 리소스 그룹 목록을 새 창에서 확인할 수 있습니다. |
리소스 로드 통계 상세
리소스 로드 통계에서 리소스 그룹 목록의 
상세 아이콘을 클릭하면 선택한 리소스 그룹의 통계를 보여주는 리소스 로드 통계 상세 창으로 이동합니다.
-
리소스 로드 타임라인
선택한 리소스 그룹의 전체 로드 성능을 제공합니다. 리소스의 총 로드 시간과 단계별 소요 시간을 평균값으로 표시하여 브라우저 애플리케이션의 로딩 성능을 한눈에 파악할 수 있습니다. 자세한 내용은 다음 문서를 참고하세요.
-
리소스 페이지 로드 시간 추이
선택한 리소스 그룹의 기간별 페이지 로드 시간을 확인합니다. 지표 선택 상자에서 다양한 성능 지표를 선택할 수 있습니다. 성능 지표에 대한 자세한 내용은 다음 문서를 참조하세요.
-
리소스 페이지 로드 사이즈 추이
선택한 리소스 그룹의 시간대별로 로드된 페이지 리소스의 총 크기를 확인할 수 있습니다. 페이지의 로드 크기 추이를 통해 네트워크 부하와 페이지 최적화 상태를 분석할 수 있습니다.
-
리소스 페이지 로드 수 추이
선택한 리소스 그룹의 시간대별로 로드된 리소스 수를 확인할 수 있습니다. 리소스 수가 급증하거나 비정상적으로 증가하는 경우, 특정 페이지에서 과도한 리소스 요청이 발생했는지 확인할 수 있습니다.
-
DNS 시간 / 서버 연결 시간 / FirstByte 시간 / 다운로드 시간
시간대별로 DNS 조회, 서버 연결 설정, 첫 번째 바이트 수신, 리소스 다운로드 각 단계의 평균 소요 시간을 확인합니다.
-
리소스 그룹 목록
선택한 리소스 그룹에 포함하는 개별 리소스에 대한 다양한 성능 지표를 확인할 수 있는 목록입니다.
조회 결과 필터링하기
조회한 통계 데이터를 도메인, 성능 지표(byte, ms), 리소스 경로 기준으로 필터링하여 원하는 항목을 집중 분석합니다.
-
화면 상단의 필터 입력창을 클릭하세요.
-
필터 추가하기 창에서 필터를 지정하세요. 필터 태그는
필터 키,조건,검색 값순서로 입력합니다.- 도메인 분류 옵션을 사용하면 리소스를 제공하는 주체를 구분할 수 있습니다. 자세한 내용은 도메인 필터를 참고하세요.
도메인 필터
도메인 분류 옵션을 활용하면 리소스를 제공하는 주체를 구분하여 성능에 영향을 끼치는 요인이 내부(1st Party)인지 외부(3rd Party)인지 파악할 수 있습니다. 웹 페이지 성능을 최적화할 때 어느 단계에서 병목이 발생하는지 분석할 수 있습니다.
-
1st Party: 자사에서 제공하는 리소스만을 필터링할 수 있습니다. 웹 서버나 자체 호스팅된 리소스 등이 해당합니다.
팁1st Party 리소스를 확인하여 내부 서버의 성능 병목을 점검합니다.
-
3rd Party: 외부 서비스에서 제공하는 리소스입니다. CDN 리소스, 외부 API(예, Google Analytics), 타사 라이브러리 등 외부 도메인에서 로드되는 모든 리소스가 포함됩니다.
팁3rd Party 리소스의 응답 시간을 분석하여 외부 서비스나 CDN의 성능이 웹 페이지에 미치는 영향을 평가합니다.
필터 키, 조건, 검색 값 입력
-
필터 키입력 시 리소스 path, 리소스 type 및 성능 지표 (byte, ms) 옵션을 제공합니다. -
조건입력 시필터 키가 리소스 path, 리소스 type인 경우일치,불일치옵션을 제공하며, 성능 지표인 경우>,<,<=,>=,==옵션을 제공합니다. -
검색 값입력 시 일치 검색(>,<,<=,>=,==)일 때 파란색으로, 제외 검색(불일치)일 때 붉은색으로 하이라이팅합니다.
선택할 수 있는 성능 지표에 대한 자세한 내용은 다음 문서를 참조하세요.
필터 태그 제거
-
태그의 X 아이콘 클릭 시 적용된 태그를 삭제할 수 있습니다.
-
입력 창의 전체 삭제
아이콘 클릭 시 전체 태그를 삭제할 수 있습니다.
리소스 유형
다음은 와탭 브라우저 모니터링에서 정의하는 리소스 유형에 대한 안내입니다.
| 리소스 유형 | 설명 |
|---|---|
| script | 자바스크립트 파일 리소스입니다. 예를 들어, .js 파일, 프론트엔드 코드 실행 및 동적 기능에 필요한 스크립트 파일입니다. |
| image | 이미지 파일 리소스입니다. 예를 들어, .png, .jpg, .svg 등 다양한 이미지 포맷을 포함합니다. |
| fetch | 브라우저에서 데이터를 가져오는 HTTP 요청입니다. 주로 API 호출이나 JSON 데이터 요청에 사용됩니다. |
| css | 스타일시트 파일 리소스입니다. 웹 페이지의 레이아웃과 디자인을 정의하는 CSS 파일입니다. |
| font | 웹 폰트 리소스입니다. 예를 들어, .woff, .ttf, .otf 등의 폰트 파일을 포함합니다. |
| xhr | XML HTTP Request를 통해 가져오는 리소스입니다. 주로 비동기 데이터 요청(예, AJAX 호출)에 사용합니다. |
| media | 오디오, 비디오 등 미디어 파일 리소스입니다. 예를 들어, .mp4, .mp3, .wav 등 다양한 미디어 포맷을 포함합니다. |
| beacon | navigator.sendBeacon()을 사용하여 비동기 데이터를 서버로 전송하는 요청입니다. |
| document | HTML 문서 자체로, 페이지를 구성하는 주요 콘텐츠 리소스입니다. |
| other | 기타로 분류되는 리소스입니다. 명확한 유형으로 구분되지 않는 리소스를 포함합니다. |
컬럼 설정하기
리소스 그룹 목록에서 테이블 헤더 컬럼을 감추거나 원하는 항목을 추가할 수 있습니다. 컬럼 순서를 변경할 수도 있습니다. 
컬럼 설정 버튼을 클릭하세요.
- 왼쪽 목록을
(오름차순) / 
(내림차순) 아이콘을 클릭해 정렬할 수 있습니다.
컬럼 추가하기
-
컬럼 설정 창의 왼쪽 목록에서 추가할 컬럼 항목을 선택하세요.
- 모든 컬럼을 추가하려면 왼쪽 상단의 전체 선택을 선택하세요.
-
선택한 컬럼 항목이 오른쪽 표시 항목에 추가된 것을 확인하세요.
-
원하는 컬럼 항목을 모두 추가했으면 확인 버튼을 클릭하세요.
컬럼 항목에 대한 자세한 내용은 다음 문서를 참고하세요.
컬럼 삭제하기
-
컬럼 설정 창의 표시 항목에서 삭제할 컬럼 항목의 오른쪽
을 클릭하세요. -
왼쪽 목록에서 삭제한 컬럼 항목의 체크 박스가 해제된 것을 확인하세요.
-
원하는 컬럼 항목을 모두 삭제했으면 확인 버튼을 클릭하세요.
컬럼 순서 변경하기
컬럼의 순서를 변경할 수 있습니다.
-
컬럼 설정 창의 표시 항목에서 순서를 변경할 항목을 드래그해서 원하는 위치로 이동해 컬럼의 순서를 변경하세요.
-
모든 설정을 완료한 후에 확인 버튼을 클릭하세요.
컬럼 설정 초기화하기
변경 사항을 모두 취소하고 초기화할 수 있습니다.
-
컬럼 설정 창의
초기화 버튼을 클릭하세요. -
초기화 설정을 반영하려면 확인 버튼을 클릭하세요.
컬럼 및 용어
| 컬럼 | 단위 | 설명 |
|---|---|---|
| 건수 | 건수 | 리소스가 요청된 총 횟수입니다. |
| 경과 시간 | 밀리 세컨드 | 리소스를 완전히 불러오는 데 소요된 시간입니다. |
| 다운로드 시간 | 밀리 세컨드 | 리소스를 서버로부터 다운로드하는 데 소요된 시간입니다. (responseStart부터 responseEnd까지의 시간) |
| 리다이렉트 시간 | 밀리 세컨드 | 리소스를 로드하는 과정에서 리다이렉트에 소요된 시간입니다. (redirectStart부터 redirectEnd까지의 시간) |
| 리소스 타입 | 텍스트 | 요청한 리소스의 유형입니다. 자세한 내용은 다음 문서를 참조하세요. |
| 리소스 호스트 | 텍스트 | 리소스를 제공하는 서버의 호스트 이름입니다. |
| 리소스 Path | 텍스트 | 요청한 리소스의 URL 경로 또는 파일 경로입니다. |
| 버전 | 텍스트 | 리소스의 버전 정보입니다. |
| 서버 연결 시간 | 밀리세컨드 | 리소스를 요청하는 클라이언트와 서버 간의 네트워크 연결에 소요된 시간입니다. |
| 크기 | 바이트(Byte) | 요청한 리소스의 데이터 크기입니다. |
| 환경 | 텍스트 | 리소스가 로드된 실행 환경입니다. 예, 개발 환경, 운영 환경 등 |
| DNS 시간 | 밀리 세컨드 | 도메인 이름을 조회하는 데 소요된 시간입니다. (domainLookupStart부터 domainLookupEnd까지의 시간) |
| FirstByte 시간 | 밀리 세컨드 | 서버로부터 첫 번째 바이트(Byte)를 수신할 때까지의 시간입니다. (requestStart부터 responseStart까지의 시간) |
| SSL 시간 | 밀리 세컨드 | HTTPS 연결 시 TLS 핸드셰이크에 소요된 시간입니다. (connectEnd부터 secureConnectionStart까지의 시간) |
Navigation timing에 대한 자세한 내용은 다음 문서를 참고하세요.