페이지 용량 분석

페이지 용량 분석은 입력한 URL의 HTML 문서 크기(바이트)와 그 안에서 참조하는 외부 리소스의 개수를 한 번에 보여 주는 도구입니다. 스크립트·스타일시트·이미지 태그 수를 종류별로 집계해, 페이지가 얼마나 무거운 구조인지 빠르게 가늠할 수 있습니다.

이 도구는 HTML 문서 자체만 서버에서 안전하게 내려받아 분석하며, 스크립트·이미지 같은 개별 리소스를 실제로 다운로드하지는 않습니다. 따라서 결과의 KB 수치는 HTML 문서 크기이고, 리소스 개수는 문서에 선언된 참조 수 기준입니다. 전체 전송량까지 정밀하게 보려면 브라우저 개발자도구의 네트워크 탭을 함께 사용하세요.

페이지 용량과 요청 수가 성능에 미치는 영향

웹 페이지가 느려지는 주요 원인은 크게 두 가지입니다. 하나는 내려받아야 할 총 바이트가 많은 것이고, 다른 하나는 받아야 할 파일(요청)의 수가 많은 것입니다. HTML 문서가 크면 첫 화면이 그려지기까지 더 오래 걸리고, 참조하는 스크립트·스타일시트·이미지가 많을수록 브라우저가 처리해야 할 추가 요청이 늘어나 렌더링이 지연됩니다.

• HTML 크기: 본문 길이가 길수록 파싱·전송 시간이 늘어납니다. 인라인 스타일·스크립트가 과도하면 문서가 비대해집니다.
• 스크립트 수: 외부 자바스크립트가 많으면 다운로드·파싱·실행 부담이 커지고, 렌더 차단 가능성이 높아집니다.
• 스타일시트 수: CSS 파일이 분산되어 있으면 렌더링 시작이 늦어집니다. 번들·병합을 검토하세요.
• 이미지 수: 이미지 태그가 많으면 요청과 전송량이 함께 늘어납니다. 지연 로딩과 적절한 포맷을 고려하세요.

측정값을 어떻게 해석할까

이 도구가 보여 주는 리소스 개수는 HTML에 선언된 참조 수일 뿐, 실제 전송된 용량은 아닙니다. 같은 스크립트를 여러 번 참조하거나, 조건부로만 로드되는 리소스도 모두 정적 태그로 세어집니다. 그렇기에 숫자가 크다고 곧바로 문제는 아니지만, 한 페이지에 스크립트나 이미지 참조가 수십 개씩 쌓여 있다면 번들링·지연 로딩·캐싱 전략을 점검할 신호로 볼 수 있습니다.

• 정확한 전송량·로딩 시간은 브라우저 네트워크 탭이나 실측형 성능 도구로 확인하세요.
• HTML이 비정상적으로 크다면 서버 사이드 렌더링 결과에 과도한 인라인 데이터가 포함됐는지 살펴보세요.
• 텍스트 자원의 전송량을 줄이려면 압축 확인으로 gzip·brotli 적용 여부를, 이미지가 많다면 이미지 포맷 추천으로 최적 포맷을 점검하세요.