103 Early Hints: precaricare le risorse critiche durante il server think time

Ultima revisione di Arjen Karel a marzo 2026

Cosa sono i 103 Early Hints?

Early Hints è un codice di stato HTTP (103) inviato prima che il server web invii la risposta finale. Consente al server di indicare al browser, all'inizio del processo di caricamento, che determinate risorse come un'immagine o un foglio di stile sono critiche per il rendering della pagina.

La maggior parte delle pagine dinamiche richiede tempo per essere generata. Il server interroga un database, esegue la logica dell'applicazione e assembla l'HTML. Durante quel tempo di elaborazione, il browser semplicemente aspetta. I 103 Early Hints colmano quel vuoto dicendo al browser cosa recuperare mentre aspetta la risposta reale.

Gli Early Hints sostituiscono il deprecato HTTP/2 Server Push, rimosso da Chrome nella versione 106. Il Server Push raggruppava le risorse con la risposta finale e spesso inviava byte che il browser aveva già in cache. Gli Early Hints evitano questo problema perché sono solo suggerimenti; il browser decide se agire su di essi.

Supporto dei browser

103 Early Hints è supportato dal 93% dei browser a livello globale:

• Chrome 103+ ed Edge 103+: supporto completo per preconnect e preload (da giugno 2022)
• Firefox 123+: supporto completo per preconnect e preload (da febbraio 2024)
• Safari 17+: solo preconnect. Safari non supporta il preload nelle risposte 103

La limitazione di Safari è importante. Se la tua strategia di Early Hints si basa interamente sul precaricamento di immagini o font, gli utenti Safari non ne trarranno beneficio. Includi suggerimenti di preconnect insieme ai suggerimenti di preload in modo che Safari almeno prepari la connessione alle origini delle tue risorse.

Gli Early Hints funzionano solo su HTTP/2 o HTTP/3. Non funzionano su HTTP/1.1, da iframe o per richieste non di navigazione. Il browser elabora i suggerimenti solo per preload e preconnect; dns-prefetch e prefetch non sono supportati nelle risposte 103.

Come appaiono i 103 Early Hints?

Quando un browser richiede una pagina, il server restituisce immediatamente una risposta 103 prima di aver finito di generare l'HTML. Questa risposta dice al browser di iniziare a recuperare l'immagine LCP e il foglio di stile:

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

Nel frattempo, il server genera la pagina. Una volta pronta, invia la risposta finale:

HTTP/2 200 OK
Content-Length: 1234
[il resto della risposta]

Quando il browser riceve la risposta 200, ha già iniziato a scaricare l'immagine e il foglio di stile. Quel vantaggio iniziale è ciò che rende il Largest Contentful Paint più veloce.

Come inviare i 103 Early Hints

Hai tre opzioni principali, dalla più semplice a quella con più controllo.

Cloudflare (la più semplice)

Se utilizzi già Cloudflare per le performance, abilitare gli Early Hints richiede un solo clic. Vai su Speed > Settings > Content Optimization e attiva Early Hints. È disponibile su tutti i piani, incluso quello gratuito.

Cloudflare memorizza nella cache le intestazioni Link delle risposte 200 della tua origine. Nelle richieste successive, invia quelle intestazioni memorizzate come una risposta 103 prima di inoltrare la richiesta alla tua origine. Fornisci i suggerimenti inviando le intestazioni Link dalla tua applicazione:

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

NGINX (nativo dalla 1.29.0)

NGINX ha aggiunto il supporto nativo ai 103 Early Hints nella versione 1.29.0 (giugno 2025). La direttiva early_hints inoltra le risposte 103 dal tuo backend al client:

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

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

La mappa sec-fetch-mode assicura che i suggerimenti vengano inviati solo per le richieste di navigazione su HTTP/2 o HTTP/3. La tua applicazione backend deve generare la risposta 103; NGINX la trasmette.

Apache (2.4.58+)

Apache può generare risposte 103 autonomamente utilizzando mod_http2. Abilitalo con la direttiva H2EarlyHints e definisci le risorse da suggerire:

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

