103 Early hints

Cosa sono le 103 - early hints?

Come usa un browser le 103 - early hints?

Le Early hints sono attualmente supportate solo da Google Chrome a partire dalla versione 94. Poiché le early hints sono ancora una funzione sperimentale, dovrai avviare Chrome con un cosiddetto Chrome Browser Flag dalla riga di comando. Nel mio caso devo avviare Chrome dal terminale con il comando:

google-chrome --enable-features=EarlyHintsPreloadForNavigation

Le early hints non funzionano quando:

• Vengono inviate early hints da una fonte diversa dal soggetto principale (l'HTML)
• Le Early Hints vengono inviate da un iframe
• Le early hints vengono inviate usando HTTP/1.1 o precedenti
• Le early hints contengono un dns-prefetch o prefetch hint

Le Early hints funzioneranno solo per le resource hints preload e preconnect quando inviate dal documento principale su HTTP2 o HTTP/3. Non è consentito passare l'intestazione early hints, per esempio, da un'immagine o un iframe.

Come si presentano le 103 early hints?

Dopo aver implementato le 103 early hints, non appena un browser richiede una pagina web, viene immediatamente restituita un'intestazione 103 early hints. Per esempio, questa intestazione dichiara che image.webp e style.css dovrebbero essere precaricate.

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

Nel frattempo, il server può iniziare a generare la 'vera' risposta HTTP. Per le pagine dinamiche, questo potrebbe richiedere un po' di tempo. Dopo che il server è pronto per inviarla, viene inviata la risposta finale.

HTTP/1.1 200 OK
Date: Thurs, 16 Sept 2021 11:30:00 GMT
Content-Length: 1234
[il resto della risposta]

Inviare 103 early hints

In termini di PageSpeed, l'approccio più veloce per inviare 103 early hints è attraverso il tuo server. Usa questa guida per configurare le 103 early hints tu stesso sul server web Apache o tramite il modulo NGINX sperimentale. Abilitare le 103 early hints non è facile da fare e le early hints non si integrano ancora bene con CMS popolari come WordPress.

Ecco perché, il modo più semplice in questo momento per attivare le early hints, è attraverso Cloudflare. Iscriviti alle early hints. Una volta ammesso, vai su 'Speed' -> 'Optimization' e attiva Early Hints

Cloudflare accetterà un'intestazione resource hint e la tradurrà in un'intestazione 103 early resource. Puoi semplicemente inviare un early hint inviando un'intestazione preload o preconnect. Cloudflare la traduce poi in un'intestazione 103 early hint.
Con PHP e Cloudflare le 103 early hints possono essere inviate con questo codice:

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

Risultati di Lighthouse per le 103 early hints

La domanda più importante è ovviamente: "Cosa significano le 103 early resource per i miei Core Web Vitals?" Ho testato 2 scenari comuni.

1. Early resource hint sull'elemento LCP

Immediatamente dopo il primo test, ho notato quanto possano essere efficaci le early hints. L'elemento LCP (un'immagine) è apparso sullo schermo il 35% prima rispetto a quando l'intestazione 103 early hints non era presente.

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

2. Early resource hint con un foglio di stile di grandi dimensioni e l'elemento LCP

Per il secondo test ho aggiunto un file CSS di 85kb alla pagina. La differenza nei risultati dei Core Web Vitals è ancora più evidente. Il First Contentful Paint (FCP) è migliorato da 1.8 secondi a 1.4 secondi e il Largest Contentful Paint (LCP) è migliorato da 3.2 secondi a soli 2 secondi.

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