[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.

https://developers.cloudflare.com/workers/examples/http2-server-push

// 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:
https://datatracker.ietf.org/meeting/97/materials/slides-97-httpbis-sessb-early-hints-00

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 !

https://developers.cloudflare.com/workers/examples/aggregate-requests

const results = [
    responses[0],
    responses[1],
  ]
  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.

https://developers.cloudflare.com/workers/runtime-apis/response

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
**

event.respondWith(handleRequest(event.request))

**