크롬 F12 개발자도구 성능 관련 탭 사용법
Network 탭 사용법
네트워크 탭에서 웹 페이지 리소스가 예상대로 다운로드, 업로드 되는지 확인할 수 있습니다.
리소스 목록의 최상위 리소스는 일반적으로 HTML 문서이고 네트워크 활동이 시간순으로 기록됩니다.
리소스명, 응답코드 상태, 리소스 유형, 요청을 발생시킨 코드, 자원의 크기 및 시간을 확인할 수 있습니다.
폭포 열 활성화 방법
리소스 목록 우클릭 > Waterfall 선택
리소스 대기열 시간, 연결에 걸린 시간, 요청 전송 시간, 서버 응답 대기 시간, 콘텐츠 다운로드 시간 등을 볼 수 있습니다.
네트워크 요청 종류 필터링
| All | 모든 네트워크 요청 및 응답 확인 |
| Fetch/XHR |
비동기 API 서버 요청만 확인 예시 : XMLHttpRequest (XHR), Fetch API 요청 등 |
| Doc |
HTML 문서 요청만 확인 SPA는 페이지 초기 로드 시에만 확인 가능합니다. 페이지 이동 시에는 서버에서 HTML을 받지 않습니다. 예시 : index.html, about.html 등 |
| CSS |
CSS 파일 요청만 확인 예시 : main.css, style.css 등 |
| JS |
Javascript 파일 요청만 확인 예시 : app.js, jquery.js 등 |
| Font |
웹 폰트 요청만 확인 예시 : woff, ttf, eot 등 |
| Img |
이미지 파일 요청만 확인 예시 : jpg, png, gif, svg |
| Media |
동영상, 오디오 파일 요청만 확인 예시 : mp4, mp3, wav 등 |
| Manifest |
웹 앱 매니패스트 요청만 확인 예시 : manifest.json 파일 |
| Socket | 웹소켓 통신만 확인 |
| Wasm | WebAssembly 모듈 요청만 확인 |
| Other |
그 외 기타 파일만 확인 예시 : PDF 등 |
상단 우측 필터링 기능을 이용하면, 현재 확인하려는 파일 종류만 필터링해서 볼 수 있습니다.
네트워크 정적 리소스 정보 분석
| Headers | 해당 파일에 대한 HTTP 요청 정보, 요청 헤더, 응답 헤더 값을 확인할 수 있습니다. |
| Preview | 이미지 등 리소스의 모습을 미리보기 할 수 있습니다. |
| Response |
서버 응답 데이터 전체를 확인할 수 있습니다. HTML, Javascript 파일 내용을 볼 수 있어 유용합니다. |
| Initiator | 해당 파일의 URL 요청 순서가 나옵니다. |
| Timing | 서버 응답 대기 시간, 콘텐츠 다운로드 소요 시간 등을 확인할 수 있습니다. |
| Cookies | 요청 쿠키, 응답 쿠키 키-값을 확인할 수 있습니다. |
네트워크 요청 순서대로 정렬된 정적 리소스 파일 이름을 선택하면 볼 수 있는 정보입니다.
새로고침 시 브라우저 캐시 비활성화 설정
F12 > Network 탭 > 상단 Disable cache 체크 > 새로고침
캐시 비활성화 설정 후 새로고침 시, 신규 방문자 기준 네트워크 리소스 로딩 시간을 확인할 수 있습니다.
해당 설정은 F12 개발자도구가 열린 상태에서만 유효합니다.
느린 네트워크 환경 재현
F12 > Network 탭 > 상단 Disable cache 우측 No throtting 클릭 > 3G 등 네트워크 조절 프로필 선택 > 새로고침
모바일 사용자, 해외 사용자의 느린 네트워크 환경으로 조작하여 테스트 가능합니다.
Offline 네트워크 조절 프로필을 선택하면 네트워크가 끊긴 상황도 재현할 수 있습니다.
크롬 네트워크 조절 프로필 생성 방법
F12 > Network 탭 > 상단 Disable cache 우측 No throtting 클릭 > Add… 선택 > Add profile > 아래 항목들 참고하여 입력 > Add
| Profile Name | 커스텀 네트워크 조절 프로필 이름 |
| Download (Mbps) | 서버로부터 데이터 다운로드 받는 속도 제한 |
| Upload (Mbps) | 서버에 데이터 업로드 하는 속도 제한 |
| Latency (ms) | 요청-응답 간 지연 시간 |
| Packet loss (%) |
네트워크 전송 중 손실되는 패킷 비율 예) 10% : 패킷 10개 중 1개가 사라짐 |
| Packet queue length (개수) |
전송 지연 전 버퍼에 쌓을 수 있는 최대 패킷 수 너무 크면 응답 지연이 심해집니다. |
| Packet reordering (%) |
패킷 순서가 뒤죽박죽 도착할 확률 스트리밍/실시간 통신에 영향이 큽니다. 예) 20% : 패킷 5개 중 1개가 순서가 바뀜 |
네트워크 요청 지연 시간, 패킷 손실율 등을 지정한 네트워크 조절 프로필을 생성할 수 있습니다.
새 창 팝업이 열릴 때 F12 열기 설정
F12 우측 상단 설정 아이콘 > Preferances 메뉴 > 우측 하단 Global > Auto-open DevTools for popups 체크
새 창으로 팝업이 열릴 때, F12 Network 탭이 열려서 어떤 URL 파라미터로 들어왔는지 분석할 수 있습니다.
부모 창에서 F12를 열고 있어야 팝업 창에도 F12가 자동으로 열립니다.
팝업 Request URL 확인 방법
Network 탭 > 첫 번째 네트워크 요청 클릭 > Headers 탭 > General > Request URL에서 현재 팝업이 열릴 때 들어온 URL 전체를 확인할 수 있습니다.
특히 Vue, React 팝업에서 URL을 라우팅 했을 경우, 초기 요청 URL 및 파라미터를 확인할 수 있어 디버깅 및 소스 분석에 유용합니다.
Performance 탭 사용법
웹 페이지 성능을 측정하고 병목 구간을 시각적으로 파악하여 최적화할 수 있습니다.
CPU 사용량, 네트워크 요청 및 리소스 로딩 타임라인, 메모리 사용량, Javascript 호출 스택 등을 제공합니다.
설치된 확장 프로그램들이 노이즈를 유발할 수 있으므로, 시크릿 모드에서 측정하는 것이 좋습니다.
CPU 및 네트워크 성능 지연 설정
F12 > Performance 탭 > 우측 설정 아이콘 > CPU: 4x slowdown, Network: 3G 등 선택
성능 측정 시, 실제 테스트하는 PC보다 느린 CPU 및 네트워크 환경을 시뮬레이션 할 수 있습니다.
웹 페이지 로딩 속도 성능 측정
F12 > Performance 탭 > 좌측 상단 새로고침 아이콘 클릭
상호작용 및 애니메이션 성능 측정
F12 > Performance 탭 > 좌측 상단 녹화 아이콘 클릭 > 사용자 동작 수행 > Stop
클릭, 스크롤, 애니메이션 등 인터랙션 구간의 프레임 드롭, 렌더링 병목을 파악할 수 있습니다.
Lighthouse 탭 사용법
웹 페이지 성능 검사
F12 > Lighthouse 탭 > Mode, Device, Categories 선택 > Analyze page load
현재 웹 페이지의 로딩 성능, 사용자 접근성, 최신 웹 표준 준수 여부, 검색엔진 최적화 등을 분석합니다.
분석에 참고한 문서, 문제가 발생한 항목에 대한 설명, 개선 방법 등을 제공받을 수 있습니다.
웹 성능 검사 결과 PDF 저장 방법
검사 결과 페이지 우측 점 3개 > Print Expanded > 대상 : PDF로 저장 > 저장