서버에서 중요한 하위 리소스에 관한 힌트를 브라우저에 전송하는 방법을 알아보세요.
게시일: 2022년 6월 23일, 최종 업데이트: 2026년 7월 10일
Early Hints란 무엇인가요?
웹사이트는 시간이 지남에 따라 더욱 정교해졌습니다. 따라서 서버에서 요청된 페이지의 HTML을 생성하기 위해 중요한 작업을 실행해야 하는 것은 드문 일이 아닙니다 (예: 데이터베이스 액세스 또는 원본 서버에 액세스하는 CDN). 안타깝게도 이 '서버 생각 시간'으로 인해 브라우저가 페이지 렌더링을 시작하기 전에 추가 지연 시간이 발생합니다. 실제로 서버에서 응답을 준비하는 데 걸리는 시간만큼 연결이 유휴 상태로 전환됩니다.
Early Hints는 최종 응답보다 먼저 예비 HTTP 응답을 전송하는 데 사용되는 HTTP 상태 코드 (103 Early Hints)입니다. 이를 통해 서버는 서버가 기본 리소스를 생성하는 동안 중요한 하위 리소스 (예: 페이지의 스타일시트, 중요한 JavaScript) 또는 페이지에서 사용할 가능성이 높은 출처에 관한 힌트를 브라우저에 전송할 수 있습니다. 브라우저는 이러한 힌트를 사용하여 연결을 워밍업하고 기본 리소스를 기다리는 동안 하위 리소스를 요청할 수 있습니다. 즉, Early Hints는 브라우저가 일부 작업을 미리 실행하여 이러한 '서버 생각 시간'을 활용하도록 지원하므로 페이지 로드 속도가 빨라집니다.
경우에 따라 최대 콘텐츠 페인트의 성능 개선은 Shopify 및 Cloudflare에서 관찰한 대로 수백 밀리초에서 이 전후 비교에서 볼 수 있듯이 최대 1초 더 빨라질 수 있습니다.
Early Hints를 사용하는 방법
Early Hints를 활용하는 첫 번째 단계는 상위 방문 페이지, 즉 사용자가 일반적으로 웹사이트를 방문할 때 시작하는 페이지를 식별하는 것입니다. 다른 웹사이트에서 많은 사용자가 유입되는 경우 홈페이지 또는 인기 있는 제품 등록정보 페이지일 수 있습니다. 이러한 진입점이 다른 페이지보다 더 중요한 이유는 사용자가 웹사이트를 탐색할 때 Early Hints의 유용성이 감소하기 때문입니다 (즉, 브라우저가 두 번째 또는 세 번째 후속 탐색에서 필요한 모든 하위 리소스를 보유할 가능성이 높음). 또한 항상 좋은 첫인상을 주는 것이 좋습니다.
이제 방문 페이지의 우선순위가 지정된 목록이 있으므로 다음 단계는 preconnect 또는 preload 힌트에 적합한 출처 또는 하위 리소스를 식별하는 것입니다. 일반적으로 최대 콘텐츠 페인트 또는 첫 콘텐츠 페인트와 같은 주요 사용자 측정항목에 가장 많이 기여하는 출처 및 하위 리소스입니다. 구체적으로 동기식 JavaScript, 스타일시트 또는 웹 글꼴과 같은 렌더링 차단 하위 리소스를 찾습니다. 마찬가지로 주요 사용자 측정항목에 크게 기여하는 하위 리소스를 호스팅하는 출처를 찾습니다.
또한 기본 리소스에서 이미 preconnect 또는 preload를 사용하고 있는 경우 이러한 출처 또는 리소스를 Early Hints의 후보로 고려할 수 있습니다. 자세한 내용은 LCP 최적화 방법을 참고하세요. 하지만 HTML에서 preconnect 및 preload 지시어를 Early Hints로 그대로 복사하는 것은 최적이 아닐 수 있습니다.
HTML에서 이러한 기능을 사용할 때는 일반적으로 HTML에서 프리로드 스캐너가 검색하지 않는 리소스(예: 글꼴 또는 그렇지 않으면 늦게 검색되는 배경 이미지)를 preconnect 또는 preload하는 것이 좋습니다. Early Hints의 경우 HTML이 없으므로 대신 중요한 도메인에 preconnect하거나 HTML에서 일찍 검색될 수 있는 중요한 리소스(예: main.css 또는 app.js 미리 로드)를 preload하는 것이 좋습니다. 또한 모든 브라우저가 Early Hints의 preload을 지원하는 것은 아닙니다. 브라우저 지원을 참고하세요.
2단계는 기본 리소스에서 더 이상 사용되지 않거나 사용되지 않는 리소스 또는 출처에서 Early Hints를 사용할 위험을 최소화하는 것입니다. 예를 들어 자주 업데이트되고 버전이 지정된 리소스 (예: example.com/css/main.fa231e9c.css)는 최선의 선택이 아닐 수 있습니다. 이 문제는 Early Hints에만 국한되지 않으며 preload 또는 preconnect가 있는 모든 위치에 적용됩니다. 이러한 세부정보는 자동화 또는 템플릿 (예: 수동 프로세스는 preload와 리소스를 사용하는 실제 HTML 태그 간에 해시 또는 버전 URL이 일치하지 않을 가능성이 높음)으로 처리하는 것이 가장 좋습니다.
예를 들어 다음 흐름을 고려해 보세요.
GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]
서버는 main.abcd100.css가 필요할 것으로 예측하고 Early Hints를 사용하여 미리 로드할 것을 제안합니다.
103 Early Hints
Link: </main.abcd100.css>; rel=preload; as=style
[...]
잠시 후 연결된 CSS를 포함한 웹페이지가 제공됩니다. 안타깝게도 이 CSS 리소스는 자주 업데이트되며 기본 리소스는 이미 예측된 CSS 리소스 (abcd100)보다 5개 버전 앞서 있습니다 (abcd105).
200 OK
[...]
<HTML>
<head>
<title>Example</title>
<link rel="stylesheet" href="/main.abcd105.css">
일반적으로 상당히 안정적이고 기본 리소스의 결과와 크게 관련이 없는 리소스와 출처를 목표로 합니다. 필요한 경우 주요 리소스를 두 부분으로 나누는 것이 좋습니다. Early Hints와 함께 사용하도록 설계된 안정적인 부분과 기본 리소스가 브라우저에서 수신된 후에 가져오도록 남겨진 더 동적인 부분입니다.
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="/main.css">
<link rel="stylesheet" href="/experimental.3eab3290.css">
마지막으로 서버 측에서 Early Hints를 지원하는 것으로 알려진 브라우저에서 전송된 기본 리소스 요청을 찾고 103 Early Hints로 즉시 응답합니다. 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 Hints에서 전송할 수 있는 지시어는 브라우저마다 다릅니다.
미리 연결 지원:
Browser Support
' d='M96 183a64 64 0 0 1-23-23L17 64a128 128 0 0 0 111 192l55-96a64 64 0 0 1-87 23Z'/%3E%3Cpath fill='url(%23b)' d='M192 128a64 64 0 0 1-9 32l-55 96A128 128 0 0 0 239 64H128a64 64 0 0 1 64 64Z'/%3E%3Ccircle cx='128' cy='128' r='52' fill='%231a73e8'/%3E%3Cpath fill='url(%23c)' d='M96 73a64 64 0 0 1 32-9h111a128 128 0 0 0-222 0l56 96a64 64 0 0 1 23-87Z'/%3E%3C/svg%3E)
' xlink:href='%23A'%3E%3Cstop offset='.76' stop-opacity='0'/%3E%3Cstop offset='.95' stop-opacity='.5'/%3E%3Cstop offset='1'/%3E%3C/radialGradient%3E%3CradialGradient id='F' cx='2523' cy='4680' r='20243' gradientTransform='matrix(-.03715 .99931 -2.12836 -.07913 13579 3530)' xlink:href='%23A'%3E%3Cstop offset='0' stop-color='%2335c1f1'/%3E%3Cstop offset='.11' stop-color='%2334c1ed'/%3E%3Cstop offset='.23' stop-color='%232fc2df'/%3E%3Cstop offset='.31' stop-color='%232bc3d2'/%3E%3Cstop offset='.67' stop-color='%2336c752'/%3E%3C/radialGradient%3E%3CradialGradient id='G' cx='24247' cy='7758' r='9734' gradientTransform='matrix(.28109 .95968 -.78353 .22949 24510 -16292)' xlink:href='%23A'%3E%3Cstop offset='0' stop-color='%2366eb6e'/%3E%3Cstop offset='1' stop-color='%2366eb6e' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cpath id='H' d='M24105 20053a9345 9345 0 01-1053 472 10202 10202 0 01-3590 646c-4732 0-8855-3255-8855-7432 0-1175 680-2193 1643-2729-4280 180-5380 4640-5380 7253 0 7387 6810 8137 8276 8137 791 0 1984-230 2704-456l130-44a12834 12834 0 006660-5282c220-350-168-757-535-565z'/%3E%3Cpath id='I' d='M11571 25141a7913 7913 0 01-2273-2137 8145 8145 0 01-1514-4740 8093 8093 0 013093-6395 8082 8082 0 011373-859c312-148 846-414 1554-404a3236 3236 0 012569 1297 3184 3184 0 01636 1866c0-21 2446-7960-8005-7960-4390 0-8004 4166-8004 7820 0 2319 538 4170 1212 5604a12833 12833 0 007684 6757 12795 12795 0 003908 610c1414 0 2774-233 4045-656a7575 7575 0 01-6278-803z'/%3E%3Cpath id='J' d='M16231 15886c-80 105-330 250-330 566 0 260 170 512 472 723 1438 1003 4149 868 4156 868a5954 5954 0 003027-839 6147 6147 0 001133-850 6180 6180 0 001910-4437c26-2242-796-3732-1133-4392-2120-4141-6694-6525-11668-6525-7011 0-12703 5635-12798 12620 47-3654 3679-6605 7996-6605 350 0 2346 34 4200 1007 1634 858 2490 1894 3086 2921 618 1067 728 2415 728 2952s-271 1333-780 1990z'/%3E%3Cuse fill='url(%23B)' xlink:href='%23H'/%3E%3Cuse fill='url(%23D)' opacity='.35' xlink:href='%23H'/%3E%3Cuse fill='url(%23C)' xlink:href='%23I'/%3E%3Cuse fill='url(%23E)' opacity='.4' xlink:href='%23I'/%3E%3Cuse fill='url(%23F)' xlink:href='%23J'/%3E%3Cuse fill='url(%23G)' xlink:href='%23J'/%3E%3C/svg%3E)
' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.2' stop-color='%239059ff' stop-opacity='0'/%3E%3Cstop offset='.3' stop-color='%238c4ff3' stop-opacity='.1'/%3E%3Cstop offset='.8' stop-color='%237716a8' stop-opacity='.5'/%3E%3Cstop offset='1' stop-color='%236e008b' stop-opacity='.6'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-g' cx='239.1' cy='34.6' r='171.6' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffe226'/%3E%3Cstop offset='.1' stop-color='%23ffdb27'/%3E%3Cstop offset='.3' stop-color='%23ffc82a'/%3E%3Cstop offset='.5' stop-color='%23ffa930'/%3E%3Cstop offset='.7' stop-color='%23ff7e37'/%3E%3Cstop offset='.8' stop-color='%23ff7139'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-h' cx='374' cy='-74.3' r='732.2' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.5' stop-color='%23ff980e'/%3E%3Cstop offset='.6' stop-color='%23ff5634'/%3E%3Cstop offset='.7' stop-color='%23ff3647'/%3E%3Cstop offset='.9' stop-color='%23e31587'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-i' cx='304.6' cy='7.1' r='536.4' gradientTransform='rotate(84 303 4)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff44f'/%3E%3Cstop offset='.1' stop-color='%23ffe847'/%3E%3Cstop offset='.2' stop-color='%23ffc830'/%3E%3Cstop offset='.3' stop-color='%23ff980e'/%3E%3Cstop offset='.4' stop-color='%23ff8b16'/%3E%3Cstop offset='.5' stop-color='%23ff672a'/%3E%3Cstop offset='.6' stop-color='%23ff3647'/%3E%3Cstop offset='.7' stop-color='%23e31587'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-j' cx='235' cy='98.1' r='457.1' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.5' stop-color='%23ff980e'/%3E%3Cstop offset='.6' stop-color='%23ff5634'/%3E%3Cstop offset='.7' stop-color='%23ff3647'/%3E%3Cstop offset='.9' stop-color='%23e31587'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-k' cx='355.7' cy='124.9' r='500.3' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.2' stop-color='%23ffe141'/%3E%3Cstop offset='.5' stop-color='%23ffaf1e'/%3E%3Cstop offset='.6' stop-color='%23ff980e'/%3E%3C/radialGradient%3E%3ClinearGradient id='ff-a' x1='446.9' y1='76.8' x2='47.9' y2='461.8' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.1' stop-color='%23ffe847'/%3E%3Cstop offset='.2' stop-color='%23ffc830'/%3E%3Cstop offset='.4' stop-color='%23ff980e'/%3E%3Cstop offset='.4' stop-color='%23ff8b16'/%3E%3Cstop offset='.5' stop-color='%23ff672a'/%3E%3Cstop offset='.5' stop-color='%23ff3647'/%3E%3Cstop offset='.7' stop-color='%23e31587'/%3E%3C/linearGradient%3E%3ClinearGradient id='ff-l' x1='442.1' y1='74.8' x2='102.6' y2='414.3' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.2' stop-color='%23fff44f' stop-opacity='.8'/%3E%3Cstop offset='.3' stop-color='%23fff44f' stop-opacity='.6'/%3E%3Cstop offset='.5' stop-color='%23fff44f' stop-opacity='.2'/%3E%3Cstop offset='.6' stop-color='%23fff44f' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M479 166c-11-25-32-52-49-60a249 249 0 0 1 25 73c-27-68-73-95-111-155a255 255 0 0 1-8-14 44 44 0 0 1-4-9 1 1 0 0 0 0-1 1 1 0 0 0-1 0c-60 35-81 101-83 134a120 120 0 0 0-66 25 71 71 0 0 0-6-5 111 111 0 0 1-1-58c-25 11-44 29-58 44-9-12-9-52-8-60l-8 4a175 175 0 0 0-24 21 210 210 0 0 0-22 26 203 203 0 0 0-32 73l-1 2-2 15a229 229 0 0 0-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121zM202 355l3 1-3-1zm55-145zm198-31z' fill='url(%23ff-a)'/%3E%3Cpath d='M479 166c-11-25-32-52-49-60 14 26 22 53 25 72v1a207 207 0 0 1-206 279c-113-3-212-87-231-197-3-17 0-26 2-40-2 11-3 14-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121z' fill='url(%23ff-b)'/%3E%3Cpath d='M479 166c-11-25-32-52-49-60 14 26 22 53 25 72v1a207 207 0 0 1-206 279c-113-3-212-87-231-197-3-17 0-26 2-40-2 11-3 14-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121z' fill='url(%23ff-c)'/%3E%3Cpath d='m362 195 1 1a130 130 0 0 0-22-29C266 92 322 5 331 0c-60 35-81 101-83 134l9-1c45 0 84 25 105 62z' fill='url(%23ff-d)'/%3E%3Cpath d='M257 210c-1 6-22 26-29 26-68 0-80 41-80 41 3 35 28 64 57 79l4 2 7 3a107 107 0 0 0 31 6c120 6 143-143 57-186 22-4 45 5 58 14-21-37-60-62-105-62l-9 1a120 120 0 0 0-66 25l17 16c16 16 58 33 58 35z' fill='url(%23ff-e)'/%3E%3Cpath d='M257 210c-1 6-22 26-29 26-68 0-80 41-80 41 3 35 28 64 57 79l4 2 7 3a107 107 0 0 0 31 6c120 6 143-143 57-186 22-4 45 5 58 14-21-37-60-62-105-62l-9 1a120 120 0 0 0-66 25l17 16c16 16 58 33 58 35z' fill='url(%23ff-f)'/%3E%3Cpath d='m171 151 5 3a111 111 0 0 1-1-58c-25 11-44 29-58 44 1 0 36 0 54 11z' fill='url(%23ff-g)'/%3E%3Cpath d='M18 261a242 242 0 0 0 231 197 207 207 0 0 0 206-279c8 56-20 110-64 146-86 71-169 43-186 31l-3-1c-50-24-71-70-67-110-42 0-57-35-57-35s38-28 89-4c46 22 90 4 90 4 0-2-42-19-58-35l-17-16a71 71 0 0 0-6-5l-5-3c-18-11-52-11-54-11-9-12-9-51-8-60l-8 4a175 175 0 0 0-24 21 210 210 0 0 0-22 26 203 203 0 0 0-32 73c0 1-9 38-5 57z' fill='url(%23ff-h)'/%3E%3Cpath d='M341 167a130 130 0 0 1 22 29 46 46 0 0 1 4 3c55 50 26 121 24 126 44-36 72-90 64-146-27-68-73-95-111-155a255 255 0 0 1-8-14 44 44 0 0 1-4-9 1 1 0 0 0 0-1 1 1 0 0 0-1 0c-9 5-65 92 10 167z' fill='url(%23ff-i)'/%3E%3Cpath d='M367 199a46 46 0 0 0-4-3l-1-1c-13-9-36-18-58-15 86 44 63 193-57 187a107 107 0 0 1-31-6 131 131 0 0 1-11-5c17 12 99 39 186-31 2-5 31-76-24-126z' fill='url(%23ff-j)'/%3E%3Cpath d='M148 277s12-41 80-41c7 0 28-20 29-26s-44 18-90-4c-51-24-89 4-89 4s15 35 57 35c-4 40 16 85 67 110l3 1c-29-15-54-44-57-79z' fill='url(%23ff-k)'/%3E%3Cpath d='M479 166c-11-25-32-52-49-60a249 249 0 0 1 25 73c-27-68-73-95-111-155a255 255 0 0 1-8-14 44 44 0 0 1-4-9 1 1 0 0 0 0-1 1 1 0 0 0-1 0c-60 35-81 101-83 134l9-1c45 0 84 25 105 62-13-9-36-18-58-14 86 43 63 192-57 186a107 107 0 0 1-31-6 131 131 0 0 1-11-5l-3-1 3 1c-29-15-54-44-57-79 0 0 12-41 80-41 7 0 28-20 29-26 0-2-42-19-58-35l-17-16a71 71 0 0 0-6-5 111 111 0 0 1-1-58c-25 11-44 29-58 44-9-12-9-52-8-60l-8 4a175 175 0 0 0-24 21 210 210 0 0 0-22 26 203 203 0 0 0-32 73l-1 2-2 15a279 279 0 0 0-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121zm-24 13z' fill='url(%23ff-l)'/%3E%3C/svg%3E)
' xlink:href='%23s-b'%3E%3Cstop offset='0' stop-color='%2324a5f3' stop-opacity='0' /%3E%3Cstop offset='1' stop-color='%231e8ceb' /%3E%3C/radialGradient%3E%3CradialGradient id='s-j' cx='109.3' cy='13.8' r='93.1' gradientTransform='matrix(-.02 1.1 -1.04 -.02 137 -115)' xlink:href='%23s-b'%3E%3Cstop offset='0' stop-opacity='0' /%3E%3Cstop offset='1' stop-color='%235488d6' stop-opacity='0' /%3E%3Cstop offset='1' stop-color='%235d96eb' /%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='220' height='220' x='22' y='-107' fill='url(%23s-a)' ry='49' transform='matrix(.57 0 0 .57 187 256)' /%3E%3Cg transform='translate(194 190)'%3E%3Ccircle cx='67.8' cy='67.7' fill='url(%23s-c)' paint-order='stroke fill markers' r='54' /%3E%3Ccircle cx='-69.9' cy='69.3' fill='url(%23s-i)' transform='translate(138 -2)' r='54' /%3E%3C/g%3E%3Cellipse cx='120' cy='14.2' fill='url(%23s-j)' rx='93.1' ry='93.7' transform='matrix(.58 0 0 .58 192 250)' /%3E%3Cg transform='matrix(.58 0 0 .57 197 182)'%3E%3Cpath fill='%23cac7c8' d='M46 192h1l72-48-7-9-66 57Z' /%3E%3Cpath fill='%23fbfffc' d='M46 191v1l66-57-7-9-59 65Z' /%3E%3Cpath fill='url(%23s-d)' d='m119 144-7-9 66-57-59 66Z' /%3E%3Cpath fill='%23fb645c' d='m105 126 7 9 66-57-1-1-72 49Z' /%3E%3C/g%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='1' stroke-width='1.3' d='m287 278 3-2m-12-17 8-2m-8-3h4m-4-13 8 2m-8 3h4m-1-13 7 3m-4-11 7 4m-2-11 6 6m0-12 6 7m1-11 4 6m4-10 3 7m5-9 2 7m15-7-1 7m10-5-3 7m11-4-4 7m11-2-5 6m16 7-7 4m10 4-7 3m10 6-8 1m8 16-8-2m5 10-7-3m4 11-7-4m2 11-6-5m0 11-5-6m-2 11-4-7m-4 11-3-8m-6 10-1-8m-16 8 2-8m-10 5 3-7m-11 4 4-7m-11 2 5-6m-8 3 3-3m4 8 2-3m5 8 2-4m6 7 1-4m8 5v-4m8 4v-4m9 3-1-4m9 1-2-4m9 0-2-4m9-2-3-3m8-4-3-2m8-5-4-2m7-6-4-1m5-8h-4m4-8h-4m3-9-4 1m1-9-4 2m-1-9-3 2m-2-9-3 3m-4-8-2 3m-5-8-2 4m-6-6-1 3m-8-5v4m-8-4v4m-9-2 1 3m-9 0 2 3m-9 1 2 3m-9 2 3 3m-8 4 3 2m-8 5 4 2m-7 6 4 1m-4 25 4-1m-2 5 7-3m-6 7 4-2m-2 6 7-4m-13-21h8m41-41v-8m0 99v-8m49-42h-8' transform='translate(-65 8)' /%3E%3C/svg%3E)
미리 로드 지원:
Browser Support
Chrome DevTools에도 103 Early Hints 지원이 있으며 문서 리소스에서 Link 헤더를 확인할 수 있습니다.
Link 헤더가 Chrome DevTools에 표시됩니다.Early Hints 리소스를 사용하려면 Early Hints에서 브라우저 캐시를 사용하므로 DevTools에서 Disable cache를 선택하지 않아야 합니다. 미리 로드된 리소스의 경우 Initiator 는 Early-hints로, Size 는 (Disk cache)로 표시됩니다.
early-hints 이니시에이터가 있으며 디스크 캐시에서 로드됩니다.또한 HTTPS 테스트를 위한 신뢰할 수 있는 인증서가 필요합니다.
Firefox에는 DevTools의 이니시에이터로 명시적인 103 Early Hints 지원이 없지만 Early Hints를 사용하여 로드된 리소스는 Transferred 열에 cached로 표시되며 클릭하면 X-Moz: early hint HTTP 요청 헤더가 있습니다.
서버 지원
다음은 인기 있는 오픈소스 소프트웨어 HTTP 서버 소프트웨어 간의 Early Hints 지원 수준을 간략하게 요약한 것입니다.
Early Hints를 더 쉽게 사용 설정하기
다음 CDN 또는 플랫폼 중 하나를 사용하는 경우 Early Hints를 수동으로 구현하지 않아도 됩니다. 솔루션 제공업체의 온라인 문서를 참고하여 Early Hints를 지원하는지 확인하거나 여기에 있는 포괄적이지 않은 목록을 참고하세요.
Early Hints를 지원하지 않는 클라이언트의 문제를 방지하는 방법
100 범위의 정보 HTTP 응답은 HTTP 표준의 일부이지만 일부 이전 클라이언트 또는 봇은 103 Early Hints가 출시되기 전에 일반 웹 탐색에 거의 사용되지 않았기 때문에 이러한 응답에 어려움을 겪을 수 있습니다.
sec-fetch-mode: navigate HTTP 요청 헤더를 전송하는 클라이언트에 대한 응답으로 103 Early Hints만 내보내면 후속 응답을 기다리는 것을 이해하는 최신 클라이언트에만 이러한 힌트를 전송해야 합니다. 또한 Early Hints는 탐색 요청에서만 지원되므로 (현재 제한사항 참고) 다른 요청에서 이러한 요청을 불필요하게 전송하지 않는다는 추가 이점이 있습니다.
또한 Early Hints는 HTTP/2 또는 HTTP/3 연결을 통해서만 전송하는 것이 좋으며 대부분의 브라우저는 이러한 프로토콜을 통해서만 Early Hints를 허용합니다.
고급 패턴
주요 방문 페이지에 Early Hints를 완전히 적용하고 더 많은 기회를 찾고 있다면 다음 고급 패턴에 관심이 있을 수 있습니다.
일반적인 사용자 여정의 일부로 n번째 페이지 요청을 하는 방문자의 경우 페이지에서 더 낮고 깊은 콘텐츠에 Early Hints 응답을 적용하는 것이 좋습니다. 즉, 우선순위가 낮은 리소스에 Early Hints를 사용하는 것입니다. 우선순위가 높은 렌더링 차단 하위 리소스 또는 출처에 집중하는 것이 좋다고 권장했으므로 이는 직관에 반하는 것처럼 보일 수 있습니다. 하지만 방문자가 잠시 탐색한 후에는 브라우저에 이미 모든 중요한 리소스가 있을 가능성이 매우 높습니다. 여기에서 우선순위가 낮은 리소스로 관심을 전환하는 것이 좋습니다. 예를 들어 Early Hints를 사용하여 제품 이미지 또는 덜 일반적인 사용자 상호작용에만 필요한 추가 JS/CSS를 로드할 수 있습니다.
현재 제한사항
다음은 Chrome에 구현된 Early Hints의 제한사항입니다.
- 탐색 요청 (즉, 최상위 문서의 기본 리소스)에만 사용할 수 있습니다.
preconnect및preload만 지원합니다 (즉,prefetch는 지원되지 않음).- 최종 응답에서 교차 출처 리디렉션이 뒤따르는 Early Hints는 브라우저가 Early Hints를 사용하여 가져온 리소스와 연결을 삭제하게 됩니다.
- Early Hints를 사용하여 미리 로드된 리소스는 HTTP 캐시에 저장되고 나중에 페이지에서 검색됩니다. 따라서 캐시 가능한 리소스만 Early Hints를 사용하여 미리 로드할 수 있습니다. 그렇지 않으면 리소스가 두 번 가져옵니다 (Early Hints에서 한 번, 문서에서 다시 한 번). Chrome에서는 페이지 로드를 계속하더라도 신뢰할 수 없는 HTTPS 인증서에 대해 HTTP 캐시가 사용 중지됩니다.
- 문서가 생성될 때까지 뷰포트가 정의되지 않으므로 HTTP
<link>헤더를 사용하여 반응형 이미지 미리 로드 (imagesrcset,imagesizes또는media)가 지원되지 않을 수 있습니다. 최대한 문서가 수신될 때까지 기다리므로 103 Early Hints의 주요 이점이 무효화됩니다.
다른 브라우저에도 비슷한 제한사항이 있으며 앞에서 언급한 것처럼 일부는 103 Early Hints를 preconnect로만 추가로 제한합니다.
H2/Push와의 관계
지원 중단된 HTTP2/Push 기능에 익숙하다면 Early Hints가 어떻게 다른지 궁금할 수 있습니다. Early Hints는 브라우저가 중요한 하위 리소스 가져오기를 시작하기 위해 왕복이 필요한 반면 HTTP2/Push를 사용하면 서버에서 응답과 함께 하위 리소스 푸시를 시작할 수 있습니다. 이것은 놀라운 일이지만 주요 구조적 단점이 발생했습니다. HTTP2/Push를 사용하면 브라우저에 이미 있는 하위 리소스 푸시를 방지하기가 매우 어려웠습니다. 이 '과도한 푸시' 효과로 인해 네트워크 대역폭 사용량이 줄어들어 성능 이점이 크게 저해되었습니다. 전반적으로 Chrome 데이터에 따르면 HTTP2/Push는 실제로 웹 전반의 성능에 순영향을 미쳤습니다.
반면 Early Hints는 브라우저가 실제로 필요한 항목을 가져오거나 연결하도록 하는 힌트와 함께 예비 응답을 전송하는 기능을 결합하므로 실제로 더 나은 성능을 발휘합니다. Early Hints는 HTTP2/Push가 이론적으로 해결할 수 있는 모든 사용 사례를 다루지는 않지만 Early Hints가 탐색 속도를 높이는 데 더 실용적인 솔루션이라고 생각합니다.
Pierre Bamin의 썸네일 이미지.