103 Early Hints: Efficient Resource Preloading with an HTTP Status Code

INDEX

About 103 Early Hints

About 103 Early Hints

Overview of 103 Early Hints

Efficient Resource PreloadingHTTP Status Code
103 Early Hints Overview 103 Early Hints is an HTTP status code that notifies clients of associated resources (e.g., CSS and JavaScript) before providing the final response. By using this code, browsers can preload relevant resources, significantly improving page load speed.
The server provides early information about resources related to the requested resource.
Resource preloading is a mechanism to preload important files (e.g., fonts, images, scripts) required by a web page. This ensures that resources are ready when needed, speeding up the page load. For instance, the browser can be instructed to “download this font beforehand” for smoother rendering.

When is 103 Early Hints Returned?

When the server takes time to generate the final response
When the browser should preload related resources (e.g., CSS, JavaScript, images)
To leverage resource preloading for improved web performance

Examples of 103 Early Hints

Early Notification of Related Resources

GET /index.html HTTP/1.1  
Host: example.com

Response example:

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>

Explanation: The server returns 103 Early Hints, enabling the client to preload related resources like CSS and JavaScript. The usual 200 OK response then provides the HTML content.

Improving Page Load Speed

GET /homepage HTTP/1.1  
Host: example.com

Response example:

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 content of the homepage]

Explanation: By using 103 Early Hints, the browser can download required resources in advance, enhancing page load speed.

Points to Consider

Key points when returning 103 Early Hints:

Ensure the Final Response is Accurate
103 Early Hints is a supplementary status code, and the final response (e.g., 200 OK) must be correctly provided.
Check Client Support
Not all browsers or clients support 103 Early Hints, so compatibility should be considered.

Comparison with Related HTTP Status Codes

An explanation of status codes related to 103 Early Hints:

200 OK: Used when a request is successful and a complete response is provided.
102 Processing: Indicates that a long process is ongoing, serving a different purpose than 103.

Understanding these differences helps in appropriately using the 103 status code.