103 Early Hints: sfruttare l'attesa del server per caricare prima

Quando un browser richiede una pagina, spesso rimane in attesa senza fare nulla mentre il server la prepara: interroga il database, esegue i template, chiama servizi esterni. Su un sito dinamico questo tempo può essere di centinaia di millisecondi. Eppure, in molti casi, il server sa già fin dall'inizio quali risorse serviranno alla pagina: lo stesso foglio di stile, gli stessi font, lo stesso script principale. Il codice di stato 103 Early Hints permette di comunicarlo subito, così il browser usa quell'attesa per iniziare a scaricare.

Come funziona

Il 103 è una risposta informativa: non sostituisce la risposta finale, la precede. Lo scambio avviene così:

1. il browser richiede la pagina;
2. il server, ancora prima di avere l'HTML pronto, invia una risposta 103 con una o più intestazioni Link;
3. il browser legge quelle intestazioni e avvia connessioni o download;
4. quando la pagina è pronta, il server invia la risposta definitiva, per esempio un 200 con l'HTML.

HTTP/1.1 103 Early Hints
Link: </css/stile.css>; rel=preload; as=style
Link: <ORIGINE_DELLA_CDN>; rel=preconnect

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Link: </css/stile.css>; rel=preload; as=style
...

Quando l'HTML arriva e il browser scopre il riferimento al foglio di stile, il file è già in parte o del tutto scaricato. Il guadagno corrisponde, nel caso migliore, al tempo di elaborazione del server.

Quando conviene

Early Hints dà il massimo quando c'è un tempo di attesa significativo tra la richiesta e il primo byte dell'HTML. Le situazioni tipiche sono:

• pagine generate dinamicamente da un CMS o da un'applicazione, con TTFB elevato;
• pagine personalizzate che non possono essere memorizzate in una cache condivisa;
• siti dietro una CDN, dove il nodo vicino all'utente risponde subito con il 103 mentre attende la pagina dal server di origine.

Al contrario, se l'HTML è già servito da una cache in pochi millisecondi, il 103 non ha quasi nessuna finestra da sfruttare.

Cosa indicare

Il supporto attuale nei browser riguarda soprattutto due tipi di suggerimenti:

La regola d'oro è la stessa del preload nell'HTML: indicare solo risorse davvero critiche e usate da tutte o quasi le pagine a cui si applica il 103. Precaricare una risorsa che la pagina non userà spreca banda proprio nel momento in cui conta di più. Un errore comune è inviare lo stesso elenco di risorse per tutte le pagine del sito, comprese quelle che hanno un modello diverso.

Per i preload dei font, come nell'HTML, serve l'attributo crossorigin, altrimenti la risorsa scaricata non viene riutilizzata e il font viene richiesto una seconda volta.

Limiti e compatibilità

Alcuni vincoli da conoscere prima di attivarlo:

• solo navigazioni: il 103 viene considerato per le richieste di pagina, non per le sottorisorse;
• HTTP/2 e HTTP/3: Chrome, per esempio, prende in considerazione le Early Hints solo su connessioni HTTP/2 o successive;
• supporto dei browser: i browser che non lo gestiscono ignorano la risposta informativa e attendono quella finale, quindi non ci sono effetti negativi;
• intermediari: proxy o server vecchi possono non inoltrare correttamente le risposte 1xx. Conviene verificarlo sull'intera catena, dal server di origine alla CDN;
• redirect: se la risposta finale è un redirect verso un'altra origine, i suggerimenti ricevuti potrebbero essere scartati.

Come attivarlo

Ci sono due strade principali:

1. dalla CDN: diversi fornitori di CDN offrono le Early Hints come funzione attivabile. Il nodo memorizza le intestazioni Link presenti nelle risposte 200 di una pagina e, alle richieste successive, le invia come 103 mentre attende l'origine. È il modo più semplice, perché basta che l'HTML includa già intestazioni Link corrette;
2. dal server applicativo: alcuni server web e framework permettono di inviare esplicitamente un 103 prima della risposta finale. Dà più controllo, ma richiede che lo stack supporti l'invio di risposte informative.

In entrambi i casi è buona pratica mantenere le stesse intestazioni Link anche nella risposta finale, così i browser senza supporto per il 103 ne beneficiano comunque.

Verificare

Nel pannello Network di DevTools, le risorse avviate grazie alle Early Hints sono riconoscibili perché iniziano prima che arrivi l'HTML, e la colonna dell'iniziatore lo indica. Da riga di comando, curl -v mostra la risposta 103 prima di quella definitiva, se il server la invia. Per valutare l'effetto reale, confronta LCP e FCP nei dati degli utenti con e senza la funzione attiva: nel mio lavoro il beneficio si è visto soprattutto sulle pagine con TTFB alto, mentre su quelle già servite da cache è stato trascurabile.

In sintesi

• Il 103 Early Hints comunica le risorse critiche mentre il server prepara la pagina.
• È utile soprattutto con TTFB elevato e pagine dinamiche o personalizzate.
• Indica solo preconnect e preload di risorse davvero usate dalla pagina.
• Funziona sulle navigazioni, su HTTP/2 o superiore, e i browser senza supporto lo ignorano.
• Attivalo dalla CDN o dal server e verifica in DevTools e nei dati reali.