Early Hints

1xx · 정보 (Informational)

개요

103 Early Hints는 서버가 최종 응답을 준비하는 동안 미리 Link 헤더를 보내, 브라우저가 CSS·폰트·스크립트 같은 자원을 먼저 프리로드하도록 돕는 임시 응답입니다. 서버 처리 시간과 자원 로딩을 겹치게 만들어 체감 성능(LCP 등)을 개선합니다.

본문이 없고 최종 응답(대개 200)이 뒤이어 오며, 그 안에는 보통 동일한 Link 헤더가 다시 포함됩니다.

언제 발생하나

백엔드가 데이터베이스 조회나 렌더링으로 최종 HTML 생성에 시간이 걸릴 때, 그 사이에 결정적 자원(critical resource)을 미리 알려 주기 위해 사용합니다.
Cloudflare, Fastly 같은 CDN이나 최신 Node/Express가 이 기능을 지원해 원본 서버가 힌트를 흘려보낼 수 있습니다.

요청 / 응답 예시

요청

GET /article HTTP/1.1
Host: example.com

응답

HTTP/1.1 103 Early Hints
Link: </styles/main.css>; rel=preload; as=style
Link: </fonts/inter.woff2>; rel=preload; as=font; crossorigin

HTTP/1.1 200 OK
Content-Type: text/html
Link: </styles/main.css>; rel=preload; as=style

<!doctype html>...

코드로 보기

app.get('/article', (req, res) => {
  res.writeEarlyHints({
    link: ['</styles/main.css>; rel=preload; as=style']
  });
  renderArticle().then(html => res.send(html));
});

HTTP/1.1 103 Early Hints
Link: </app.js>; rel=preload; as=script

HTTP/1.1 200 OK

실무 참고

Chrome 등 최신 브라우저는 103을 지원하지만, 지원하지 않는 클라이언트는 이를 조용히 무시하므로 하위 호환성이 안전합니다.
효과를 보려면 진짜 렌더링을 막는 결정적 자원만 힌트에 담아야 하며, 과도한 preload는 오히려 대역폭을 낭비합니다.
HTTP/2 서버 푸시가 사실상 폐기된 뒤, 103 Early Hints가 그 대안으로 자리 잡았습니다.

스펙 근거

RFC 8297MDN 문서

이전102 Processing 다음200 OK