Caricamenti delle pagine più rapidi grazie al momento di riflessione del server con i suggerimenti anticipati

Scopri in che modo il tuo server può inviare suggerimenti al browser sulle sottorisorse critiche.

Kenji Baheux

Barry Pollard

Data di pubblicazione: 23 giugno 2022, ultimo aggiornamento: 10 luglio 2026

Che cosa sono i suggerimenti iniziali?

Nel corso del tempo, i siti web sono diventati più sofisticati. Di conseguenza, non è insolito che un server debba eseguire un lavoro non banale (ad esempio, accedere a database o CDN che accedono al server di origine) per generare l'HTML per la pagina richiesta. Purtroppo, questo "tempo di elaborazione del server" comporta una latenza aggiuntiva prima che il browser possa iniziare il rendering della pagina. Infatti, la connessione rimane inattiva per tutto il tempo necessario al server per preparare la risposta.

I suggerimenti iniziali sono un codice di stato HTTP (103 Early Hints) utilizzato per inviare una risposta HTTP preliminare prima di una risposta finale. Ciò consente a un server di inviare suggerimenti al browser sulle sottorisorse critiche (ad esempio, fogli di stile per la pagina, JavaScript critico) o sulle origini che verranno probabilmente utilizzate dalla pagina, mentre il server è impegnato a generare la risorsa principale. Il browser può utilizzare questi suggerimenti per preparare le connessioni e richiedere le sottorisorse, in attesa della risorsa principale. In altre parole, i suggerimenti iniziali aiutano il browser a sfruttare questo "tempo di elaborazione del server" eseguendo in anticipo alcune operazioni, velocizzando così il caricamento delle pagine.

In alcuni casi, il miglioramento delle prestazioni di Largest Contentful Paint può variare da diverse centinaia di millisecondi, come osservato da Shopify e Cloudflare, fino a un secondo più veloce, come mostrato in questo confronto prima e dopo:

Come utilizzare i suggerimenti iniziali

Il primo passo per sfruttare i suggerimenti iniziali consiste nell'identificare le pagine di destinazione principali, ovvero le pagine da cui gli utenti iniziano in genere quando visitano il tuo sito web. Potrebbe trattarsi della home page o delle pagine di schede di prodotto più visitate se hai molti utenti che provengono da altri siti web. Il motivo per cui questi punti di ingresso sono più importanti rispetto ad altre pagine è che l'utilità dei suggerimenti iniziali diminuisce man mano che l'utente naviga nel tuo sito web (ovvero, è più probabile che il browser abbia tutte le sottorisorse di cui ha bisogno nella seconda o terza navigazione successiva). È sempre una buona idea fare una prima impressione positiva.

Ora che hai questo elenco di pagine di destinazione con priorità, il passaggio successivo consiste nell'identificare le origini o le sottorisorse che sarebbero buoni candidati per i suggerimenti preconnect o preload. In genere, si tratta di origini e sottorisorse che contribuiscono maggiormente alle metriche utente chiave, come Largest Contentful Paint o First Contentful Paint. Più concretamente, cerca le sottorisorse che bloccano il rendering, come JavaScript sincrono, fogli di stile o persino web font. Allo stesso modo, cerca le origini che ospitano sottorisorse che contribuiscono molto alle metriche utente chiave.

Tieni presente inoltre che, se le risorse principali utilizzano già preconnect o preload, puoi considerare queste origini o risorse tra i candidati per i suggerimenti iniziali. Per ulteriori dettagli, consulta la sezione su come ottimizzare LCP. Tuttavia, copiare in modo ingenuo le direttive preconnect e preload dall'HTML ai suggerimenti iniziali potrebbe non essere ottimale.

Quando li utilizzi in HTML, in genere vuoi preconnect o preload le risorse che lo scanner di precaricamento non rileva nell'HTML, ad esempio i font o le immagini di sfondo che altrimenti verrebbero rilevate in ritardo. Per i suggerimenti iniziali, non avrai l'HTML, quindi potresti invece preconnect ai domini critici o preload le risorse critiche che forse verrebbero altrimenti rilevate in anticipo nell'HTML, ad esempio precaricando main.css o app.js. Inoltre, non tutti i browser supportano preload per i suggerimenti iniziali. Consulta la sezione Supporto browser.

Il secondo passaggio consiste nel ridurre al minimo il rischio di utilizzare i suggerimenti iniziali su risorse o origini che potrebbero essere obsolete o non più utilizzate dalla risorsa principale. Ad esempio, le risorse aggiornate e versionate di frequente (ad esempio, example.com/css/main.fa231e9c.css) potrebbero non essere la scelta migliore. Tieni presente che questo problema non è specifico dei suggerimenti iniziali, ma si applica a qualsiasi preload o preconnect ovunque possa essere presente. Questo tipo di dettaglio viene gestito al meglio con l'automazione o la creazione di modelli (ad esempio, è più probabile che un processo manuale porti a URL di hash o di versione non corrispondenti tra preload e il tag HTML effettivo che utilizza la risorsa).

