INDEX
103 Early Hints에 대하여
103 Early Hints 개요
| 효율적인 리소스 프리로딩HTTP 상태 코드 | ||
|
103 Early Hints 개요 103 Early Hints는 최종 응답을 제공하기 전에 클라이언트에게 관련 리소스(CSS, JavaScript 등)를 알리는 HTTP 상태 코드입니다. 이 코드를 사용하면 브라우저가 관련 리소스를 미리 로드하여 페이지 로딩 속도를 크게 개선할 수 있습니다. |
||
|
서버는 요청된 리소스와 관련된 정보를 미리 제공합니다. |
||
| 리소스 프리로딩은 웹페이지에 필요한 중요한 파일(폰트, 이미지, 스크립트 등)을 미리 로드하는 메커니즘입니다. 이를 통해 필요한 리소스가 미리 준비되므로 페이지 로드 속도가 빨라집니다. 예를 들어, 브라우저에 “이 폰트를 먼저 다운로드하라”고 지시하여 부드러운 표시를 가능하게 합니다. |
103 Early Hints는 언제 반환되는가?
- 서버가 최종 응답을 생성하는 데 시간이 걸리는 경우
- 브라우저가 관련 리소스(CSS, JavaScript, 이미지 등)를 미리 로드해야 하는 경우
- 리소스 프리로딩을 활용하여 웹 성능을 개선하려는 경우
103 Early Hints의 예시
관련 리소스의 조기 알림
GET /index.html HTTP/1.1 Host: example.com
응답 예시:
HTTP/1.1 103 Early Hints
Link: </style.css>; rel=preload; as=style
Link: </script.js>; rel=preload; as=script
HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
<html>
<head>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<script src="/script.js"></script>
</body>
</html>
설명: 서버는 103 Early Hints를 반환하여 클라이언트가 CSS 및 JavaScript와 같은 관련 리소스를 미리 로드할 수 있도록 합니다. 이후 일반적인 200 OK 응답으로 HTML 콘텐츠를 제공합니다.
페이지 로드 속도 개선
GET /homepage HTTP/1.1 Host: example.com
응답 예시:
HTTP/1.1 103 Early Hints Link: </main.css>; rel=preload; as=style Link: </analytics.js>; rel=preload; as=script HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8 [홈페이지의 HTML 콘텐츠]
설명: 103 Early Hints를 사용하여 브라우저가 필요한 리소스를 미리 다운로드할 수 있게 함으로써 페이지 로딩 속도를 높일 수 있습니다.
주의 사항
103 Early Hints를 반환할 때의 주의 사항:
- 최종 응답의 정확성 보장
103 Early Hints는 보조적인 상태 코드일 뿐이며, 최종 응답(예:200 OK)이 정확히 제공되어야 합니다. - 클라이언트 지원 여부 확인
모든 브라우저나 클라이언트가103 Early Hints를 지원하는 것은 아니므로 호환성에 주의해야 합니다.
관련 HTTP 상태 코드와의 비교
103 Early Hints와 관련된 상태 코드를 설명합니다:
- 200 OK: 요청이 성공적으로 처리되어 완전한 응답이 제공될 때 사용됩니다.
- 102 Processing: 긴 처리가 진행 중임을 나타내는 상태 코드로, 103과는 용도가 다릅니다.
이 차이를 이해하면 103 상태 코드를 적절히 사용할 수 있습니다.