103 Early Hints: kritieke bronnen preloaden tijdens de server think time

Laatst beoordeeld door Arjen Karel op maart 2026

Wat zijn 103 Early Hints?

Early Hints is een HTTP-statuscode (103) die wordt verzonden voordat de webserver de definitieve respons verstuurt. Het stelt de server in staat om de browser vroeg in het laadproces te vertellen dat bepaalde bronnen, zoals een afbeelding of een stylesheet, cruciaal zijn voor het renderen van de pagina.

De meeste dynamische pagina's hebben tijd nodig om te worden gegenereerd. De server raadpleegt een database, voert applicatielogica uit en stelt de HTML samen. Tijdens die verwerkingstijd wacht de browser gewoon. 103 Early Hints vullen dat gat door de browser te vertellen wat hij moet ophalen terwijl hij wacht op de echte respons.

Early Hints vervangen het verouderde HTTP/2 Server Push, dat Chrome in versie 106 heeft verwijderd. Server Push bundelde bronnen met de uiteindelijke respons en pushte vaak bytes die de browser al in de cache had. Early Hints vermijden dat probleem omdat ze alleen een hint geven; de browser beslist of hij er iets mee doet.

Browserondersteuning

103 Early Hints wordt ondersteund door 93% van de browsers wereldwijd:

• Chrome 103+ en Edge 103+: volledige ondersteuning voor preconnect en preload (sinds juni 2022)
• Firefox 123+: volledige ondersteuning voor preconnect en preload (sinds februari 2024)
• Safari 17+: alleen preconnect. Safari ondersteunt geen preload in 103-responsen

De beperking van Safari is belangrijk. Als uw Early Hints-strategie volledig vertrouwt op het preloaden van afbeeldingen of lettertypen, zullen Safari-gebruikers hier geen voordeel van hebben. Voeg preconnect-hints toe naast preload-hints, zodat Safari in ieder geval de verbinding met de bronnen van uw resources voorbereidt.

Early Hints werken alleen via HTTP/2 of HTTP/3. Ze werken niet via HTTP/1.1, vanuit iframes of voor niet-navigatieverzoeken. De browser verwerkt alleen hints voor preload en preconnect; dns-prefetch en prefetch worden niet ondersteund in 103-responsen.

Hoe zien 103 Early Hints eruit?

Wanneer een browser een pagina opvraagt, stuurt de server onmiddellijk een 103-respons terug voordat deze klaar is met het genereren van de HTML. Deze respons vertelt de browser om te beginnen met het ophalen van de LCP-afbeelding en het stylesheet:

HTTP/2 103 Early Hints
Link: </image.webp>; rel=preload; as=image
Link: </style.css>; rel=preload; as=style

Ondertussen genereert de server de pagina. Zodra deze klaar is, verzendt hij de definitieve respons:

HTTP/2 200 OK
Content-Length: 1234
[de rest van de respons]

Tegen de tijd dat de browser de 200-respons ontvangt, is deze al begonnen met het downloaden van de afbeelding en het stylesheet. Die voorsprong is wat de Largest Contentful Paint sneller maakt.

Hoe verzendt u 103 Early Hints

U hebt drie hoofdopties, van eenvoudig naar de meeste controle.

Cloudflare (eenvoudigst)

Als u al Cloudflare gebruikt voor prestaties, is het inschakelen van Early Hints een kwestie van één schakelaar. Navigeer naar Speed > Settings > Content Optimization en schakel Early Hints in. Het is beschikbaar op alle abonnementen, inclusief de gratis versie.

Cloudflare cacht de Link-headers van de 200-responsen van uw origin. Bij volgende verzoeken verzendt het die gecachte headers als een 103-respons voordat het verzoek naar uw origin wordt doorgestuurd. U levert de hints door Link-headers vanuit uw applicatie te verzenden:

header("Link: </image.webp>; rel=preload; as=image", false);
header("Link: </style.css>; rel=preload; as=style", false);

NGINX (native sinds 1.29.0)

NGINX heeft native 103 Early Hints-ondersteuning toegevoegd in versie 1.29.0 (juni 2025). De early_hints-richtlijn stuurt 103-responsen van uw backend door naar de client:

map $http_sec_fetch_mode $early_hints {
    navigate $http2$http3;
}

server {
    location / {
        early_hints $early_hints;
        proxy_pass http://backend.example.com;
    }
}

De sec-fetch-mode-map zorgt ervoor dat hints alleen worden verzonden voor navigatieverzoeken via HTTP/2 of HTTP/3. Uw backend-applicatie moet de 103-respons genereren; NGINX stuurt deze door.

