103 Early hints

Wat zijn 103 - early hints?

Hoe gebruikt een browser 103 - early hints?

Early hints worden momenteel alleen ondersteund door Google Chrome vanaf versie 94. Omdat early hints nog een experimentele functie is, moet je Chrome starten met een zogenaamde Chrome Browser Flag vanaf de command line. In mijn geval moet ik Chrome starten vanaf de terminal met het commando:

google-chrome --enable-features=EarlyHintsPreloadForNavigation

Early hints werken niet wanneer:

• Early hints van een andere bron dan het hoofdonderwerp (de HTML) worden verzonden
• Early Hints worden verzonden vanuit een iframe
• Early hints worden verzonden met HTTP/1.1 of eerder
• Early hints een dns-prefetch of prefetch hint bevatten

Early hints werken alleen voor preload en preconnect resource hints wanneer verzonden vanuit het main document over HTTP2 of HTTP/3. Het is niet toegestaan om early hints header door te geven vanuit bijvoorbeeld een afbeelding of een iframe.

Hoe zien 103 early hints eruit?

Na het implementeren van 103 early hints, wordt zodra een browser een webpagina opvraagt direct een 103 early hints header geretourneerd. Bijvoorbeeld, deze header stelt dat image.webp en style.css gepreload moeten worden.

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

Ondertussen kan de server beginnen met het genereren van de 'echte' HTTP respons. Voor dynamische pagina's kan dit even duren. Nadat de server klaar is om het te verzenden, wordt de definitieve respons verzonden.

HTTP/1.1 200 OK
Date: Thurs, 16 Sept 2021 11:30:00 GMT
Content-Length: 1234
[the rest of the response]

Verzend 103 early hints

PageSpeed-gewijs is de snelste aanpak voor het verzenden van 103 early hints via je eigen server. Gebruik deze gids om 103 early hints zelf in te stellen op de Apache webserver of via de experimentele NGINX module. Het inschakelen van 103 early hints is niet eenvoudig en early hints integreren nog niet goed met populaire CMS'en zoals WordPress.

Daarom is de makkelijkste manier op dit moment om early hints te activeren via Cloudflare. Schrijf je in voor early hint. Zodra je bent toegelaten, navigeer naar 'Speed' -> 'Optimization en activeer Early Hints

Cloudflare accepteert resource hint headers en vertaalt dat naar een 103 early resource header. Je kunt eenvoudig een early hint verzenden door een preload of preconnect header te verzenden. Cloudflare vertaalt dit vervolgens naar een 103 early hint header.
Met PHP en Cloudflare kunnen 103 early hints verzonden worden met deze code:

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

Lighthouse resultaten voor 103 early hints

De belangrijkste vraag is natuurlijk: "Wat betekent 103 early resource voor mijn Core Web Vitals?" Ik heb 2 veelvoorkomende scenario's getest.

1. Early resource hint op het LCP element

Direct na de eerste test merkte ik hoe effectief early hints kunnen zijn. Het LCP element (een afbeelding) verscheen 35% eerder op het scherm dan zonder de aanwezigheid van de 103 early hints header.

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

Alleen preloading

103 Early hints

2. Early resource hint met een groot stylesheet en het LCP element

Voor de tweede test heb ik een 85kb CSS bestand aan de pagina toegevoegd. Het verschil in de Core Web Vitals resultaten is nog merkbaarder. De First Contentful Paint (FCP) verbeterde van 1,8 seconden naar 1,4 seconden en de Largest Contentful Paint (LCP) verbeterde van 3,2 seconden naar slechts 2 seconden.

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

Alleen preloading

103 Early hints