브라우저 리소스 로딩: 블랙박스 심층 분석

웹페이지와 하위 리소스 로딩은 매우 복잡한 과정입니다. 브라우저는 렌더링 차단 리소스, 프리로드 스캐너, 리소스 힌트(preload/preconnect), 로딩 수정자(async/defer/module), fetchpriority, 반응형 이미지 등 여러 요소를 고려합니다. 그런 다음 최신 HTTP/2 및 HTTP/3 연결을 최적으로 활용하기 위해 각 리소스를 언제 로드할지 결정합니다. 하지만 브라우저마다 전략이 크게 다르며, 의도적으로 요청을 지연시키는 경우도 있습니다. 이 발표에서는 리소스 로딩의 의사 결정 과정을 심층적으로 살펴보고, LCP 이미지와 같은 중요한 리소스의 우선 순위를 지정하도록 브라우저 동작에 영향을 미치는 방법을 보여줍니다. 다수의 워터폴 차트를 분석하고, 브라우저 간의 차이점을 설명하며, 일반적인 문제에 대한 해결책을 제시합니다(fetchpriority=high로 모든 것을 무작정 프리로드하는 것은 피해야 합니다). 브라우저 내부 동작에 대한 깊이 있는 이해를 얻고, 리소스 로딩 과제에 자신감 있게 대처할 수 있게 될 것입니다.