네트워크 탭 분석 방법 완벽 가이드 - F12로 느린 페이지 원인 찾기
브라우저 개발자 도구의 네트워크 탭만 제대로 봐도 페이지가 왜 느린지, 어떤 요청이 실패했는지 바로 알 수 있습니다. 기초부터 실전 진단까지 정리했습니다.
페이지가 유난히 느리게 뜨거나, API가 분명 잘 보냈는데 화면에 아무것도 안 나올 때가 있습니다. 이럴 때 새로고침만 반복하면 원인을 절대 못 찾습니다. 브라우저에 이미 내장된 네트워크 탭을 열어보면 어떤 요청이 오갔고, 무엇이 느렸고, 어디서 실패했는지 한눈에 보입니다. 별도 프로그램 설치도 필요 없습니다.
네트워크 탭이란 무엇인가
네트워크 탭은 크롬, 엣지, 파이어폭스 같은 브라우저에 기본 탑재된 개발자 도구의 한 기능입니다. 웹페이지가 열릴 때 브라우저는 HTML 하나만 받는 게 아닙니다. CSS, 자바스크립트, 이미지, 폰트, API 응답까지 수십에서 수백 개의 요청을 서버에 보냅니다. 네트워크 탭은 이 모든 요청을 시간 순서대로 기록해서 보여줍니다.
요청 하나하나의 주소, 응답 크기, 걸린 시간, 상태 코드를 확인할 수 있기 때문에 웹 개발자뿐 아니라 운영자, 마케터, 보안 점검을 하는 사람에게도 유용합니다. 광고 픽셀이 제대로 발동하는지, 외부 스크립트가 페이지를 느리게 만드는지 같은 것도 여기서 검증합니다.
네트워크 탭은 "페이지 뒤에서 실제로 무슨 일이 벌어졌는가"를 보여주는 블랙박스입니다. 추측 대신 데이터로 문제를 좁힐 수 있습니다.
네트워크 탭 여는 방법과 화면 구성
여는 방법은 간단합니다. 운영체제별로 단축키가 조금 다릅니다.
| 환경 | 개발자 도구 열기 | 비고 |
|---|---|---|
| 윈도우 크롬/엣지 | F12 또는 Ctrl + Shift + I | Ctrl + Shift + E 로 바로 네트워크 탭 |
| 맥 크롬 | Cmd + Option + I | 상단 탭에서 Network 선택 |
| 파이어폭스 | F12 | 네트워크 탭 명칭 동일 |
개발자 도구가 열리면 상단 탭 중 Network를 클릭합니다. 이때 화면이 비어 있다면 정상입니다. 네트워크 탭은 열린 이후에 발생하는 요청만 기록하기 때문입니다. 그 상태에서 페이지를 새로고침(F5)하면 요청 목록이 주르륵 쌓입니다.
네트워크 탭 분석 방법 핵심 5단계
요청이 많을 때는 무작정 보면 길을 잃습니다. 아래 순서대로 좁혀가는 것이 가장 빠릅니다.
- 1단계 - 필터로 좁히기: 상단의 필터 바에서 Fetch/XHR을 누르면 API 통신만, Img를 누르면 이미지만 모아서 봅니다. 검색창에 도메인 일부를 입력해도 됩니다.
- 2단계 - 시간순 정렬: Time(또는 Duration) 열을 클릭해 정렬하면 가장 오래 걸린 요청이 위로 옵니다. 병목은 대개 여기 있습니다.
- 3단계 - 상태 코드 확인: Status 열에서 200이 아닌 빨간색(4xx, 5xx)을 먼저 찾습니다. 실패한 요청이 화면 오류의 직접 원인인 경우가 많습니다.
- 4단계 - 응답 내용 열기: 특정 요청을 클릭하면 우측에 Headers, Payload, Response, Timing 탭이 뜹니다. Response에서 서버가 실제로 보낸 데이터를 확인합니다.
- 5단계 - 용량 점검: Size 열로 무거운 파일을 찾습니다. 이미지 한 장이 수 MB라면 최적화 대상입니다.
API 응답을 Response 탭에서 보면 한 줄로 압축된 JSON이라 읽기 힘들 때가 많습니다. 이럴 때는 내용을 복사해 JSON 포매터에 붙여넣으면 줄바꿈과 들여쓰기가 정리돼 구조를 한눈에 파악할 수 있습니다. 어떤 키가 비어 있고 어디서 값이 누락됐는지 훨씬 빨리 보입니다.
주요 열과 상태 코드 읽는 법
네트워크 탭 목록에는 여러 열이 있습니다. 자주 보는 것만 알아도 충분합니다.
꼭 봐야 할 열
- Name: 요청한 파일이나 주소의 이름
- Status: 서버 응답 코드. 성공/실패를 가르는 핵심 지표
- Type: 요청 종류(document, script, fetch, png 등)
- Size: 응답 용량. 괄호 안에 from cache가 보이면 캐시에서 가져온 것
- Time: 요청부터 응답 완료까지 걸린 시간
상태 코드 빠르게 읽기
| 코드 | 의미 | 대처 |
|---|---|---|
| 200 | 정상 응답 | 문제 없음 |
| 301 / 302 | 주소 이동(리다이렉트) | 의도한 이동인지 확인 |
| 304 | 변경 없음(캐시 사용) | 정상, 오히려 빠름 |
| 404 | 해당 주소 없음 | 경로 오타나 삭제된 파일 점검 |
| 500 | 서버 내부 오류 | 서버 로그 확인 필요 |
특히 404는 오타난 이미지 경로나 사라진 스크립트에서 자주 나오고, 500은 서버 쪽 문제이므로 프런트엔드 코드를 아무리 고쳐도 해결되지 않습니다. 코드만 보고도 책임 영역을 가를 수 있다는 점이 네트워크 탭 분석 방법의 핵심 가치입니다.
실전 - 느린 페이지 원인 진단하기
실제 상황에 적용해 보겠습니다. "페이지가 3초 넘게 떠야 보인다"는 문제를 받았다고 가정합니다.
먼저 네트워크 탭을 열고 새로고침합니다. 하단을 보면 총 요청 수, 전송 용량, 전체 로딩 시간(Finish, DOMContentLoaded, Load)이 표시됩니다. 그다음 Time 열로 정렬해 가장 느린 요청을 봅니다. 흔한 원인은 세 가지입니다.
- 이미지가 너무 큼: Size 열에서 수 MB짜리 이미지가 여러 개라면 이게 주범입니다. 가로 폭 1920px로 충분한데 원본 6000px을 그대로 올린 경우가 많습니다. 이럴 때는 업로드 전에 이미지 리사이저로 적정 크기로 줄이면 로딩 시간이 눈에 띄게 짧아집니다.
- 외부 스크립트 지연: 광고나 분석 도구 같은 외부 도메인 요청이 응답을 늦게 주면 그만큼 화면이 늦게 완성됩니다.
- 요청 개수 과다: 작은 파일이라도 수백 개면 누적 시간이 길어집니다.
특정 요청의 Timing 탭을 열면 Waiting(서버 처리 대기), Content Download(내려받기) 등 단계별 시간이 쪼개져 나옵니다. Waiting이 길면 서버가 느린 것이고, Download가 길면 파일이 무겁거나 회선이 느린 것입니다. 이렇게 단계를 나눠 보면 "서버 문제냐 파일 문제냐"를 정확히 가를 수 있습니다.
자주 묻는 질문
네트워크 탭이 텅 비어 있어요
탭을 연 뒤에 발생한 요청만 기록되기 때문입니다. 탭을 열어둔 상태에서 페이지를 새로고침하면 목록이 채워집니다.
요청이 너무 많아 못 찾겠어요
상단 필터에서 Fetch/XHR을 눌러 API 통신만 보거나, 검색창에 찾는 파일명 일부를 입력해 좁히세요. Status 열로 실패 요청만 먼저 골라내는 것도 빠릅니다.
모바일 페이지도 분석할 수 있나요
가능합니다. 개발자 도구 좌측 상단의 기기 모양 아이콘(Toggle device toolbar)을 켜면 모바일 화면으로 전환되고, 그 상태에서 발생하는 요청을 동일하게 네트워크 탭에서 볼 수 있습니다.
네트워크 탭은 한 번 익혀두면 평생 쓰는 도구입니다. 오늘 당장 자주 가는 사이트에서 F12를 눌러 Network 탭을 열고 새로고침해 보세요. 그리고 가장 느린 요청 하나와 빨간 상태 코드 하나만 찾아보면, 분석 감각이 빠르게 잡힙니다.
