"103 early hints" in het kort
De 103 Early hints is een lichtgewicht 'non-final' server header met de status code 103 en de naam early hints. Deze header is bijzonder omdat deze header al verstuurd wordt voordat de 'echte' server response wordt gestuurd. Een browser kan alvast kritieke bronnen ophalen voordat de pagina is ontvangen en ge-rendered.
Enkele test laten zien dat zonder 103 resource hints een LCP afbeelding maar liefst 45% trager op het scherm verschijnt
.
Wat zijn 103 - early hints?
Deze header is in het leven geroepen zodat een webmaster al in een vroeg stadium tijdens het laadproces kan aangeven dat bepaalde bronnen, zoals een afbeelding of een stylesheet 'kritiek' is voor het renderen van de pagina.
Hoe gebruikt een browser 103 - early hints?
Early hints worden op dit moment alleen ondersteund door google Chome vanaf versie 94. Omdat early hints nog een experimentele functie is moet je chrome opstarten met een zogenaamde Chrome Browser Flag vanaf de command line. In mijn geval moet ik chrome opstarten vanuit de terminal met het commando:
google-chrome --enable-features=EarlyHintsPreloadForNavigation
Early hints werken voor preload en preconnect resource hints wanneer deze vanaf het hoofddocument via HTTP2 of HTTP/3 worden verzonden. Je kunt dus geen early hints header meegeven aan bijvoorbeeld een afbeelding of een iframe.
Early hints werken dus niet wanneer:
- Early hints vanaf een andere bron dan het hoofdducoment (de HTML) worden verzonden
- Early Hints vanaf een iframe worden verzonden
- Early hints verzonden worden met HTTP/1.1 of eerder
- Early hints een dns-prefetch of prefetch hint bevatten
Hoe ziet een 103 early hint er uit?
Zodra je een webpagina opvraagt kun je een webserver zo instellen dat er direct een 103 early hints header wordt gestuurd. In deze header staat bijvoorbeeld dat image.webp en style.css alvast geladen kunnen worden
HTTP/1.1 103 Early Hints Link: </image.webp>; rel=preload; as=image Link: </style.css>; rel=preload; as=style
De server kan ondertussen de 'echte' webpagina gaan serveren. Nadat de server klaar is om deze te versturen wordt de uiteindelijke reactie verstuurd.
HTTP/1.1 200 OK Date: Thurs, 16 Sept 2021 11:30:00 GMT Content-Length: 1234 [de rest van de response]
Hoe verstuur je de early hints?
De meest eenvoudige manier om early hints te activeren is op dit moment met cloudflare. Meld je aan voor early hints. Zodra je bent toegelaten navigeer je naar 'Speed' -> 'Optimization'. Daar kun je Early hint activeren
Wil je zelf liever aan de slag met jouw eigen server? Dat kan ook. Je kunt 103 early hints zelf activeren op de Apache webserver (https://httpd.apache.org/docs/2.4/howto/http2.html#earlyhints) of via de experimentele NGIXN mdule https://github.com/flano-yuki/ngx_http_early_hints
Wanneer je cloudflare gebruikt dan kun je early hints agebruiken door een preload of preconnect header sturen. Cloudflare vertaalt dit dan in een 103 early hint header.
Wanneer je php gebruikt dan kun je 103 early hints versturen met deze code.
header("Link: </image.webp>; rel=preload; as=image", false);
header("Link: </style.css>; rel=preload; as=style", false); Resultaten 130 early hints
Het meest belangrijke is natuurlijk de vraag: "Wat levert 103 early resource mij op?" Om dat te bekijken heb ik een 2-tal scenario's getest.
1. Early resource hint op het LCP element
Al direct bij de eerste test ondervonden we hoe effectief early hints kunnen zijn. Het LCP element (een afbeelding) kwam maar liefst 35% eerder op het scherm te staan dan zonder early hints.
header("Link: </image.webp>; rel=preload; as=image", false); 
2. Early resource hint met een een groot stylesheet en het LCP element
Bij de tweede test heb ik een 85kb groot CSS bestand toegevoegd aan de pagina. Het verschil in de Core Web Vitals i nu nig beter te zien. De First Contentful Paint verbeterde van 1.8 seconden naar 1.4 seconden en de LCP element verbeterde van 2 seconden naar maar liefst 3.2 seconden.
header("Link: </image.webp>; rel=preload; as=image", false);
header("Link: </style.css>; rel=preload; as=style", false);
I help teams pass the Core Web Vitals:
A slow website is likely to miss out on conversions and revenue. Nearly half of internet searchers don't wait three seconds for a page to load before going to another site. Ask yourself: "Is my site fast enough to convert visitors into customers?"