Ad esempio, considera il seguente flusso:

GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]

Il server prevede che main.abcd100.css sarà necessario e suggerisce di precaricarlo utilizzando i suggerimenti iniziali:

103 Early Hints
Link: </main.abcd100.css>; rel=preload; as=style
[...]

Pochi istanti dopo, viene pubblicata la pagina web, incluso il CSS collegato. Purtroppo, questa risorsa CSS viene aggiornata di frequente e la risorsa principale è già cinque versioni avanti (abcd105) rispetto alla risorsa CSS prevista (abcd100).

200 OK
[...]
<HTML>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.abcd105.css">

In generale, punta a risorse e origini abbastanza stabili e in gran parte indipendenti dal risultato della risorsa principale. Se necessario, puoi dividere le risorse chiave in due parti: una stabile progettata per essere utilizzata con i suggerimenti iniziali e una più dinamica da recuperare dopo che il browser ha ricevuto la risorsa principale:

<html>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.css">
   <link rel="stylesheet" href="/experimental.3eab3290.css">

Infine, sul lato server, cerca le richieste di risorse principali inviate dai browser noti per supportare i suggerimenti iniziali e rispondi immediatamente con 103 Early Hints. Nella risposta 103, includi i suggerimenti di preconnect e preload pertinenti. Quando la risorsa principale è pronta, continua con la risposta normale (ad esempio, 200 OK se l'operazione è andata a buon fine). Per la compatibilità con le versioni precedenti, è una buona pratica includere anche le intestazioni HTTP Link nella risposta finale, magari anche aumentandole con le risorse critiche che sono diventate evidenti durante la generazione della risorsa principale (ad esempio, la parte dinamica di una risorsa chiave se hai seguito il suggerimento di "dividere in due"). Ecco come apparirebbe:

GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]
103 Early Hints
Link: <https://fonts.google.com>; rel=preconnect
Link: </main.css>; rel=preload; as=style
Link: </common.js>; rel=preload; as=script

Pochi istanti dopo:

200 OK
Content-Length: 7531
Content-Type: text/html; charset=UTF-8
Content-encoding: br
Link: <https://fonts.google.com>; rel=preconnect
Link: </main.css>; rel=preload; as=style
Link: </common.js>; rel=preload; as=script
Link: </experimental.3eab3290.css>; rel=preload; as=style
<HTML>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.css">
   <link rel="stylesheet" href="/experimental.3eab3290.css">
   <script src="/common.js"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">

Supporto browser

Sebbene 103 Early Hints sia supportato in tutti i principali browser, le direttive che possono essere inviate in un suggerimento iniziale variano a seconda del browser:

Supporto di Preconnect:

Supporto di Preload:

Chrome DevTools supporta anche 103 Early Hints e le intestazioni Link possono essere visualizzate nelle risorse del documento:

Per utilizzare le risorse dei suggerimenti iniziali, Disable cache non deve essere selezionato in DevTools, poiché i suggerimenti iniziali utilizzano la cache del browser. Per le risorse precaricate, Initiator verrà visualizzato come Early-hints e Size come (Disk cache):

È inoltre necessario un certificato attendibile per i test HTTPS.

Firefox non supporta esplicitamente 103 Early Hints come iniziatore in DevTools, ma le risorse caricate utilizzando Early Hints vengono visualizzate come cached nella colonna Transferred e, quando si fa clic su di esse, hanno un'intestazione della richiesta HTTP X-Moz: early hint.

Assistenza per server

Ecco un breve riepilogo del livello di supporto per i suggerimenti iniziali tra i software server HTTP open source più diffusi:

• Apache: supportato utilizzando mod_http2.
• H2O: supportato.
• NGINX: supportato.
• Node: supportato per http e http2

Attivare i suggerimenti iniziali nel modo più semplice

Se utilizzi una delle seguenti CDN o piattaforme, potresti non dover implementare manualmente i suggerimenti iniziali. Consulta la documentazione online del tuo fornitore di soluzioni per scoprire se supporta i suggerimenti iniziali o consulta l'elenco non esaustivo qui:

• Suggerimenti iniziali in Cloudflare
• Suggerimenti iniziali in Fastly.
• Suggerimenti iniziali in Akamai.

Come evitare problemi per i client che non supportano i suggerimenti iniziali

Le risposte HTTP informative nell'intervallo 100 fanno parte dello standard HTTP, ma alcuni client o bot meno recenti potrebbero avere difficoltà con queste risposte perché, prima del lancio di 103 Early Hints, venivano usate raramente per la navigazione web generale.

