Websiteprestaties verbeteren met 103 Early Hints - Expertgids
by 
Met HTTP 103 Early Hints kan de browser al beginnen met het laden van kritieke resources terwijl de server nog bezig is met het genereren van een antwoord. Lees hoe je dit implementeert en wat de voordelen zijn.
Wat zijn 103 Early Hints? #
103 Early Hints is een relatief nieuwe statuscode, voor het eerst voorgesteld in 2015 en geformaliseerd in de HTTP/2-specificatie. De code is primair bedoeld voor gebruik met de Link-header om preload-hints naar de user agent te sturen. Met deze hints begint de user agent al met het ophalen van resources voordat de server de definitieve response verstuurt. Dat zorgt voor snellere laadtijden, omdat de benodigde resources al beschikbaar zijn op het moment dat ze nodig zijn.
Zonder Early Hints: de browser wacht op de definitieve response voordat belangrijke assets worden opgehaald.
Het grootste voordeel van 103 Early Hints is dat het de laadvolgorde van kritieke resources prioriteert — zoals stylesheets, fonts en scripts. Daarnaast kun je vroeg een verbinding opzetten met je content delivery network. Dit verbetert de perceived performance van je website aanzienlijk, doordat gebruikers sneller met de pagina kunnen interageren. Bovendien verminderen Early Hints het aantal benodigde round trips voor het laden van subresources.
Met Early Hints: terwijl de server de definitieve response genereert, stuurt hij hints naar de browser over kritieke subresources.
Wat is het verschil tussen 103 Early Hints en server push? #
Early Hints versus server push #
Early Hints en het inmiddels gedeprecieerde server push verbeteren allebei de prestaties van webpagina's door de tijd te verkorten die een browser nodig heeft om resources te ontvangen. Ze werken echter anders.
Server Push is een mechanisme waarmee een server proactief resources naar de browser stuurt zonder dat de browser daar eerst om vraagt. De browser kan resources laden voordat hij überhaupt weet dat hij ze nodig heeft — wat het aantal round trips voor het renderen van een pagina vermindert. Server push werkt via een "Push Promise" in de HTTP/2-response, met daarin de URL's van de te pushen resources. Het nadeel was dat je niet kon voorkomen dat subresources werden gepusht die al in de browsercache stonden.
Early Hints werkt anders: de server stuurt resource hints naar de browser voordat het HTML-document volledig is geparsed. De browser kan zo vroeg mogelijk beginnen met het laden van stylesheets en scripts, wat de tijd tot een interactieve pagina verkort. Early Hints werkt via een "Link"-header met URL's van resources of domeinen. Zoals de naam aangeeft: het zijn hints, de browser beslist zelf wat hij ermee doet.
HTTP/2 103 Early Hints Link: </style.css>; rel="preload"; as="style" Link: <https://yourcdn.com>; rel="preconnect"*
voorbeeld van een 103 response header*
Websiteprestaties verbeteren met 103 Early Hints #
Hoe implementeer je 103 Early Hints #
Voor de implementatie gebruik je de Link-header in je HTTP-responses. Die header bevat de URL's van de resources die je wilt preloaden, samen met het attribuut "rel=preload" of "rel=preconnect". Bijvoorbeeld:
Link: </styles/main.css>; rel=preload; as=style Link: <https://images.cdnserver.net>; rel=preconnect;
Dit is nog een experimentele functie en de browserondersteuning is beperkt. Momenteel ondersteunen Chrome en Edge 103 Early Hints.
Wat zijn de voordelen van 103 Early Hints? #
- Snellere laadtijden: door resource hints te sturen voordat het HTML-document volledig is geparsed, kan de browser zo vroeg mogelijk beginnen met het laden van stylesheets en scripts. Dat verkort de tijd tot een interactieve pagina aanzienlijk.
- Minder round trips: door de browser te informeren over benodigde resources vermindert Early Hints het aantal round trips dat nodig is om een pagina te laden.
- Betere resource-prioritering: ontwikkelaars kunnen aangeven welke resources het belangrijkst zijn, zodat de browser beter bepaalt wat als eerste geladen wordt.
- Efficiënter netwerkgebruik: door resource hints vroeg te versturen helpt Early Hints de browser het netwerk efficiënter te benutten, waardoor congestie afneemt en de algehele prestaties verbeteren.
- Eenvoudige implementatie: je voegt een "Link"-header toe aan je HTTP-response met de URL's van de resources die de browser alvast moet laden.
Belangrijke noot: Googlebot ondersteunt Early Hints NIET. #
Gary Illyes van Google deelde op LinkedIn informatie over hoe Google Search de HTTP-serverstatusresponse 103 Early Hints verwerkt. Hij zei: "Googlebot negeert de 103-response en wacht op de volgende response."
Iemand vroeg vervolgens naar de mogelijke gevolgen. Gary antwoordde: "Het effect is dat wanneer we een onbevredigende response ontvangen (de early hint), we de URL opnieuw crawlen, wat de crawlefficiëntie vermindert, of de URL uit de index verwijderen."
Zodra het experimentele label wordt verwijderd, zal Googlebot dit naar verwachting ook ondersteunen.
Conclusie: #
HTTP 103 Early Hints is een krachtig middel om websiteprestaties te verbeteren. Doordat de browser al kan beginnen met het preloaden van resources terwijl de server de definitieve response voorbereidt, kunnen laadtijden aanzienlijk dalen. Tegelijk helpt het ontwikkelaars Core Web Vitals te optimaliseren, zoals de Largest Contentful Paint. Browserondersteuning is voorlopig nog beperkt, maar moderne browsers ondersteunen het al — en implementatie kan de prestaties van je website sterk verbeteren.
Bronnen en referenties:
