"103 Early hints"

Haal sneller kritieke resources op met 103 resource hints

Arjen Karel
linkedin

"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

.

Critical request chain example

Wat zijn 103 - early hints?

Early hints is een server header (een antwoord van de webserver) die verstuurd wordt voordat de webserver de uiteindelijke html verstuurd.
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.
Early resource hints zijn een verbetering van de de HTTP/2 server push waarbij de de resource hints bij de uiteindelijke server reactie gebundeld werden. Het verschil met de Server push is dus dat de resource hints veel eerder ontvangen kunnen worden waardoor de browser ook eerder kan beginnen met downloaden.

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);
Geen early hints
Early hints

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);
Geen early hints
Early hints
lighthouse 100 score

Perfect PageSpeed performance strategy

Een moderne website is een snelle website. Het is belangrijk om te blijven meten, optimalieren en controleren om snel te worden en te blijven.

Team up met de Core Web Vitals expert. Ik help de Core Web Vitals score van websites te verbeteren. Met meer dan 17 ervaring als technisch SEO consulent ken ik zorg ik voor een 'instant loading' website. Wil je dat ook? Laten we dan eens contact hebben!

PageSpeed services

103 Early hintsCore Web Vitals 103 Early hints