HAR 파일 워터폴 분석기

HAR(HTTP 아카이브) 파일은 페이지 로드 중에 브라우저의 DevTools 네트워크 패널이 기록한 모든 것(모든 요청 및 응답 헤더, 각 응답 본문의 정확한 크기 및 MIME 유형, 요청별 타이밍 분석)을 JSON으로 내보낸 것입니다. DevTools를 열고 네트워크 탭에서 페이지를 다시 로드한 다음 요청 목록을 마우스 오른쪽 버튼으로 클릭하고 "콘텐츠와 함께 모두 HAR로 저장"을 선택하여 Chrome, Firefox, Edge 또는 Safari에서 요청을 생성할 수 있습니다. 이 도구는 내보낸 파일을 직접 읽습니다. 아무 것도 다시 가져오거나 다시 요청하지 않습니다.

폭포형 차트는 완전히 파일 내부의 데이터로 구성됩니다. 각 항목의 자체 타이밍 개체는 요청을 차단, DNS 조회, 연결, SSL/TLS 협상, 전송, 대기(첫 번째 바이트까지의 시간) 및 수신 단계로 나누고 각 단계는 자체 색상 세그먼트로 그려집니다. HAR 사양에 따라 SSL 시간도 연결 내부에 포함되므로 먼저 다시 빼냅니다. 그렇지 않으면 TLS 부분이 두 번 계산되고 막대 너비가 더 이상 요청의 실제 기간에 합산되지 않습니다. 점선 수직 마커는 DOMContentLoaded 및 Load를 표시하고 파일 자체 페이지 타이밍에서 바로 읽혀지므로 페이지가 대화형이 되기 전에 완료된 요청을 정확히 확인할 수 있습니다.

차트 외에도 이 도구는 HAR 형식이 이미 기록한 필드에 대해 세 가지 찾기 규칙을 실행합니다. Cache-Control이나 Expires 헤더를 포함하지 않는 캐시 가능한 응답(상태 200, 203 또는 206)에 플래그를 지정합니다. 즉, 반복 방문 시 해당 응답을 처음부터 다시 다운로드해야 합니다. HTML, CSS, JavaScript, JSON, SVG 등 콘텐츠 인코딩 없이 제공되는 1KB보다 큰 텍스트 응답에 플래그를 지정합니다. 이는 대부분의 서버가 하나의 구성 라인으로 쉽게 활성화할 수 있는 압축 기회입니다. 그리고 렌더링 차단 자산의 전형적인 서명인 페이지 자체 DOMContentLoaded 오프셋 이전에 시작된 CSS 또는 JavaScript 요청에 플래그를 지정합니다.

이 모든 것은 업로드한 파일에 이미 있는 데이터에서 실행됩니다. 네트워크 액세스도 없고, 외부 조회 서비스도 없으며, 원본 페이지를 다시 가져올 수도 없습니다. HAR 파일은 브라우저 탭에서 완전히 읽고, 구문 분석하고, 렌더링되며 어디에도 업로드되지 않습니다.