브라우저 DevTools의 Network 패널을 통해 어떤 리소스가 언제 로드되는지 식별할 수 있습니다. Network 패널의 각 행은 웹 앱에서 로드한 특정 URL에 해당합니다.
로드 내용 파악
웹 애플리케이션에 적합한 캐싱 전략을 수립하려면 정확히 로드할 내용을 파악해야 합니다. 신뢰할 수 있는 웹 애플리케이션을 구축할 때 네트워크는 모든 종류의 어두운 힘에 영향을 받을 수 있습니다. 앱의 취약점에 대처하려면 네트워크의 취약점을 이해해야 합니다.
웹 애플리케이션이 로드하는 항목을 이미 알고 있다고 생각할 수도 있습니다. 정적 HTML, 자바스크립트, CSS, 이미지 파일을 약간 분산해서 사용하고 있다면 그럴 수도 있겠죠. 그러나 동적 API 요청과 서버 생성 응답을 사용하여 콘텐츠 전송 네트워크에서 호스팅되는 서드 파티 리소스를 혼합하기 시작하면 그 즉시 상황이 모호해집니다.
예를 들어 작은 CSS 파일 몇 개에 적합한 캐싱 전략은 수백 개의 큰 이미지에는 적합하지 않을 수 있습니다.
로드 시간 파악
전체 로드 상황의 또 다른 부분은 모든 항목이 로드되는 시점입니다.
초기 HTML의 탐색 요청과 같은 일부 네트워크 요청은 사용자가 지정된 URL을 방문하는 즉시 무조건 전송됩니다. 이 HTML에는 대화형 페이지를 표시하기 위해 로드해야 하는 중요한 CSS 또는 JavaScript 파일에 대한 하드코딩된 참조가 포함되어 있을 수 있습니다. 이러한 요청은 모두 중요한 로드 경로에 있습니다. 안정적으로 빠르게 캐시하려면 적극적으로 캐시해야 합니다.
API 요청 또는 지연 로드 애셋과 같은 다른 리소스는 모든 초기 로드가 완료된 후 로드가 시작되지 않을 수 있습니다. 이러한 요청이 특정 시퀀스의 사용자 상호작용 이후에만 발생한다면 완전히 다른 리소스 집합이 동일한 페이지를 여러 번 방문할 때 요청될 수 있습니다. 중요한 로드 경로 외부에 있는 것으로 식별된 콘텐츠에는 덜 공격적인 캐싱 전략이 적합한 경우가 많습니다.
이름 및 유형 열은 무엇을
이름 및 유형 열은 로드 중인 항목을 의미 있는 정보를 제공하는 데 도움이 됩니다. 위 예에서 '로드하는 대상이 무엇인가요?'에 대한 답변은 총 4개의 URL로, 각 URL은 고유한 콘텐츠 유형을 나타냅니다.
이름은 브라우저에서 요청한 URL을 나타내지만 URL 경로의 마지막 부분만 표시됩니다. 예를 들어 https://example.com/main.css가 로드되면 Name 아래에 main.css만 표시됩니다.
마침표 뒤에 오는 URL 경로의 마지막 몇 글자 (예: 'css')를 URL 확장자라고 합니다.
URL의 확장자는 일반적으로 요청 중인 리소스 유형을 알려주며 유형 열에 표시된 정보에 직접 매핑됩니다. 예를 들어 v2.html는 문서이고 main.css는 스타일시트입니다.
Waterfall 열은 다음과 같은 경우에 유용합니다.
위에서부터 아래로 내려가면서 폭포식 구조 열을 살펴봅니다. 각 막대의 길이는 각 리소스를 로드하는 데 소요된 총 시간을 나타냅니다. 중요한 로드 경로의 일부로 실행된 요청과 페이지의 초기 로드가 완료된 후 동적으로 실행되는 요청의 차이를 어떻게 구분할 수 있을까요?
폭포식 구조의 첫 번째 요청은 항상 HTML 문서에 대한 요청입니다(예: v2.html). 이후의 모든 요청은 HTML 문서에서 참조하는 이미지, 스크립트, 스타일을 기반으로 이 초기 탐색 요청에서 폭포식 구조처럼 흘러갑니다.
폭포식 구조에서는 v2.html의 로드가 완료되는 즉시 참조되는 애셋 (하위 리소스라고도 함)에 대한 요청이 시작됨을 보여줍니다. 브라우저는 여러 하위 리소스를 동시에 요청할 수 있으며, 이는 main.css 및 logo.svg의 Waterfall 열에 겹치는 막대로 표시됩니다. 마지막으로 스크린샷에서 main.js가 마지막으로 로드되기 시작하고 다른 세 URL도 완료되면 로드가 완료되는 것을 확인할 수 있습니다.