리소스 힌트는 브라우저에게 앞으로 필요할 자원을 미리 알려 준비하게 하는 최적화 도구입니다. 브라우저는 보통 HTML을 파싱하며 필요한 자원을 하나씩 발견하는데, 힌트를 주면 그 발견을 앞당기거나 연결·다운로드를 미리 시작해 체감 로딩 속도를 끌어올립니다. 다만 힌트는 강제가 아니라 제안이고, 남용하면 대역폭을 낭비하니 정말 중요한 자원에만 씁니다.
preconnect와 dns-prefetch
이 둘은 연결 준비를 앞당깁니다. dns-prefetch는 DNS 조회만 미리 해 두고, preconnect는 여기서 더 나아가 TCP 핸드셰이크와 TLS 협상까지 미리 끝내 둡니다. 곧 요청할 것이 확실한 외부 출처(폰트 CDN, 이미지 서버, 분석 도메인)에 대해 이 왕복 비용을 미리 치러 두면, 실제 요청 시점에 곧바로 데이터가 흐릅니다.
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="dns-prefetch" href="https://cdn.example.com">preload와 modulepreload
preload는 현재 페이지에 곧 필요한 자원을 높은 우선순위로 미리 내려받게 합니다. as 속성으로 자원 유형(style, script, font, image 등)을 반드시 알려 줘야 브라우저가 올바른 우선순위와 CORS 모드를 적용합니다(특히 폰트는 crossorigin 필요). CSS 안에 숨어 늦게 발견되는 폰트나, 자바스크립트가 동적으로 부르는 자원처럼 파서가 늦게 찾는 것을 앞당길 때 효과적입니다. modulepreload는 ES 모듈 전용으로, 모듈과 그 의존성 그래프를 미리 받아 파싱까지 준비합니다.
prefetch와 prerender
앞의 것들이 현재 페이지를 위한 것이라면, 이 둘은 다음 탐색(navigation)을 겨냥합니다. prefetch는 사용자가 다음에 갈 법한 페이지의 자원을 낮은 우선순위로 한가할 때 미리 받아 캐시에 넣어 둡니다(예: 페이지네이션의 다음 페이지). prerender(및 현대의 Speculation Rules API)는 한 걸음 더 나아가 다음 페이지를 백그라운드에서 미리 렌더링해, 클릭하면 즉시 표시되게 합니다. 비용이 크므로 예측이 확실할 때만 씁니다.
dns-prefetch: DNS 조회만 미리 — 가장 가벼움.preconnect: DNS + TCP + TLS까지 연결을 미리 — 곧 쓸 외부 출처에.preload: 현재 페이지의 중요 자원을 높은 우선순위로 즉시 다운로드(as필수).modulepreload: ES 모듈과 의존성을 미리 받고 파싱 준비.prefetch: 다음 탐색용 자원을 낮은 우선순위로 미리.prerender: 다음 페이지 자체를 백그라운드에서 미리 렌더.
Link 헤더 vs <link>
리소스 힌트는 HTML의 <link> 태그로도, HTTP Link 응답 헤더로도 선언할 수 있습니다. 헤더 방식의 장점은 브라우저가 HTML 본문을 파싱하기 전에 힌트를 볼 수 있다는 것입니다. CDN이나 서버가 응답 헤더에 실어 주면 더 이른 시점에 연결·다운로드를 시작할 수 있습니다.
HTTP/1.1 200 OK
Content-Type: text/html
Link: <https://cdn.example.com>; rel=preconnect
Link: </app.css>; rel=preload; as=style103 Early Hints
103 Early Hints(RFC 8297)는 리소스 힌트를 최종 응답보다 먼저 보내는 정보성 상태 코드입니다. 서버가 실제 페이지(예: DB 조회가 필요한 200)를 만드는 동안, 그 전에 103으로 Link: rel=preload/preconnect 힌트를 먼저 흘려보냅니다. 클라이언트는 서버가 본 응답을 계산하는 그 '빈 시간'에 미리 자원을 받기 시작해, 최종 200이 도착했을 때는 이미 핵심 자원이 준비되어 있게 됩니다.
HTTP/1.1 103 Early Hints
Link: </app.css>; rel=preload; as=style
Link: </hero.jpg>; rel=preload; as=image
HTTP/1.1 200 OK
Content-Type: text/html
...정리하면 리소스 힌트는 연결(preconnect/dns-prefetch), 현재 페이지 자원(preload/modulepreload), 다음 탐색(prefetch/prerender)의 세 층위로 나뉘고, 전달 통로는 <link> 태그·Link 헤더·103 Early Hints입니다. 우선순위 신호(fetchpriority 등)와 함께 정말 중요한 소수에만 적용하는 절제가 핵심입니다.