L'emissione di 103 Early Hints in risposta ai client che inviano un'intestazione della richiesta HTTP sec-fetch-mode: navigate dovrebbe inviare questi suggerimenti solo ai client più recenti che sanno di dover attendere la risposta successiva. Inoltre, poiché i suggerimenti iniziali sono supportati solo nelle richieste di navigazione (vedi limitazioni attuali), questo ha il vantaggio aggiuntivo di evitare di inviarli inutilmente ad altre richieste.

Inoltre, è consigliabile inviare i suggerimenti iniziali solo tramite connessioni HTTP/2 o HTTP/3 e la maggior parte dei browser li accetterà solo tramite questi protocolli.

Pattern avanzato

Se hai applicato completamente i suggerimenti iniziali alle tue pagine di destinazione principali e stai cercando altre opportunità, potresti essere interessato al seguente pattern avanzato.

Per i visitatori che si trovano alla n-esima richiesta di pagina nell'ambito di un percorso utente tipico, potresti voler adattare la risposta dei suggerimenti iniziali ai contenuti che si trovano più in basso e più in profondità nella pagina, in altre parole utilizzando i suggerimenti iniziali per le risorse a priorità inferiore. Questo potrebbe sembrare controintuitivo, dato che abbiamo consigliato di concentrarsi sulle sottorisorse o sulle origini a priorità elevata che bloccano il rendering. Tuttavia, quando un visitatore ha navigato per un po' di tempo, è molto probabile che il suo browser abbia già tutte le risorse critiche. Da questo punto in poi, potrebbe essere opportuno spostare l'attenzione sulle risorse a priorità inferiore. Ad esempio, questo potrebbe significare utilizzare i suggerimenti iniziali per caricare le immagini dei prodotti o JS/CSS aggiuntivi necessari solo per le interazioni utente meno comuni.

Limitazioni attuali

Di seguito sono riportate le limitazioni dei suggerimenti iniziali implementati in Chrome:

• Disponibile solo per le richieste di navigazione (ovvero la risorsa principale per il documento di primo livello).
• Supporta solo preconnect e preload (ovvero prefetch non è supportato).
• I suggerimenti iniziali seguiti da un reindirizzamento multiorigine nella risposta finale comporteranno l'eliminazione da parte dei browser delle risorse e delle connessioni ottenute utilizzando i suggerimenti iniziali.
• Le risorse precaricate utilizzando i suggerimenti iniziali vengono archiviate nella cache HTTP e recuperate da lì dalla pagina in un secondo momento. Pertanto, solo le risorse memorizzabili nella cache possono essere precaricate utilizzando i suggerimenti iniziali, altrimenti la risorsa verrà recuperata due volte (una volta dai suggerimenti iniziali e una volta dal documento). In Chrome, la cache HTTP è disattivata per i certificati HTTPS non attendibili (anche se procedi al caricamento della pagina).
• Il precaricamento delle immagini adattive (utilizzando imagesrcset, imagesizes o media) potrebbe non essere supportato utilizzando le intestazioni HTTP <link>poiché la finestra non viene definita fino alla creazione del documento. Nella migliore delle ipotesi, attenderanno la ricezione del documento, annullando i principali vantaggi di 103 Early Hints.

Altri browser hanno limitazioni simili e, come indicato in precedenza, alcuni limitano ulteriormente i suggerimenti iniziali 103 solo a preconnect only.

Relazione con H2/Push

Se hai familiarità con la funzionalità HTTP2/Push deprecata, potresti chiederti in cosa differiscono i suggerimenti iniziali. Mentre i suggerimenti iniziali richiedono un andata e ritorno per consentire al browser di iniziare a recuperare le sottorisorse critiche, con HTTP2/Push il server può iniziare a eseguire il push delle sottorisorse insieme alla risposta. Sebbene questo sembri fantastico, ha comportato un grave svantaggio strutturale: con HTTP2/Push era estremamente difficile evitare di eseguire il push delle sottorisorse che il browser aveva già. Questo effetto di "push eccessivo" ha comportato un utilizzo meno efficiente della larghezza di banda della rete, che ha ostacolato in modo significativo i vantaggi in termini di prestazioni. Nel complesso, i dati di Chrome hanno dimostrato che HTTP2/Push era in realtà un aspetto negativo per le prestazioni sul web.

Al contrario, i suggerimenti iniziali funzionano meglio in pratica perché combinano la possibilità di inviare una risposta preliminare con suggerimenti che lasciano al browser la responsabilità di recuperare o connettersi a ciò di cui ha effettivamente bisogno. Sebbene i suggerimenti iniziali non coprano tutti i casi d'uso che HTTP2/Push potrebbe gestire in teoria, riteniamo che i suggerimenti iniziali siano una soluzione più pratica per velocizzare le navigazioni.

Immagine in miniatura di Pierre Bamin.