크롬 개발자 도구 네트워크 탭 성능 테스트 가이드
ℹ️이 콘텐츠에는 광고가 포함되어,판매 발생 시 수익이 발생합니다.(네이버 쇼핑 커넥트, 아마존 어필리에이트, 애드센스 등)웹사이트의 실제 성능을 분석하려면 단순한 속도 점수보다는 브라우저가 리소스를 어떻게 로드하는지 직접 확인해야 합니다. 크롬 개발자 도구 네트워크 탭은 페이지가 로드되는 동안 발생하는 모든 요청을 실시간으로 추적하여, 병목 구간·캐시 정책·응답 속도를 정확히 파악할 수 있는 가장 강력한 도구입니다.
이 글에서는 네트워크 탭의 주요 항목과 리소스 분석 방법을 단계 별로 살펴보며, 워드프레스와 같은 CMS 및 일반 웹사이트 모두에 적용 가능한 실무 중심의 성능 테스트 방법을 정리했습니다.
Ⅰ. 성능 분석 전 준비 단계
성능 테스트는 페이지 로드 과정을 측정하기 전에 브라우저와 서버의 상태를 동일하게 맞추는 것이 중요합니다. 스트 전 아래 사항을 반드시 확인합니다.
|
구분 |
설명 |
|---|---|
|
브라우저 캐시 비활성화 |
첫 방문자 기준으로 데이터를 측정하기 위해 |
|
탭 초기화 |
기존 기록이 남지 않도록 Network 탭의 |
|
측정 환경 통일 |
동일한 네트워크 속도와 창 크기(Desktop/Mobile)를 유지해야 비교가 가능합니다. |
Ⅱ. 크롬 개발자 도구 네트워크 탭 성능 테스트
크롬 개발자 도구 네트워크 탭은 사용자에게 가장 직관적인 웹사이트 속도 측정 도구입니다.
1. 기본 사용 방법
크롬 개발자 도구를 실행한 뒤(F12 또는 Ctrl + Shift + I), 상단 탭에서 [Network]를 선택합니다. 페이지를 새로 고침 하면(F5 or Ctrl + R), 사이트 로딩 과정에서 발생하는 모든 리소스 요청이 아래와 같이 기록됩니다.
네트워크 탭은 첫 방문자 기준으로 측정을 위해 캐시 사용 중지 후 실행하는 것이 기본 원칙입니다.
![웹사이트 성능 테스트-크롬 개발자 도구_네트워크 탭 활용__1[영어]](https://cdn.uknew.co/storage/2025/10/웹사이트-성능-테스트-크롬-개발자-도구_네트워크-탭-활용__1영어-1024x514.png)
|
항목 |
설명 |
|---|---|
|
①이름 |
요청된 리소스의 파일 이름입니다. 이미지, CSS, JS 등 모든 요청이 시간 순으로 표시됩니다. |
|
②상태 |
HTTP 응답 코드로, 200(정상), 301/302(리다이렉션), 404(누락) 등을 확인할 수 있습니다. |
|
③유형 |
리소스 종류를 나타냅니다. |
|
④시작점 |
요청을 유발한 스크립트 또는 문서의 위치를 보여줍니다. 병목 원인 추적에 중요합니다. |
|
⑤크기 |
리소스 전송 크기로, 이미지·폰트 용량 확인에 유용합니다. |
|
⑥시간 |
요청 완료까지 걸린 시간입니다. 응답 지연 시 서버·네트워크 문제를 의심할 수 있습니다. |
①~⑥번은 설정 시 가장 기본적인 항목들입니다.
|
번호 |
항목 |
|---|---|
|
⑦필터 |
요청 유형(CSS, JS, Img 등)을 선택적으로 표시할 수 있습니다. 특정 리소스만 분석할 때 유용합니다. |
|
⑧요청 |
현재 로드된 전체 요청 수입니다. 페이지 무게와 요청 수를 파악할 수 있습니다. |
|
⑨전송 크기 |
실제 네트워크를 통해 전송된 데이터 크기입니다. 압축 적용 여부를 판단할 수 있습니다. |
|
⑩DOMContentLoaded |
주요 이벤트 시점으로, 브라우저가 HTML을 파싱 완료한 시점과 |
⑨전송 크기에서 [1.2MB 전송됨]의 의미는 네트워크를 통해 실제 전송된 데이터 크기를 의미하며, 1.7MB 리소스는 브라우저가 로딩하여 메모리에 올린 실제 파일 크기입니다.
2. 리소스 상세 분석
Network 탭 목록에서 특정 리소스를 클릭하면, 하단 패널에 해당 요청의 세부 정보가 표시됩니다. 이 영역은 ‘헤더’, ‘미리보기’, ‘응답’, ‘타이밍’ 탭으로 구성되어 있으며, 웹페이지의 병목 원인과 캐시 작동 상태를 직접 확인할 수 있습니다.
‘페이로드’는 POST 요청 시에만 표시되는 항목이며, ‘④시작점’은 요청 목록 상단과 탭 목록에서 확인하는 정보이기 때문에 리소스 상세 분석 패널 탭 구성에서는 설명에서 제외됩니다.
헤더 탭은 일반, 응답 헤더, 요청 헤더 3가지 항목으로 구성되어 있으며, 서버와 브라우저 간의 통신 정보를 세부적으로 확인할 수 있습니다. 특히 Cache-Control, Content-Encoding, Etag 같은 항목은 캐시 정책과 압축 방식이 올바르게 설정되었는지 판단하는 핵심 지표입니다.
|
항목 |
설명 |
|---|---|
|
요청된 리소스의 실제 주소 | |
|
서버에 데이터를 요청하는 방식 ( | |
|
서버가 응답한 결과 코드 | |
![웹사이트 성능 테스트 - 크롬 개발자 도구 네트워크_헤더 탭 1[영어]](https://cdn.uknew.co/storage/2025/10/웹사이트-성능-테스트-크롬-개발자-도구-네트워크_헤더-탭-1영어.png "크롬 개발자 도구 네트워크 탭 성능 테스트 가이드 12")
|
항목 |
설명 |
예시 값 |
|---|---|---|
|
Cache-Control |
캐시 저장·유지 정책 |
max-age=604800, no-cache |
|
Content-Encoding |
전송 시 적용된 압축 방식 |
gzip, br, zstd |
|
Content-Type |
리소스의 데이터 형식 |
text/css; charset=UTF-8 |
|
Server |
사용 중인 서버 소프트웨어 정보 |
nginx/1.28.0 |
|
Expires |
리소스 만료 시점 (캐시 유효 기간) |
Wed, 29 Oct 2025 02:00:53 GMT |
|
Last-Modified |
파일이 마지막으로 수정된 시점 |
Tue, 21 Oct 2025 00:55:16 GMT |
|
ETag |
W/”68f6d9f4-97a7″ | |
|
Vary |
accept-encoding |
![웹사이트 성능 테스트 - 크롬 개발자 도구 네트워크_헤더 탭 2[영어]](https://cdn.uknew.co/storage/2025/10/웹사이트-성능-테스트-크롬-개발자-도구-네트워크_헤더-탭-2영어.png "크롬 개발자 도구 네트워크 탭 성능 테스트 가이드 14")
|
항목 |
설명 |
예시 값 |
|---|---|---|
|
:authority / :path / :method |
요청 대상 서버, 경로, |
testpilotweb.com, /wp-content/…, |
|
Accept |
text/css,*/*;q=0.1 | |
|
Accept-Encoding |
브라우저가 지원하는 |
gzip, deflate, br, zstd |
|
Accept-Language |
선호하는 언어 설정 |
ko-KR, ko;q=0.9 |
|
⚙️Cache-Control (요청) |
브라우저 측 캐시 정책 |
no-cache |
|
User-Agent |
요청을 보낸 브라우저·OS 정보 |
Mozilla/5.0 (Windows NT 10.0; Win64; x64)… |
|
⚙️Sec-Fetch-Site / Mode / User / Platform |
보안·요청 출처 관련 헤더 |
same-origin, navigate, “Windows” |
⚙️Cache-Control의 경우 no-cache는 “캐시를 쓰지 마라”가 아니라, “사용 전에 서버에 유효성 검증을 요청하라”는 뜻입니다. max-age, public, private, no-store 등 캐시 정책은 서버(또는 CDN) 에서 설정해야 하며, 브라우저는 그 지시를 보고 캐시를 저장·검증합니다.
|
지시어 |
의미 |
|---|---|
|
|
캐시 자체를 저장하지 않음 (로그인, 결제 페이지 등 완전 민감 데이터) |
|
|
캐시 사용 전 반드시 서버 검증 필요 (파일은 저장해둠) |
|
|
누구나 캐시 가능 (CDN, 브라우저 모두) |
|
|
개인 브라우저만 캐시 가능 (CDN 등 중간 서버는 X) |
|
|
캐시 유효기간 1일(초 단위) |
⚙️Sec-Fetch-Site 등의 항목은 브라우저가 보안 목적으로 서버에 “이 요청이 어떤 상황에서 발생했는지”를 직접 알려주는 정보입니다.
|
헤더 |
의미 |
예시 값 |
|---|---|---|
|
Sec-Fetch-Site |
요청이 어느 출처(사이트)에서 왔는지 |
|
|
Sec-Fetch-Mode |
요청 방식 (페이지 이동, fetch 등) |
|
|
Sec-Fetch-User |
사용자가 직접 행동했는가 |
|
|
Sec-Fetch-Platform |
사용 중인 운영체제 |
|
“응답된 리소스의 실제 내용”을 브라우저가 해석한 형태로 보여주는 뷰어입니다. 즉, “이 파일 안에는 실제로 어떤 코드나 데이터가 들어있는가?”를 볼 수 있는 탭입니다.
|
구분 |
설명 |
활용 예시 |
|---|---|---|
|
HTML / CSS / JS 파일 |
응답된 파일의 내용을 브라우저가 해석 가능한 형태로 표시 |
– CSS/JS가 정상 로드되는지 확인– 압축되지 않은 상태로 코드 점검– 중복된 스타일이나 스크립트 확인 |
|
JSON / API 응답 |
구조화된 데이터(API 응답 등)를 트리 구조로 보여줌 |
– REST API 요청 결과 확인– Ajax 통신 결과나 헤더 포함 여부 체크 |
|
이미지 / 폰트 / 미디어 |
미리보기로 실제 렌더링된 리소스 표시 |
– 이미지 파일 손상 여부– CDN에서 제대로 불러오는지 |
|
문서 타입(text/html 등) |
브라우저가 렌더링 전 받은 HTML 확인 |
– meta 태그, title, schema 구조 확인– 캐시된 버전과 최신 버전 비교 |
이 탭은 “서버가 실제로 어떤 데이터를 브라우저로 보냈는지”를 가공 없이 원문 그대로 보여주는 탭입니다.
|
구분 |
설명 |
활용 예시 |
|---|---|---|
|
HTML / CSS / JS |
서버가 응답한 원본 코드 그대로 표시 |
– 미리보기 탭은 브라우저가 ‘해석된 형태’를 보여주지만, 응답 탭은 원문 그대로 확인 가능- HTML 안의 주석, 헤더 삽입 코드, 광고 스크립트, 트래킹 코드 등 실제 전달된 소스 확인 |
|
JSON / API |
서버 응답 데이터를 원시 JSON 형태로 표시 |
– REST API 결과값 확인 (예: |
|
문서 / 기타 텍스트 파일 |
헤더 탭에서 MIME이 |
– 캐시나 CDN이 압축하기 전의 문서 상태 확인 |
|
이미지, 폰트 등 |
바이너리 데이터이므로 미리보기 불가, 응답 탭에서는 표시되지 않음 |
– Headers에서 Content-Type으로 구분 ( |
|
비교 항목 |
미리보기(Preview) |
응답(Response) |
|---|---|---|
|
형태 |
브라우저가 해석한 상태 (렌더링 가능한 구조) |
서버가 보낸 원본 텍스트 그대로 |
|
가공 여부 |
브라우저가 일부 정리·색상 표시 등 가공함 |
완전한 원문 (주석 포함, 포맷 그대로) |
|
주로 사용하는 상황 |
코드 구조나 데이터 내용을 빠르게 파악할 때 |
서버 응답의 원본 확인, 문제 발생 시 원인 추적 |
타이밍(Timing) 탭은 웹사이트 성능 테스트의 Network 탭 분석의 마지막이자, 리소스 로딩 과정에서 실제 “시간 지연의 원인”을 수치로 보여주는 핵심 탭으로써 즉, “이 파일이 왜 느린가?”를 시각적으로 알려주는 곳입니다.
|
구분 |
설명 |
주요 활용 |
|---|---|---|
|
대기열 |
브라우저가 요청을 보내기 전, 요청을 “대기열”에 넣고 순서를 기다리는 시간 |
– 동시 연결 제한(6개 규칙) 때문에 생김- 같은 도메인에서 리소스가 몰릴 때 길어짐 |
|
중단됨 |
이미 다른 요청이 진행 중이라 잠시 대기한 시간 (브라우저 내부 지연) |
– 커넥션 재사용, Keep-Alive 제한 시 증가- 캐시·리다이렉트로 이어지는 경우도 있음 |
|
도메인 이름을 IP 주소로 변환하는 과정. |
– CDN, 외부 API 호출 시 자주 발생- DNS 캐싱이 잘 되어 있다면 거의 0ms | |
|
연결 시작 |
TCP 및 TLS(SSL) 연결을 설정하는 시간 |
– HTTPS 인증서 교환, 핸드셰이크 과정- 첫 연결에서만 길고, Keep-Alive 유지 시 거의 생략됨 |
|
요청 데이터를 서버로 보내는 시간 |
– 대부분 몇 μs 수준 (아주 짧음) | |
|
서버 응답 대기 |
서버가 요청을 처리하고 첫 번째 바이트를 보낼 때까지 기다리는 시간 |
– 즉, TTFB(Time To First Byte) – 서버 응답 속도, DB 처리, 캐시 미적용 등이 이 구간에 반영 |
|
콘텐츠 |
서버가 데이터를 전송하고 브라우저가 받는 시간 |
– 파일 크기와 네트워크 속도에 비례 |
즉, 이 요청은
“요청 자체보다 브라우저 내부 대기열과 커넥션 관리에서 소요된 시간이 더 컸다.”
는 의미입니다.
서버는 실제로 19.57 ms 만에 응답을 돌려줬으니 해당 파일의 로딩이 매우 빠른 상태를 의미합니다.
|
목적 |
확인해야 할 구간 |
진단 방법 |
|---|---|---|
|
서버 응답이 느릴 때 |
|
DB 쿼리, PHP-FPM 지연, 캐시 미적용 가능성 |
|
네트워크 지연일 때 |
|
파일 크기, CDN 거리, 브라우저 네트워크 속도 확인 |
|
클라이언트 병목일 때 |
|
같은 도메인 요청 과다, 병렬 처리 제한, HTTP/2 미적용 여부 확인 |
|
SSL/TLS 문제일 때 |
|
HTTPS 핸드 암호키 교환 절차 시간이 비정상적으로 긴 경우 인증서 체인 확인 |