Apache (2.4.58+)

Apache kan zelf 103-responsen genereren met behulp van mod_http2. Schakel dit in met de H2EarlyHints-richtlijn en definieer de bronnen die als hint moeten worden gegeven:

H2EarlyHints on
H2EarlyHint Link "</style.css>;rel=preload;as=style"
H2EarlyHint Link "</image.webp>;rel=preload;as=image"

In tegenstelling tot NGINX genereert Apache de 103-respons op serverniveau zonder dat uw applicatie deze hoeft te produceren.

Wanneer Early Hints helpen (en wanneer niet)

103 Early Hints zijn het meest effectief wanneer uw server merkbare tijd nodig heeft om te reageren: dynamische pagina's die databases raadplegen, API's aanroepen of templates renderen. Hoe trager de Time to First Byte, hoe meer tijd de browser heeft om op de hints te reageren.

Early Hints bieden minder voordeel wanneer:

• Uw server reageert in minder dan 100ms. Als de TTFB al snel is, is er geen gat dat de browser kan vullen. Focus in plaats daarvan op resource prioritization in uw HTML.
• Pagina's worden geserveerd vanuit de cache. Een volledig gecachte HTML-respons laadt zo snel dat de 103-respons nauwelijks een voorsprong heeft.
• U te veel bronnen als hint opgeeft. Het opgeven van 10+ bronnen verzadigt de verbinding en kan de boel vertragen. Shopify ontdekte dat op mobiele apparaten agressief hunten leidde tot prestatievermindering bij TTFB, FCP en LCP. Houd het bij 2 tot 4 kritieke bronnen.

Ondanks de browserondersteuning van 93% blijft de adoptie laag. Volgens de 2025 Web Almanac gebruikt slechts ongeveer 5% van de topsites 103 Early Hints. De belangrijkste barrière is weten welke bronnen voor elke pagina als hint moeten worden gegeven, iets wat de meeste CMS'en niet automatisch afhandelen.

Hoe u kunt controleren of Early Hints werken

Open Chrome DevTools, ga naar het paneel Network en laad de pagina opnieuw. Klik op het documentverzoek en controleer de responsheaders. Als Early Hints werken, ziet u een 103-status vóór de 200 in de tijdsopbouw.

Vanaf de opdrachtregel kunt u dit verifiëren met curl:

curl -v --http2 https://example.com 2>&1 | grep "< HTTP"

U zou zowel een 103 als een 200 respons moeten zien.

Testresultaten

Ik heb twee scenario's getest om de impact op First Contentful Paint en Largest Contentful Paint te meten.

1. Early Hints alleen op de LCP-afbeelding

De LCP-afbeelding verscheen 35% eerder op het scherm met 103 Early Hints in vergelijking met een normale preload in de HTML.

HTTP/2 103 Early Hints
Link: </image.webp>; rel=preload; as=image

2. Early Hints met een groot stylesheet en de LCP-afbeelding

Het toevoegen van een CSS-bestand van 85kb aan de hints maakte het verschil nog duidelijker. FCP verbeterde van 1,8 seconden naar 1,4 seconden, en LCP verbeterde van 3,2 seconden naar 2,0 seconden.

HTTP/2 103 Early Hints
Link: </image.webp>; rel=preload; as=image
Link: </style.css>; rel=preload; as=style

Deze cijfers komen overeen met wat Cloudflare mat bij meer dan 100.000 klanten: een LCP-verbetering van 6% op het 50e percentiel en 16% op het 75e percentiel op desktop. Shopify zag een LCP-verbetering van 500ms op p50 tijdens Black Friday en Cyber Monday. De grootste winst wordt behaald op pagina's met trage serverresponstijden, wat precies het moment is waarop Early Hints de meeste tijd hebben om te werken.

Early Hints en TTFB

Er is een meetnuance waar u rekening mee moet houden. Sinds Chrome 133 omvat de responseStart-timing van de browser (gebruikt door de meeste tools om TTFB te rapporteren) de 103-respons. Dit betekent dat uw gerapporteerde TTFB zal dalen na het inschakelen van Early Hints, zelfs als de werkelijke verwerkingstijd van uw server niet is veranderd.

Als u de verwerkingstijd van de server afzonderlijk wilt meten: Chrome 133 introduceerde een nieuwe firstResponseHeadersStart-tijdstempel die rapporteert wanneer de definitieve 200-responsheaders arriveren. Tools voor Real User Monitoring die beide waarden bijhouden, geven u het volledige plaatje: hoeveel tijd Early Hints de browser hebben bespaard, en hoe lang uw server er werkelijk over deed om te reageren.