103 Early hints

Hvad er 103 - early hints?

Hvordan bruger en browser 103 - early hints?

Early hints understøttes i øjeblikket kun af Google Chrome fra version 94. Da early hints stadig er en eksperimentel funktion, skal du starte Chrome med et såkaldt Chrome Browser Flag fra kommandolinjen. I mit tilfælde skal jeg starte Chrome fra terminalen med kommandoen:

google-chrome --enable-features=EarlyHintsPreloadForNavigation

Early hints virker ikke, når:

• Early hints fra en anden kilde end hovedemnet (HTML) sendes
• Early Hints sendes fra en iframe
• Early hints sendes via HTTP/1.1 eller tidligere
• Early hints indeholder en dns-prefetch eller prefetch hint

Early hints virker kun for preload og preconnect resource hints, når de sendes fra hoveddokumentet over HTTP2 eller HTTP/3. Det er ikke tilladt at sende early hints header fra f.eks. et billede eller en iframe.

Hvordan ser 103 early hints ud?

Efter implementering af 103 early hints returneres en 103 early hints header med det samme, så snart en browser anmoder om en webside. For eksempel angiver denne header, at image.webp og style.css skal preloades.

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

I mellemtiden kan serveren begynde at generere det 'rigtige' HTTP-svar. For dynamiske sider kan dette tage lidt tid. Når serveren er klar til at sende det, sendes det endelige svar.

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

Send 103 early hints

Hastighedsmæssigt er den hurtigste tilgang til at sende 103 early hints gennem din egen server. Brug denne guide til at opsætte 103 early hints selv på Apache webserveren eller gennem det eksperimentelle NGINX-modul. Det er ikke nemt at aktivere 103 early hints, og early hints integrerer endnu ikke godt med populære CMS'er som WordPress.

Derfor er den nemmeste måde at aktivere early hints lige nu gennem Cloudflare. Tilmeld dig early hints. Når du er blevet optaget, naviger til 'Speed' -> 'Optimization' og aktiver Early Hints

Cloudflare accepterer resource hint headers og oversætter dem til en 103 early resource header. Du kan blot sende en early hint ved at sende en preload eller preconnect header. Cloudflare oversætter derefter dette til en 103 early hint header.
Med PHP og Cloudflare kan 103 early hints sendes med denne kode:

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

Lighthouse-resultater for 103 early hints

Det vigtigste spørgsmål er selvfølgelig: "Hvad betyder 103 early resource for mine Core Web Vitals?" Jeg har testet 2 almindelige scenarier.

1. Early resource hint på LCP-elementet

Umiddelbart efter den første test bemærkede jeg, hvor effektive early hints kan være. LCP-elementet (et billede) dukkede op på skærmen 35% hurtigere end uden 103 early hints headeren.

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

Kun preloading

103 Early hints

2. Early resource hint med et stort stylesheet og LCP-elementet

I den anden test tilføjede jeg en 85kb CSS-fil til siden. Forskellen i Core Web Vitals-resultaterne er endnu mere mærkbar. First Contentful Paint (FCP) blev forbedret fra 1,8 sekunder til 1,4 sekunder, og Largest Contentful Paint (LCP) blev forbedret fra 3,2 sekunder til blot 2 sekunder.

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

Kun preloading

103 Early hints