Skip to main content
logologo
Docs
NewsBlogContact Us
Help CenterAPI DocsBlogFAQ

Early Hints 103 Status Code

This sample helps clients (such as browsers) send requests for static page components while waiting for an HTML response.

Status code 103 Early Hints is designed to increase the content distribution speed.

const CSS = "body { color: red; }";
const HTML = `
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Early Hints test</title>
    <link rel="stylesheet" href="/test.css">
</head>
<body>
    <h1>Early Hints test page</h1>
</body>
</html>
`;

addEventListener("fetch", (event) => {
    event.respondWith(handleRequest(event.request));
});


async function handleRequest(request) {
  // If request is for test.css, serve the raw CSS
  if (/test\.css$/.test(request.url)) {
    return new Response(CSS, {
      headers: {
        "content-type": "text/css",
      },
    });
  } else {
    // Serve raw HTML using Early Hints for the CSS file
    return new Response(HTML, {
      headers: {
        "content-type": "text/html",
        link: "</test.css>; rel=preload; as=style",
      },
    });
  }
}