"103 Early hints"

Haal sneller kritieke resources op met 103 resource hints

Arjen Karel Core Web Vitals Consultant
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

I help sites pass the Core Web Vitals:

lighthouse 100 score

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?" As a PageSpeed expert I will fix your PageSpeed problems once and for all. I can perform a page speed audit based on the Core Web Vitals guidelines, work with your team or fix your issues myself.

Core Web Vitals Consultancy

In-house Core Web Vitals support.

read more

Core Web Vitals site audits

Improve and fix your PageSpeed strategy

read more

Core Web Vitals training & workshops

Build in-house knowledge and empower your teams

read more

WordPress  optimization

Fix your WordPress Core web vitals issues

read more

103 Early hintsCore Web Vitals 103 Early hints