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 열은 초기 및 최종 가져오기 우선순위를 표시합니다. 이를 통해 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는 HOL 블로킹(head-of-line blocking)을 제거합니다. Cloudflare Radar에 따르면 전체 요청의 21%만이 HTTP/3를 사용합니다. CDN이 지원하는데도 이 열에 h3이 표시되지 않는다면 DNS 구성을 확인하세요. |
| Domain | 리소스 도메인 | 퍼스트파티와 서드파티 요청을 분리합니다. 2024 Web Almanac에 따르면 92%의 페이지가 하나 이상의 서드파티를 로드합니다. 도메인별로 정렬하면 워터폴에서 여러분이 제어할 수 없는 부분이 얼마나 되는지 파악할 수 있습니다. |
| Type | 리소스 유형 | 유형별로 필터링하여 대역폭을 두고 경쟁하는 스크립트, 이미지 또는 폰트를 분리합니다. |
| Initiator | 요청 트리거 | 어떤 스크립트나 스타일시트가 각 요청을 트리거했는지 확인합니다. 이를 통해 느린 중요 요청 체인을 소스까지 추적할 수 있습니다. |
| Size | 전송 및 실제 크기 | 압축되지 않았거나 크기가 너무 큰 리소스를 파악합니다. 일반적인 모바일 페이지는 총 2.3MB에 달하는 66개의 요청을 로드합니다(2024 Web Almanac). |
| Priority | 리소스 로딩 우선순위 | 초기 및 최종 가져오기 우선순위를 표시합니다. LCP 이미지가 High로 로드되고 중요하지 않은 스크립트가 Low로 로드되는지 확인합니다. |
| Waterfall | 요청의 시각적 타임라인 | 시간이 어디에 소비되는지 보여주는 타임라인입니다. 첫 페인트 이전의 긴 막대는 LCP 및 FCP에 직접적인 영향을 미칩니다. |
사용자 지정 응답 헤더 활성화
| 열 이름 | 설명 | Core Web Vitals에 중요한 이유 |
|---|---|---|
| Cache-Control | 리소스 캐싱 동작 | 정적 애셋에 긴 캐시 수명이 있고 HTML이 적절한 재검증을 수행하는지 확인합니다. 잘못된 캐싱은 재방문자가 리소스를 다시 다운로드하도록 강제하여 모든 지표에 악영향을 미칩니다. 참조: 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 필드 데이터를 오버레이할 수 있습니다. 진단할 때는 Network 패널을 사용하고 확인할 때는 Performance 패널을 사용하세요.
단일 디버깅 세션을 넘어 지속적인 모니터링을 수행하려면, Network 패널에서의 수정이 실제로 필드 데이터를 시간이 지남에 따라 개선하는지 추적할 수 있도록 Real User Monitoring 도구를 연결하세요.
전체 설정
이 설정으로 페이지를 새로 고치면 Network 패널이 다음과 같이 보입니다. 모든 열은 Core Web Vitals에 영향을 미치는 요소와 연결됩니다.
