[Performance] Getting Early Hints to Work in Workers

Hi all.

I had in my Worker till yet HTTP/2 Push implemented
based on the cloudflare example here.


// Serve raw HTML using HTTP/2 for the CSS file
return new Response(HTML, {
headers: {
“content-type”: “text/html”,
Link: “</http2_push/h2p/test.css>; rel=preload; as=style”,

But for some strange reason it never worked for me.
Guess the Reason was that it was not really implemented by Cloudflare to push
the resources.

Server push wasn’t broadly implemented

The other notable issue with Server Push was that browsers supported it, and some origin servers implemented the feature, but no major CDN products (Cloudflare’s included) deemed the feature promising enough to implement and support at scale. Support for standards like server push or Early Hints in each key piece of the web content supply chain is critical for mass adoption.

I asked myself how this Early Hints really works and from what
i see and understand is that it joins two Status Header Fields in 1 Response
the First Status Header is the Early Hints with Status Code 103
Followed by the Second Status Header with Response 200
and the HTML Content itself after this.

See here:

Server responses:
Early Hint Response

HTTP/1.1 103 Early Hints
     Link: </style.css>; rel=preload; as=style
     Link: </script.js>; rel=preload; as=script

:stopwatch: …Server Think Time… :stopwatch:

Full Response

HTTP/1.1 200 OK
     Date: Thurs, 16 Sept 2021 11:30:00 GMT
     Content-Length: 1234
     Content-Type: text/html; charset=utf-8
     Link: </style.css>; rel=preload; as=style
     Link: </script.js>; rel=preload; as=script

[Rest of Response]

Also Here:

HTTP/1.1 103 Early Hints
Link: </style.css>; rel=preload
HTTP/1.1 200 OK
Content-Type: text/html
Link: </style.css>; rel=preload

So all what is needed to get Early Hints to Work in Workers is
to send two Status Codes
The First Status Code 103 for Early Hints
Followed by the Second Status Code 200
and the Content Body

I looked in the Docs for this how to be able to Create now this two Status Codes
and Return it as Response and it looks like this here is the Solution !


const results = [
  return new Response(results.join(), init)

So Two Responses need to be Created and Put into a Array.
After this the Array is merged joined and from this a new Response is Created.

Will have to try it tomorrow, if somebody is earlier with the written Solution please let me know.

I think the savings in time when used this way are minimal. To really take advantage of it the worker should send a 103 response as soon as the request comes in. This way the client is busy executing the preload and preconnect statements as needed while the server is preparing the response, which will then be sent as a 200 response.

Sending a 103 response immediately followed by the 200 response won’t save much, if anything.

Hi freitasm.

Yes you are correct.
Sending a 103 response immediately followed by the 200 response won’t save much as long the worker need to wait till the response need to be created waiting for a fetch from a origin server as a example.

We need the possibility in Workers to send a Header Response without to close the Connection.

The Steps in the Workers would be

  1. client connects to Worker.
  2. Worker sent instant a 103 Respsone without to close the connection.
  3. Worker makes a fetch to a origin server or a database and waits for the data
  4. Worker makes final response with data body and close the connection.

I looked in the API Documentation and for the Response Command i dont see anywhere
the posibility to deliver a response without to close the connection.


So we need do it otherway.
I ask me if we can use two times event.respondWith
One time for the 103 Status Header
and Second Time for the 200 Status Header and the Data Body



For what it’s worth, the Cloudflare Early Hints feature works without needing any upstream servers (workers or a true origin) to emit the 103 response themselves. Instead, if the Early Hints feature is enabled on a zone, we’ll look for the presence of Link headers, cache them, and take care of generating early hints on subsequent requests.


Thank you very much for the information Lukas.

It would be very helpfull if we could create the EarlyHints response from inside the workers
programaticly and dynamicly for API Requests.

I myself use ServerPush for API Endpoint Request to deliver dynamic html content.
That way all subsequent resources are pushed in 1 Request instant together with the html content data.

The cloudflare EarlyHints solution is not helpful when it come to requests to a API Endpoint
for fetching dynamic html content as the EarlyHints Response Header can not be programaticly created from inside the worker to preload the dynamic resources for the dynamic html content from the database.

That is why i love ServerPush.
It delivers everything in 1 Request when a dynamic html content is requested and all is availble instant just after 1 request for the user.

Hope really ServerPush is getting more support by the developers and will continue to be supported as serverpush is best for a fast internet.