HTML 요소의 rel 속성 값: preconnect, preload, prefetch

답변 확인

• HTML의 <link> 요소에서 rel 속성은 브라우저가 리소스를 어떻게 다룰지를 결정하는 중요한 역할을 함
• 특히, 웹 성능 최적화를 위해 사용되는 preconnect, preload, prefetch 속성은 리소스 로딩을 더 빠르게 할 수 있도록 도와줌

1. ✅ preconnect (네트워크 연결 미리 설정)

• 브라우저가 특정 origin과의 네트워크 연결을 미리 설정하도록 지시
• DNS 조회, TCP 핸드셰이크, TLS 연결을 미리 수행하여 리소스 로딩 속도를 향상
• 외부 API, CDN, 웹 폰트 등의 요청 대기 시간을 줄이는 데 유용

사용 예시:

<link rel="preconnect" href="https://fonts.googleapis.com" />

주요 특징

• 리소스를 직접 다운로드하지 않고 연결만 미리 설정
• 사용자가 자주 접근하는 외부 도메인에 대해 적용하는 것이 효과적

2. ✅ preload (필수 리소스를 우선 로드)

• 브라우저가 현재 페이지에서 즉시 필요한 리소스를 미리 다운로드하도록 지시
• CSS, 웹 폰트, JavaScript, 이미지 등을 먼저 로드하여 렌더링 속도를 개선

사용 예시:

<link
  rel="preload"
  href="/fonts/myfont.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous"
/>

주요 특징

• 렌더링에 필수적인 리소스를 우선 로드하여 FOUT(글꼴 깜빡임) 등의 문제 해결
• as 속성을 사용하여 리소스 유형을 지정해야 함 (as="font", as="script" 등)
• 불필요한 리소스를 preload하면 오히려 성능 저하 발생 가능

3. ✅ prefetch (향후 사용될 리소스 미리 가져오기)

• 향후 필요할 가능성이 높은 리소스를 미리 가져오도록 지시
• 현재 페이지에서 즉시 사용되지 않지만 다음 페이지에서 사용할 가능성이 높은 리소스를 미리 다운로드

사용 예시:

<link rel="prefetch" href="/next-page-image.jpg" />

주요 특징

• 우선순위가 낮아 백그라운드에서 리소스를 로드함
• SPA(싱글 페이지 애플리케이션)에서 다음 페이지를 빠르게 로드하는 데 유용
• 과도하게 사용하면 불필요한 리소스 로딩으로 네트워크 낭비 가능

🔹 결론

• ✅ 빠른 네트워크 연결이 필요하면 preconnect 사용
• ✅ 초기 로딩 속도를 높이려면 preload 사용
• ✅ 미래에 사용할 리소스를 미리 다운로드하려면 prefetch 사용
• 📌 적절한 미리 로딩 전략을 사용하면 페이지 로딩 속도를 개선하고 UX를 향상시킬 수 있음! 🚀

📚 참고 자료

• [web.dev] 리소스 힌트로 브라우저 지원
• [JsCafe] Preload Prefetch Preconnect | Network Optimization | System Design for frontend engineers