AI 요약관련 정보

• 웹 페이지 로딩 방식은 브라우저마다 크게 달라 예측 불가능한 성능 차이를 유발합니다. 🎭
• HTTP/1.x는 한 번에 하나의 리소스만 처리 가능하여, 브라우저가 중요한 리소스를 먼저 요청하는 영리한 우선순위 지정이 필수적이었습니다. ⏳
• HTTP/2 및 HTTP/3는 단일 연결에서 여러 리소스를 병렬로 요청할 수 있지만, 서버의 대역폭 및 혼잡 제어로 인해 여전히 우선순위가 중요합니다. 🚦
• 브라우저는 각 리소스에 중요도(우선순위)를 할당하여 서버에 전달하며, 렌더링 차단 CSS/JS는 높은 우선순위를, 지연 스크립트나 이미지는 낮은 우선순위를 가집니다. 🎯
• 하지만 많은 서버가 브라우저가 보낸 우선순위 신호를 무시하여, 중요하지 않은 파일이 먼저 전송되어 페이지 로딩이 지연되는 문제가 발생합니다. 🙉
• 이러한 서버의 비협조적인 동작에 대응하기 위해 일부 브라우저(예: Chrome)는 '2단계 로딩'이라는 완화 전략을 채택했습니다. 🛡️
• 2단계 로딩은 초기에는 가장 중요한 리소스만 요청하고, 나머지 리소스는 나중에 로딩하여 서버가 문제를 일으킬 수 있는 범위를 줄이는 방식입니다. ⚙️
• 브라우저마다 2단계 로딩 구현 방식이 표준화되지 않아, 각기 다른 동작 방식과 성능 결과를 초래합니다. 🤯
• 이러한 복잡한 브라우저 로딩 메커니즘에 대한 공식 문서나 명확한 설명은 매우 부족하여 개발자들이 이해하기 어렵습니다. 📜
• Chrome의 '타이트 모드'는 렌더링 차단 스크립트가 실행될 때까지 낮은 우선순위 리소스(예: 이미지)의 로딩을 적극적으로 지연시킵니다. ⏱️
• 최근 Chrome은 LCP(Largest Contentful Paint) 최적화를 위해 페이지의 첫 5개 이미지에 '중간' 우선순위를 부여하는 등 우선순위 전략을 변경했습니다. 🚀