Cloudflare Docs
Workers
Visit Workers on GitHub
Set theme to dark (⇧+D)

103 Early Hints

Allow a client to request static assets while waiting for the HTML response.

To ensure Early Hints are enabled:

  1. Log in to the Cloudflare Dashboard and select your account and website.
  2. Go to Speed -> Optimization.
  3. Enable the Early Hints toggle to on.
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>
`;
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',
},
});
}
}
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request));
});