Resource Hint 최적화를 통한 LCP 개선 및 네트워크 낭비 제거

Preload vs Prefetch vs Preconnect: When to Use Each Resource Hint

Ashish Kumar2026년 5월 14일9분intermediate

AI 요약

Context

브라우저 Preloader가 CSS 내 폰트나 동적 리소스를 늦게 발견하여 발생하는 Critical Path 지연 문제 분석. 잘못된 Resource Hint 사용 시 렌더링 차단 리소스와 경쟁하여 오히려 First Paint를 늦추는 성능 저하 발생.

Preload 도입을 통한 LCP 이미지 및 폰트의 우선순위 상향 조정 및 조기 fetch 유도
Prefetch 적용으로 Idle Time을 활용한 다음 페이지 자산의 저우선순위 캐싱 처리
Preconnect 설정을 통한 DNS Lookup, TCP Handshake, TLS Negotiation 단계의 사전 처리
리소스 유형별 as 속성 명시를 통한 브라우저의 정확한 Priority 및 Caching Policy 적용
Preconnect $\rightarrow$ Preload $\rightarrow$ Actual Tags $\rightarrow$ Prefetch $\rightarrow$ DNS-prefetch 순의 전략적 배치로 네트워크 워크로드 최적화

실천 포인트

1. LCP 이미지나 CSS 참조 폰트가 렌더링 지연을 유발하는지 확인 후 Preload 적용

2. 사용자 전환율 70% 이상의 예측 가능한 경로에 대해서만 Prefetch 적용

3. 외부 도메인 요청 전 Preconnect를 통해 연결 웜업 수행

4. Preload 리소스가 3초 이내에 사용되지 않아 Lighthouse 경고가 발생하는지 검토

태그