서버가 중요한 하위 리소스에 대한 힌트를 브라우저에 보내는 방법을 알아봅니다.
사전 힌트란 무엇인가요?
시간이 흐르면서 웹사이트는 더욱 정교해지고 있습니다. 따라서 서버가 요청된 페이지의 HTML을 생성하기 위해 특별한 작업 (예: 데이터베이스 액세스 또는 원본 서버에 액세스하는 CDN)을 수행해야 하는 경우는 드뭅니다. 안타깝게도 이러한 '서버 분석 시간'으로 인해 브라우저가 페이지 렌더링을 시작하기 전에 추가 지연 시간이 발생합니다. 실제로 서버가 응답을 준비하는 한 연결은 사실상 유휴 상태가 됩니다.
사전 힌트는 최종 응답 전에 예비 HTTP 응답을 전송하는 데 사용되는 HTTP 상태 코드 (103 Early Hints)입니다. 이렇게 하면 서버가 기본 리소스를 생성하는 동안에도 서버가 중요한 하위 리소스 (예: 페이지의 스타일시트, 중요한 자바스크립트) 또는 페이지에서 사용할 가능성이 있는 출처에 대한 힌트를 브라우저에 보낼 수 있습니다. 브라우저는 기본 리소스를 기다리는 동안 이러한 힌트를 사용하여 연결을 준비하고 하위 리소스를 요청할 수 있습니다. 다시 말해, Early Hints는 브라우저가 이러한 '서버 분석 시간'을 활용할 수 있도록 일부 작업을 사전에 수행함으로써 페이지 로드 속도를 높입니다.
경우에 따라 최대 콘텐츠 렌더링 시간의 성능 개선은 Shopify 및 Cloudflare에서 관찰한 바와 같이 수백 밀리초에서 1초 더 빨라질 수 있으며, 비교 전후의 다음 슬라이드에서 볼 수 있습니다.
사전 힌트 사용 방법
조기 힌트를 활용하려면 먼저 상위 방문 페이지, 즉 사용자가 웹사이트를 방문할 때 일반적으로 시작하는 페이지를 확인해야 합니다. 홈페이지가 홈페이지일 수도 있고, 다른 웹사이트에서 유입된 사용자가 많다면 인기 제품 등록정보 페이지일 수도 있습니다. 이러한 진입점이 다른 페이지보다 중요한 이유는 사용자가 웹사이트를 탐색할 때 Early Hints의 유용성이 떨어지기 때문입니다. 즉, 브라우저가 두 번째 또는 세 번째 탐색 시 필요한 모든 하위 리소스를 가질 가능성이 높기 때문입니다. 좋은 첫인상을 남기는 것도 중요합니다.
우선순위가 지정된 방문 페이지 목록이 있으므로 다음 단계는 preconnect 또는 preload 힌트에 적합한 출처 또는 하위 리소스를 식별하는 것입니다. 일반적으로 최대 콘텐츠 렌더링 시간 또는 콘텐츠가 포함된 첫 페인트와 같은 주요 사용자 측정항목에 가장 많이 기여하는 출처 및 하위 리소스입니다. 보다 구체적으로 동기식 JavaScript, 스타일시트 또는 웹 글꼴과 같은 렌더링 차단 하위 리소스를 찾아보세요. 마찬가지로 주요 사용자 측정항목에 크게 기여하는 하위 리소스를 호스팅하는 출처를 찾아보세요.
또한 기본 리소스가 이미 preconnect 또는 preload를 사용하고 있다면 이러한 출처나 리소스를 사전 힌트 후보로 고려할 수 있습니다. 자세한 내용은 LCP 최적화 방법을 참고하세요. 그러나 preconnect 및 preload 지시어를 HTML에서 사전 힌트로 단순히 복사하는 것은 최적의 방법이 아닐 수 있습니다.
이를 HTML에서 사용하는 경우 일반적으로 미리 로드 검사기가 HTML에서 찾을 수 없는 preconnect 또는 preload 리소스(예: 늦게 검색될 글꼴이나 배경 이미지)가 좋습니다. Early Hints의 경우 HTML이 없으므로 HTML 초기에 검색될 가능성이 있는 중요한 도메인에 대해 preconnect 또는 preload 중요 리소스(예: main.css 또는 app.js 미리 로드)를 사용하는 것이 좋습니다. 또한 일부 브라우저에서는 Early Hints에 대해 preload를 지원하지 않습니다. 브라우저 지원을 참고하세요.
두 번째 단계는 더 이상 사용되지 않거나 기본 리소스에서 더 이상 사용하지 않는 리소스 또는 출처에 사전 힌트를 사용할 위험을 최소화하는 것입니다. 예를 들어 자주 업데이트되고 버전이 관리되는 리소스 (예: example.com/css/main.fa231e9c.css)는 최선의 선택이 아닐 수 있습니다. 이 문제는 사전 힌트에만 국한되지 않으며 preload 또는 preconnect가 있을 수 있는 모든 위치에 적용됩니다. 이는 자동화 또는 템플릿 처리에 가장 적합한 세부정보 유형입니다. 예를 들어 수동 프로세스를 사용하면 preload와 리소스를 사용하는 실제 HTML 태그 간에 해시 또는 버전 URL이 일치하지 않을 가능성이 높습니다.
예를 들어 다음 흐름을 살펴보겠습니다.
GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]
서버는 main.abcd100.css가 필요할 것으로 예측하고 사전 힌트를 사용하여 미리 로드할 것을 제안합니다.
103 Early Hints
Link: </main.abcd100.css>; rel=preload; as=style
[...]
잠시 후 연결된 CSS가 포함된 웹페이지가 표시됩니다. 유감스럽게도 이 CSS 리소스는 자주 업데이트되며 기본 리소스가 이미 예측 CSS 리소스 (abcd100)보다 다섯 개 버전 (abcd105) 앞서 있습니다.
200 OK
[...]
<HTML>
<head>
<title>Example</title>
<link rel="stylesheet" href="/main.abcd105.css">
일반적으로 상당히 안정적이고 주 리소스의 결과와 대체로 독립적인 리소스와 출처를 목표로 합니다. 필요한 경우 주요 리소스를 두 가지로 분할할 수도 있습니다. 하나는 사전 힌트와 함께 사용하도록 설계된 안정적인 부분이고, 다른 하나는 브라우저에서 기본 리소스를 수신한 후 가져와야 하는 더 동적인 부분입니다.
<HTML>
<head>
<title>Example</title>
<link rel="stylesheet" href="/main.css">
<link rel="stylesheet" href="/experimental.3eab3290.css">
마지막으로 서버 측에서 사전 힌트를 지원하는 것으로 알려진 브라우저에서 보낸 기본 리소스 요청을 찾아 103개의 사전 힌트로 즉시 응답합니다. 103 응답에 관련 사전 연결 및 미리 로드 힌트를 포함합니다. 기본 리소스가 준비되면 일반적인 응답을 보냅니다 (예: 성공한 경우 200 OK). 이전 버전과의 호환성을 위해 최종 응답에 Link HTTP 헤더도 포함하는 것이 좋습니다. 주요 리소스를 생성하는 과정에서 명확하게 드러난 주요 리소스 (예: '둘로 나누기' 제안을 따르는 경우 키 리소스의 동적 부분)로 보강할 수도 있습니다. 다음과 같이 표시됩니다.
GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]
103 Early Hints
Link: <https://fonts.google.com>; rel=preconnect
Link: </main.css>; rel=preload; as=style
Link: </common.js>; rel=preload; as=script
잠시 후:
200 OK
Content-Length: 7531
Content-Type: text/html; charset=UTF-8
Content-encoding: br
Link: <https://fonts.google.com>; rel=preconnect
Link: </main.css>; rel=preload; as=style
Link: </common.js>; rel=preload; as=script
Link: </experimental.3eab3290.css>; rel=preload; as=style
<HTML>
<head>
<title>Example</title>
<link rel="stylesheet" href="/main.css">
<link rel="stylesheet" href="/experimental.3eab3290.css">
<script src="/common.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
브라우저 지원
103 Early Hints는 모든 주요 브라우저에서 지원되지만, Early Hint에서 보낼 수 있는 지시어는 브라우저마다 다릅니다.
사전 연결 지원:
브라우저 지원
- 103명
- 103명
- 120
- 17
미리 로드 지원:
브라우저 지원
- 103명
- 103명
- 123
- x
Chrome DevTools에서는 103가지 사전 힌트 지원도 제공됩니다.
서버 지원
다음은 널리 사용되는 오픈소스 소프트웨어 HTTP 서버 소프트웨어 중 Early Hints에 대한 지원 수준을 간략히 요약한 것입니다.
더 쉬운 방법으로 Early Hints 사용 설정
다음 CDN 또는 플랫폼 중 하나를 사용하는 경우 사전 힌트를 수동으로 구현할 필요가 없습니다. 솔루션 제공업체의 온라인 문서를 참고하여 사전 힌트를 지원하는지 알아보거나, 다음 링크에서 일부 예시 목록을 참조하세요.
사전 힌트를 지원하지 않는 클라이언트와 관련된 문제를 방지하는 방법
100 범위의 정보 HTTP 응답은 HTTP 표준의 일부이지만, 103 Early Hints가 출시되기 전에는 일반 웹 브라우징에 거의 사용되지 않았던 일부 오래된 클라이언트나 봇의 경우 이에 어려움을 겪을 수 있습니다.
sec-fetch-mode: navigate HTTP 요청 헤더를 전송하는 클라이언트에 대한 응답으로만 103개의 사전 힌트를 내보내면 후속 응답을 기다리는 것을 파악한 최신 클라이언트에게만 이러한 힌트가 전송되어야 합니다. 또한 사전 힌트는 탐색 요청에서만 지원되므로 (현재 제한사항 참고) 다른 요청에서 이러한 정보를 불필요하게 전송하지 않아도 된다는 추가적인 이점이 있습니다.
또한 초기 힌트는 HTTP/2 또는 HTTP/3 연결을 통해서만 전송하는 것이 좋습니다.
고급 패턴
주요 방문 페이지에 Early Hints를 완전히 적용하였고 더 많은 기회를 찾고 있다면 다음과 같은 고급 패턴에 관심이 있으실 것입니다.
일반적인 사용자 여정의 일부로 nth 페이지를 요청하는 방문자의 경우, 페이지의 더 낮고 깊이 있는 콘텐츠에 맞게 사전 힌트 응답을 조정할 수 있습니다. 즉, 우선순위가 낮은 리소스에 사전 힌트를 사용할 수 있습니다. 우선순위가 높고 렌더링을 차단하는 하위 리소스 또는 출처에 집중하는 것이 좋다는 점을 고려하면 이 방법은 직관적이지 않을 수 있습니다. 그러나 방문자가 한동안 탐색할 때쯤이면 브라우저에 이미 중요한 리소스가 모두 있을 가능성이 매우 높습니다. 그 이후에는 우선순위가 낮은 리소스로 주의를 돌리는 것이 좋습니다. 예를 들어, Early Hints를 사용하여 제품 이미지를 로드하거나 덜 일반적인 사용자 상호작용에만 필요한 추가 JS/CSS를 사용할 수 있습니다.
현재 제한사항
Chrome에 구현된 사전 힌트의 제한사항은 다음과 같습니다.
- 탐색 요청 (즉, 최상위 문서의 기본 리소스)에만 사용할 수 있습니다.
preconnect및preload만 지원합니다 (즉,prefetch는 지원되지 않음).- Early Hint에 이어 최종 응답에서 교차 출처 리디렉션이 발생하면 Chrome에서 Early Hints를 사용하여 얻은 리소스와 연결을 삭제합니다.
다른 브라우저에도 유사한 제한사항이 있으며 일부 브라우저에는 103개의 조기 힌트가 preconnect로만 추가로 제한됩니다.
다음 단계
커뮤니티의 관심에 따라 다음 기능을 사용하여 사전 힌트 구현을 보강할 수 있습니다.
- 하위 리소스 요청 시 전송되는 조기 힌트입니다.
- iframe 기본 리소스 요청 시 사전 힌트가 전송됩니다.
- 사전 힌트에서 미리 가져오기가 지원됩니다.
우선순위를 두어야 할 측면과 사전 힌트를 더욱 개선하는 방법에 대한 여러분의 의견을 보내주시기 바랍니다.
H2/푸시와의 관계
지원 중단된 HTTP2/푸시 기능에 익숙하다면 사전 힌트가 어떻게 다른지 궁금하실 것입니다. Early Hints에서는 브라우저에서 중요한 하위 리소스를 가져오려면 왕복이 필요하지만, HTTP2/Push를 사용하면 서버가 응답과 함께 하위 리소스를 푸시하기 시작할 수 있습니다. 놀랍게도, 이로 인해 중요한 구조적 단점이 발생했습니다. HTTP2/Push를 사용하면 브라우저에 이미 있는 하위 리소스를 푸시하는 것을 피하기가 매우 어려웠습니다. 이 '과도한 푸시' 효과는 네트워크 대역폭의 사용 효율을 떨어뜨려 성능 이점을 크게 저해했습니다. 전반적으로 Chrome 데이터에 따르면 HTTP2/Push는 웹 전반의 성능에 있어서는 순수 부정적이었습니다.
반면에, Early Hints는 예비 응답을 전송하는 기능과 함께 브라우저가 실제로 필요한 것을 가져오거나 연결하는 작업을 담당하게 하는 힌트를 결합하므로 실제로 성능이 더 뛰어납니다. Early Hints가 이론상 HTTP2/Push로 해결할 수 있는 모든 사용 사례를 다루지는 않지만, Early Hints가 탐색 속도를 높이는 데 보다 실용적인 솔루션이라고 확신합니다.
썸네일 이미지: Pierre Bamin.