A differenza di NGINX, Apache genera la risposta 103 a livello di server senza che la tua applicazione debba produrla.

Quando gli Early Hints aiutano (e quando no)

I 103 Early Hints sono più efficaci quando il server impiega un tempo considerevole per rispondere: pagine dinamiche che interrogano database, chiamano API o renderizzano template. Più lento è il Time to First Byte, più tempo ha il browser per agire sui suggerimenti.

Gli Early Hints offrono meno benefici quando:

• Il tuo server risponde in meno di 100ms. Se il TTFB è già veloce, non c'è un vuoto da colmare per il browser. Concentrati invece sulla prioritizzazione delle risorse nel tuo HTML.
• Le pagine vengono servite dalla cache. Una risposta HTML completamente memorizzata in cache si carica così velocemente che la risposta 103 ha a malapena un vantaggio iniziale.
• Suggerisci troppe risorse. Suggerire più di 10 risorse satura la connessione e può rallentare le cose. Shopify ha scoperto che sui dispositivi mobili, un suggerimento aggressivo ha portato a un degrado delle prestazioni su TTFB, FCP e LCP. Limitati a 2-4 risorse critiche.

Nonostante il supporto del browser al 93%, l'adozione rimane bassa. Secondo il 2025 Web Almanac, solo circa il 5% dei siti principali utilizza i 103 Early Hints. La barriera principale è sapere quali risorse suggerire per ogni pagina, cosa che la maggior parte dei CMS non gestisce automaticamente.

Come verificare che gli Early Hints stiano funzionando

Apri Chrome DevTools, vai al pannello Network e ricarica la pagina. Fai clic sulla richiesta del documento e controlla le intestazioni di risposta. Se gli Early Hints funzionano, vedrai uno stato 103 prima del 200 nella suddivisione temporale.

Dalla riga di comando, puoi verificare con curl:

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

Dovresti vedere sia una risposta 103 che una 200.

Risultati dei test

Ho testato due scenari per misurare l'impatto su First Contentful Paint e Largest Contentful Paint.

1. Early Hints solo sull'immagine LCP

L'immagine LCP è apparsa sullo schermo il 35% prima con i 103 Early Hints rispetto a un normale preload nell'HTML.

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

2. Early Hints con un foglio di stile di grandi dimensioni e l'immagine LCP

L'aggiunta di un file CSS da 85kb ai suggerimenti ha reso la differenza ancora più evidente. L'FCP è migliorato da 1,8 secondi a 1,4 secondi e l'LCP è migliorato da 3,2 secondi a 2,0 secondi.

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

Questi numeri sono in linea con quanto misurato da Cloudflare su oltre 100.000 clienti: un miglioramento dell'LCP del 6% al 50° percentile e del 16% al 75° percentile su desktop. Shopify ha visto un miglioramento dell'LCP di 500ms al p50 durante il Black Friday e il Cyber Monday. I guadagni maggiori si ottengono sulle pagine con tempi di risposta del server lenti, che è esattamente quando gli Early Hints hanno più tempo per funzionare.

Early Hints e TTFB

C'è una sfumatura di misurazione di cui essere consapevoli. Da Chrome 133, il tempo di responseStart del browser (utilizzato dalla maggior parte degli strumenti per segnalare il TTFB) include la risposta 103. Ciò significa che il TTFB riportato diminuirà dopo l'abilitazione degli Early Hints, anche se il tempo di elaborazione effettivo del tuo server non è cambiato.

Se hai bisogno di misurare separatamente il tempo di elaborazione del server, Chrome 133 ha introdotto un nuovo timestamp firstResponseHeadersStart che riporta quando arrivano le intestazioni della risposta 200 finale. Gli strumenti di Real User Monitoring che tracciano entrambi i valori ti offrono il quadro completo: quanto tempo gli Early Hints hanno fatto risparmiare al browser e quanto tempo il tuo server ha effettivamente impiegato per rispondere.