Core Web Vitals를 위한 Chrome DevTools Network 패널 설정
Core Web Vitals 성능 점검 시 매번 적용하는 Network 패널 설정
Chrome DevTools Network 패널은 Core Web Vitals를 디버깅할 때 가장 유용한 도구 중 하나입니다. 하지만 기본 설정 상태에서는 꼭 필요한 정보의 절반이 가려져 있습니다. 성능 점검 시 매번 적용하는 Network 패널 설정 방법입니다.
최종 검토: Arjen Karel(2026년 3월)
Table of Contents!
Network 패널 설정
Network 패널을 열려면 Chrome DevTools(F12 또는 Ctrl+Shift+I)를 열고 "Network" 탭을 클릭합니다.
네트워크 스로틀링
방문자는 사무실 Wi-Fi 환경에서 접속하지 않습니다. 전 세계적으로 모바일 연결의 30%는 여전히 3G이며, 55%는 4G입니다(GSMA Mobile Economy 2025). 네트워크 스로틀링을 적용해야 방문자가 마주하는 실제 환경을 그대로 확인할 수 있습니다.
Network 패널에서 "No throttling" 드롭다운을 클릭합니다. 모바일 네트워크 환경을 시뮬레이션하려면 "Fast 4G", "Slow 4G", "3G" 중 하나를 선택합니다. 최적의 옵션은 대상 사용자층에 따라 다릅니다. 사용자가 주로 빠른 네트워크 환경에서 고사양 모바일 기기를 사용한다면 "Fast 4G"를 활성화합니다. 일반적인 접속 환경이 이보다 다소 열악하다면 "Slow 4G"를 선택합니다. 애매하다면 안전하게 "3G"를 선택합니다.
개별 요청 스로틀링 (Chrome 145+)
2025년 12월부터 페이지 전체가 아닌 개별 요청 하나만 지정해서 스로틀링할 수 있게 되었습니다. Network 패널에서 원하는 요청을 마우스 오른쪽 버튼으로 클릭하고 "Throttle request"를 선택합니다. 그러면 특정 서드파티 스크립트가 지연될 때 LCP가 어떻게 변하는지, 또는 사용자 회선은 빠른데 CDN 응답이 느릴 때 페이지가 어떻게 반응하는지와 같은 의문을 바로 해결할 수 있습니다. 단일 리소스가 성능에 미치는 영향을 격리해서 파악하는 가장 빠른 방법입니다.
캐시 비활성화
첫 방문자가 겪는 환경을 그대로 재현하여 테스트하려면 Network 패널의 "Disable cache" 체크박스를 선택합니다.
큰 요청 행 활성화
큰 요청 행을 켜면 기본 컴팩트 보기에서 가려진 중요한 세부 정보를 확인할 수 있습니다:
- size 컬럼에는 각 요청의 압축(전송) 크기와 비압축(실제) 크기가 모두 표시됩니다.
- name 컬럼에는 파일명뿐만 아니라 전체 경로가 표시됩니다.
- priority 컬럼에는 초기 및 최종 fetch priority가 표시됩니다. LCP 이미지가 High 우선순위로 로드되는지 확인하거나, Chrome이 리소스 우선순위를 변경하는 시점을 파악할 수 있습니다.
스크린샷 활성화
스크린샷 기능을 켜면 Chrome이 페이지를 로드하는 동안 발생하는 모든 시각적 변화를 필름스트립으로 캡처합니다. 이를 통해 레이아웃 이동을 포착하고, LCP 요소가 예상한 시점에 페인트되는지 검증할 수 있습니다.
- Network 탭을 활성화한 상태에서 Ctrl+F5(Mac은 Cmd+R)를 눌러 페이지를 새로고침합니다.
- Chrome이 페이지 로딩 과정의 스크린샷을 캡처합니다.
- Network 패널 상단의 체크박스 행 아래에 스크린샷 썸네일이 표시됩니다.
스크린샷 개요 영역에는 알아두면 유용한 몇 가지 기능이 있습니다:
- 스크린샷 위에 마우스를 올리면 해당 프레임이 캡처된 시점을 확인할 수 있습니다. Overview 차트에 노란색 세로선으로 표시됩니다.
- 스크린샷 썸네일을 클릭하면 해당 시점 이후에 발생한 요청을 필터링하여 제외할 수 있습니다.
- 썸네일을 더블 클릭하면 확대되어 스크린샷을 더 자세히 볼 수 있습니다.
필수 Network 컬럼 활성화
기본 컬럼만으로는 핵심 데이터를 놓치기 쉽습니다. 컬럼 헤더를 마우스 오른쪽 버튼으로 클릭하면 컬럼을 추가할 수 있습니다. 성능을 점검할 때마다 반드시 활성화하는 컬럼은 다음과 같습니다:
| 컬럼명 | 설명 | Core Web Vitals 관점에서 중요한 이유 |
|---|---|---|
| Name | 요청 이름 | 브라우저가 다운로드하는 모든 리소스를 식별합니다 |
| Status | HTTP 상태 코드 | TTFB 지연을 유발하는 리다이렉트(301, 302)와 네트워크 왕복 시간을 낭비하는 404 리소스를 찾아냅니다 |
| Protocol | 사용된 네트워크 프로토콜 | HTTP/3는 헤드 오브 라인 블로킹(head-of-line blocking)을 제거합니다. Cloudflare Radar에 따르면 전체 요청 중 21%만이 HTTP/3를 사용합니다. CDN이 HTTP/3를 지원하는데도 이 컬럼에 h3가 표시되지 않는다면 DNS 설정을 점검해야 합니다 |
| Domain | 리소스 도메인 | 퍼스트파티와 서드파티 요청을 분리합니다. 2024 Web Almanac에 따르면 전체 페이지의 92%가 하나 이상의 서드파티를 로드합니다. 도메인별로 정렬하면 워터폴에서 직접 통제할 수 없는 부분이 얼마나 되는지 드러납니다 |
| Type | 리소스 유형 | 유형별로 필터링하여 대역폭을 두고 경쟁하는 스크립트, 이미지, 폰트를 격리합니다 |
| Initiator | 요청 발생 원인 | 어떤 스크립트나 스타일시트가 해당 요청을 발생시켰는지 확인합니다. 지연을 유발하는 critical requests 체인의 근본 원인을 추적할 때 필수적입니다 |
| Size | 전송 크기 및 실제 크기 | 압축되지 않았거나 크기가 과도하게 큰 리소스를 찾아냅니다. 모바일 페이지의 중앙값 기준으로 요청 66개, 총 2.3 MB를 로드합니다(2024 Web Almanac) |
| Priority | 리소스 로딩 우선순위 | 초기 및 최종 fetch priority를 표시합니다. LCP 이미지가 High로 로드되고, 중요하지 않은 스크립트는 Low로 로드되는지 검증합니다 |
| Waterfall | 요청의 시각적 타임라인 | 시간이 어디에 소모되는지 보여주는 타임라인입니다. 첫 페인트(first paint) 이전에 긴 막대가 있다면 LCP와 FCP에 직접적인 영향을 줍니다 |
커스텀 응답 헤더 활성화
| 컬럼명 | 설명 | Core Web Vitals 관점에서 중요한 이유 |
|---|---|---|
| Cache-Control | 리소스 캐싱 동작 | 정적 자산의 캐시 유효 기간이 충분히 긴지, HTML에 적절한 재검증(revalidation)이 설정되어 있는지 확인합니다. 캐싱이 부실하면 재방문자가 리소스를 다시 다운로드해야 하므로 모든 지표가 악화됩니다. 참고: Cloudflare 캐싱 설정 |
| Link | Link 응답 헤더 | 서버가 103 Early Hints 등을 통해 preload 또는 preconnect 힌트를 전송하는지 확인합니다 |
| Content-Encoding | 사용된 인코딩 | 서버가 gzip 대신 Brotli(br)를 전송하는지 확인합니다. Brotli는 JavaScript를 gzip 대비 15~20% 더 작게 압축합니다. 2024 Web Almanac에 따르면 JavaScript 리소스에서 Brotli 사용률이 이미 gzip을 추월했습니다(45% 대 41%) |
페이지마다 DevTools를 일일이 열지 않고 응답 헤더를 대량으로 분석하려면 HTTP Header Performance Analyzer를 활용하십시오.
Performance 패널 연계
Network 패널은 무엇이 언제 로드되는지 보여줍니다. 각 리소스가 Core Web Vitals에 어떤 영향을 주는지 확인하려면 Performance 패널로 전환합니다. 이제는 별도 기록 없이도 실시간 LCP, CLS, INP 점수를 표시하며, 실제 사용자 기반의 CrUX field data 오버레이도 지원합니다. 진단은 Network 패널로, 확인은 Performance 패널로 합니다.
단회성 디버깅에 그치지 않고 지속적으로 모니터링하려면 Real User Monitoring 도구를 연동하십시오. 그래야 Network 패널에서 적용한 개선 작업이 실제로 field data를 향상시키는지 시간에 따라 추적할 수 있습니다.
최종 설정
이 설정들을 적용하고 페이지를 새로고침하면 Network 패널이 다음과 같이 구성됩니다. 모든 컬럼이 Core Web Vitals에 영향을 주는 핵심 요소들과 직접 연결되어 있습니다.
