웹 페이지 로딩 성능을 극대화하기 위해 `fetchpriority`, `preload`, `preconnect`, `prefetch`와 같은 리소스 힌트(Resource Hints)를 어떻게 전략적으로 활용할 수 있을까요? 각 힌트의 동작 원리와 브라우저의 리소스 로딩 우선순위 결정 로직에 미치는 영향을 비교 설명하고, 실제 프로젝트에서 발생할 수 있는 오용 사례와 그로 인한 성능 저하 시나리오를 제시해주세요.

네, 웹 페이지 로딩 성능을 극대화하기 위한 리소스 힌트 활용 전략에 대해 설명드리겠습니다.

fetchpriority는 이미지나 스크립트 등 리소스의 상대적인 중요도를 브라우저에 알려줍니다. high로 설정하면 즉시 로딩을 시도하고, low는 우선순위를 낮춰 백그라운드 로딩에 적합합니다.

preload는 현재 페이지에 필수적인 리소스를 미리 다운로드하여 렌더링 차단을 최소화합니다. 브라우저는 파싱 과정에서 해당 리소스를 발견하기 전에 미리 요청을 보내므로, Critical Path를 최적화할 수 있습니다.

preconnect는 특정 도메인과의 연결을 미리 설정하여 DNS lookup, TCP handshake, TLS 협상 시간을 단축합니다. 외부 API 서버나 CDN과 같이 자주 사용하는 도메인에 적용하면 효과적입니다.

prefetch는 현재 페이지가 아닌, 다음 페이지에서 필요할 것으로 예상되는 리소스를 미리 다운로드합니다. 사용자가 해당 페이지로 이동할 때 즉시 로딩된 리소스를 활용할 수 있어 사용자 경험을 향상시킵니다.

오용 사례로는, 모든 이미지를 fetchpriority="high"로 설정하는 경우를 들 수 있습니다. 이는 네트워크 병목 현상을 유발하고, 실제로 중요한 리소스의 로딩을 지연시켜 성능 저하를 초래할 수 있습니다. 또한, 필요하지 않은 리소스를 prefetch하는 경우, 불필요한 네트워크 대역폭을 낭비하고 사용자 데이터를 소모할 수 있습니다. 각 힌트의 목적에 맞게 신중하게 사용하는 것이 중요합니다.