link 태그의 rel로 브라우저에게 "이건 미리 받아 둬", "이 서버와는 미리 연결해 둬"라고 알려 주는 기법. 브라우저가 HTML을 끝까지 읽기 전에 중요한 일을 앞당겨 시작하게 한다.
| 힌트 | 하는 일 | 대상 | 우선순위 |
|---|---|---|---|
preload | 지금 페이지에 곧 필요한 파일을 즉시 받음 | 폰트, 핵심 CSS, 히어로 이미지 | 높음 |
prefetch | 다음 페이지에 필요할 수도 있는 파일을 한가할 때 받음 | 다음 라우트 JS·데이터 | 가장 낮음 |
preconnect | DNS(Domain Name System) 조회 + TCP(Transmission Control Protocol) 연결 + TLS(Transport Layer Security) 협상까지 미리 | 확실히 쓸 외부 도메인(CDN = Content Delivery Network, 폰트) | - |
dns-prefetch | DNS 조회만 미리 | 쓸 수도 있는 외부 도메인 | - |
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/hero.jpg" as="image" />
<link rel="preconnect" href="https://cdn.example.com" />
<link rel="prefetch" href="/about" />dns-prefetch는 DNS 조회만, preconnect는 그 뒤 연결까지 준비한다는 차이다.
자주 하는 실수
- 히어로 이미지에
prefetch를 걸고 LCP(Largest Contentful Paint) 개선을 기대한다. prefetch는 미래용이라 현재 페이지에는 거의 도움이 안 된다. 현재 페이지라면preload다 → Core Web Vitals preload를 남발한다. 모두 높은 우선순위로 받으니 정작 중요한 리소스와 경쟁한다. 진짜 핵심 몇 개만 건다preconnect를 많이 건다. 연결은 비용이 있고 오래 안 쓰면 끊긴다. 확실히 쓸 몇 개 도메인만 건다- 폰트 preload에
crossorigin을 빠뜨린다. 폰트는 CORS(Cross-Origin Resource Sharing) 모드로 요청되므로 속성이 없으면 두 번 받는다
프레임워크에서
- Next.js
Link는 화면에 보이는 링크의 다음 라우트(JS 청크, RSC 페이로드(React Server Components Payload))를 자동으로 prefetch한다.prefetch={false}로 끌 수 있다 - Next.js
Image의 우선 로드 옵션(버전에 따라priority또는preload)은rel="preload"링크를 만든다 → Next.js 16 변경점 - 코드를 쪼개 놓아야 다음 라우트만 골라 prefetch할 수 있다 → 코드 스플리팅과 동적 임포트
출처: web.dev — Preload critical assets · MDN — rel=preconnect · MDN — rel=prefetch