브라우저에 미리 알려주기: preload·preconnect·103 Early Hints로 로딩 앞당기기
🤖 AI Summary
페이지 로딩은 브라우저가 HTML을 파싱하며 필요한 자원을 하나씩 발견하는 과정입니다. 필요한 것을 미리 알려주면 그만큼 앞당길 수 있죠. 이것이 리소스 힌트예요. MDN 기준 preconnect는 오리진에 DNS·TCP·TLS 핸드셰이크를 미리 수행하고, dns-prefetch는 그중 DNS 확인만 처리합니다. preload는 현재 페이지의 우선순위 높은 자원을 head에서 일찍 내려받게 하고, prefetch는 다음 내비게이션에 쓸 자원을 미리 받아 캐시해요. 한 걸음 더 나아가 103 Early Hints는 서버가 최종 응답을 준비하는 동안 preload 링크를 Link 헤더로 먼저 보내, 브라우저가 그사이 자원을 받기 시작하게 합니다(RFC 8297). 근거는 MDN, RFC 8297, 스피디 CDN 백서입니다.
블로그 목차
브라우저를 기다리게 하지 않는 법: 리소스 힌트란
웹 페이지가 열리는 과정을 들여다보면, 브라우저는 HTML을 위에서 아래로 읽어 내려가며 필요한 자원을 그때그때 발견합니다. 스타일시트를 만나면 그제야 받으러 가고, 외부 폰트나 이미지도 코드에서 마주쳐야 요청을 시작하죠. 발견이 늦어지면 그만큼 화면이 완성되는 시점도 밀립니다.
리소스 힌트는 이 순서를 앞당기는 방법입니다. 브라우저에게 "이건 곧 필요하다"고 미리 귀띔하는 link 선언이에요. 무엇을 미리 준비하라고 알려주느냐에 따라 종류가 나뉩니다. 연결을 미리 여는 preconnect와 dns-prefetch, 자원을 미리 받는 preload와 prefetch가 대표적이고, 상태 코드 차원에서 힌트를 보내는 103 Early Hints도 있습니다. 하나씩 살펴보죠.
연결을 미리: preconnect와 dns-prefetch
외부 오리진에서 자원을 받으려면 먼저 연결부터 맺어야 합니다. DNS로 주소를 찾고, TCP로 연결하고, HTTPS면 TLS 핸드셰이크까지 거치죠. 이 과정을 자원이 필요한 순간에 시작하면 그만큼 지연이 쌓입니다. preconnect는 이 연결을 앞당겨요. MDN은 preconnect가 곧 필요할 오리진에 "연결 핸드셰이크(DNS, TCP, TLS)의 일부나 전부를 미리 수행"한다고 설명합니다.
dns-prefetch는 그보다 가벼운 힌트입니다. MDN 설명대로 "preconnect와 동일하지만 DNS 부분만" 미리 처리해요. 주소 확인만 앞당기는 셈이죠. 스피디 CDN 백서도 preconnect를 두고 CDN과 중요 리소스 오리진의 연결을 미리 수립해 DNS·TCP·TLS 핸드셰이크 시간을 절감한다고 정리합니다. 확실히 쓸 오리진이라면 preconnect로 연결까지, 쓸지 불확실하면 dns-prefetch로 가볍게 주소만 당겨 두는 식으로 나눠 쓰면 됩니다.
자원을 미리: preload와 prefetch
연결을 넘어 자원 자체를 미리 받는 힌트가 preload와 prefetch입니다. 둘은 겨냥하는 시점이 다릅니다. preload는 지금 이 페이지가 주인공이에요. MDN은 preload가 현재 페이지에서 우선순위가 높은 자원을 head의 link 요소로 선언해, 브라우저의 주 렌더링이 시작되기 전에 일찍 내려받도록 예약한다고 설명합니다. 이름에 load가 들어가지만 스크립트를 실행하지는 않고, 높은 우선순위로 다운로드해 캐시만 해 둔다는 점이 특징이죠. 쓸 때는 자원 경로를 href에, 자원 유형을 as에 함께 적어야 합니다.
prefetch는 다음 페이지를 겨냥합니다. MDN 기준 사용자가 이어서 이동할 만한 자원을 미리 가져와 캐시해 두는 힌트로, 같은 사이트의 내비게이션이나 그 하위 자원에 씁니다. 지금 화면에 급한 것은 preload, 다음 이동을 매끄럽게 하려는 것은 prefetch로 나뉘는 셈이에요. 이미지의 로딩 우선순위를 다루는 방법은 이미지 최적화 글에서 더 짚었습니다.
응답보다 먼저: 103 Early Hints
지금까지가 HTML 안에 적는 힌트였다면, 103 Early Hints는 서버가 응답 단계에서 보내는 힌트입니다. 서버가 페이지를 만들려면 데이터베이스 조회 같은 준비 시간이 필요할 때가 있는데, 그동안 브라우저는 아무것도 못 하고 기다리죠. 103은 이 빈 시간을 활용합니다. RFC 8297은 103을 두고 "서버가 최종 응답을 특정 헤더 필드와 함께 보낼 가능성이 높다는 것을 클라이언트에 알리는" 정보성(informational) 상태 코드라고 정의해요.
구체적으로는 Link 헤더에 preload 링크를 담아 먼저 보냅니다. 브라우저는 최종 응답을 기다리는 동안 그 힌트를 보고 CSS나 JS를 미리 받기 시작할 수 있어요. 스피디 CDN 백서도 HTTP/2 서버 푸시 대신 preload와 Fetch Priority, 103 Early Hints 같은 최신 방식으로 핵심 리소스를 우선 전달한다고 정리합니다. 103은 informational 코드라 최종 응답을 대체하지 않고, 그 앞에 힌트만 얹어 주는 역할이라는 점을 기억하면 됩니다.
이것만 기억하세요
리소스 힌트는 브라우저에게 곧 필요할 자원을 미리 알려주는 방법입니다. 연결을 미리 여는 preconnect(DNS·TCP·TLS)와 dns-prefetch(DNS만), 자원을 미리 받는 preload(현재 페이지, href·as 필수)와 prefetch(다음 내비게이션)로 나뉘죠. 서버 쪽에서는 103 Early Hints가 최종 응답 전에 preload 링크를 Link 헤더로 먼저 보내, 대기 시간을 로딩에 활용합니다(RFC 8297).
자주 묻는 질문 (FAQ)
Q. 리소스 힌트란 무엇인가요?
브라우저에게 곧 필요할 자원을 미리 알려주는 link 선언입니다. 그러면 브라우저가 HTML을 다 파싱하기 전에 연결을 열거나 자원을 미리 받아 둘 수 있습니다. MDN 기준 preconnect, dns-prefetch, preload, prefetch가 대표적이며, 상태 코드 쪽에는 103 Early Hints가 있습니다.
Q. preconnect와 dns-prefetch는 어떻게 다른가요?
연결을 어디까지 미리 하느냐가 다릅니다. MDN 기준 preconnect는 오리진에 DNS, TCP, TLS 핸드셰이크의 일부나 전부를 미리 수행하고, dns-prefetch는 그중 DNS 확인만 미리 처리하는 더 가벼운 힌트입니다.
Q. preload와 prefetch는 어떻게 다른가요?
대상 시점이 다릅니다. MDN 기준 preload는 현재 페이지에서 우선순위가 높은 자원을 head에서 일찍 내려받게 합니다. prefetch는 사용자가 다음에 이동할 페이지에 쓸 자원을 미리 가져와 캐시하는 것으로, 같은 사이트 내비게이션이나 그 하위 자원에 쓰입니다.
Q. 103 Early Hints란 무엇인가요?
서버가 최종 응답을 준비하는 동안 미리 보내는 정보성(informational) 상태 코드입니다. RFC 8297 기준 103은 서버가 최종 응답을 특정 헤더와 함께 보낼 가능성이 높다는 것을 클라이언트에 알립니다. Link 헤더에 preload 링크를 담아, 브라우저가 그사이 자원을 미리 받기 시작하게 합니다.
Q. preload를 쓸 때 주의할 점은 무엇인가요?
href와 함께 as를 반드시 지정해야 합니다. MDN 기준 preload는 자원 경로를 href에, 자원 유형을 as에 적습니다. 또 이름에 load가 들어가지만 스크립트를 실행하지는 않고, 높은 우선순위로 내려받아 캐시만 해 둔다는 점도 알아 두면 좋습니다.
