Skip to content

TLTR: 103 Early hints è un’intestazione HTTP “non finale” del server con il codice di stato 103. Questa intestazione è speciale perché viene effettivamente inviata prima della risposta del server “reale”. Il tuo browser può utilizzare questa intestazione per recuperare risorse critiche prima che la pagina venga ricevuta e visualizzata.

Mi interessano molto i tecnicismi per velocizzare le pagine. Avevo scritto diverse guide su questo argomento concentrandomi sulle possibilità offerte dall’intestazione HTTP per ridurre i tempi di caricamento.

Continuo a seguire con molta curiosità gli sviluppi nelle tecnologie e standard per il web e da qualche mese Cloudflare ha rilasciato una nuova funzione interessante – lo status code 103. In questa guida vorrei parlare degli Early Hints, cosa significa il termine, come influisce sul caricamento del sito web e perché è importante.

Attivare la funziona Early Hints in Cloudflare
Attivare la funziona Early Hints in Cloudflare

Early what?

Vuoi conoscere un segreto sul funzionamento dei web browser? Quando caricano una pagina, i browser trascorrono un sacco di tempo senza fare nulla, in attesa di sapere cosa fare. Questa attesa influisce negativamente sulle prestazioni di caricamento delle pagine web. Early Hints vuole risolvere questo problema. Puoi vedere il tempo di attesa del browser usando i Chrome DevTools, in particolare con il tab Network.

Tempo di attesa del browser – Chrome DevTools

Early Hints è una funzionalità disponibile gratuitamente per tutti i clienti Cloudflare che possiamo torvare nella scheda Speed.

Inizieremo con la definizione del termine e spiegando di cosa si tratta in parole povere, in seguito entreremo più nel dettaglio sul funzionamento ed utilizzi per rendere più veloce il tempo di caricamento dei siti web.

Cosa significa Early Hints

Early Hints è una funzionalità della CDN che consente ai browser di iniziare una fase di pre-caricamento di alcuni asset richiamati nella pagina HTML, come dipendenze CSS, JS, Font o immagini. Inoltre, questo può essere utilizzato insieme ad altri Resource Hints Application Programming, come ad esempio il Preconnect.

Sebbene i browser provino in autonomia ad assegnare una priorità alle varie dipendenze che vengono richiamate in pagina, avere un aiuto è senza dubbio utile, anche perché questo aiuto arriva prima della pagina HTML, quindi sono suggerimenti forniti in anticipo!

Valore Priority assegnato dal browser alle varie dipendenze richiamate in pagina.

All’interno dell’intestazione HTTP inviata con la funzionalità Early Hints ci sono suggerimenti su quali risorse saranno necessarie, anzi, prioritarie per eseguire il rendering completo della pagina web che viene caricata dal browser.

Gli Early Hints aiutano quindi il browser a capire cosa serve prima e cosa può essere caricato dopo per accelerare il caricamento della pagina e generalmente a ridurre la latenza percepita dall’utente.

Come funziona?

I browser hanno bisogno di istruzioni su come eseguire al meglio il rendering di una pagina e quali risorse devono essere recuperate con maggiore priorità per completare il rendering di una determinata pagina web.

Queste istruzioni provengono da una risposta del server, come ad esempio il Preconnect o il Preload. Ma i server che inviano questo tipo di risposte spesso hanno bisogno di tempo per compilare queste risorse: questo è noto come “Server think time”. Mentre i server sono occupati a “pensare”… i browser restano inattivi e aspettano.

Early Hints sfrutta il “think time” del server per inviare in modo asincrono istruzioni al browser per iniziare a caricare le risorse mentre il server di origine sta compilando la risposta completa. Inviando questi suggerimenti a un browser prima che venga preparata la risposta completa, il browser può capire cosa deve fare per caricare la pagina web più velocemente per l’utente finale. Caricamenti di pagine più veloci e una minore latenza percepita dall’utente significano utenti più felici!

Più formalmente, Early Hints è uno standard web che definisce un nuovo codice di stato HTTP (103 Early Hints) che definisce nuove interazioni tra un client e un server. I codici di stato 103 vengono forniti ai client mentre viene preparata una risposta 200 OK (o errore) dal web server e contengono suggerimenti su quali risorse saranno probabilmente necessarie per eseguire il rendering completo della pagina web. Questi suggerimenti permettono al browser di sfruttare al meglio ogni istante di inattività per “prepararsi” al rendering della pagina.

Early Hints è quindi un codice di stato utilizzato nelle risposte HTTP non finali. È progettato per accelerare i tempi di caricamento complessivi della pagina fornendo al browser un primo segnale sulle dipendenze necessarie al rendering. Il browser prende questi suggerimenti e inizia a scaricare ed interpretare le risorse per quando arriverà la risposta finale di 200 OK dal server.

Per capire meglio i vantaggi portati da Early Hints vediamo come cambia il processo di creazione di una pagina web da parte di un client – browser, senza e con status code 103.

Senza Early Hints

  1. Parte una request Header dal client verso il server, e attende una risposta.
  2. Il web server genera le risorse, ad esempio una pagina web
  3. Il server invia una Response Header con relativa risorsa al Client
  4. Il client riceve la risorsa dal server, con status code finale
  5. A questo punto il client legge il doc HTML e capisce le dipendenze che deve scaricare per fare il rendering della pagina.
  6. Il client scarica le dipendenze
  7. Il client esegue il rendering della pagina web

Con Early Hints

  1. Parte una request Header dal client verso la CDN, e attende una risposta.
  2. La CDN invia una Response Header 103 al client indicandogli alcune risorse critiche da iniziare a scaricare e nello stesso momento gira la Request header al web server.
  3. Il client inizia a scaricare le risorse indicate dal 103
  4. Il web server genera le risorse, ad esempio una pagina web
  5. Il server invia una Response Header con relativa risorsa al Client
  6. Il client riceve la risorsa dal server, con status code finale
  7. A questo punto il client legge il doc HTML e ha gia pronte le dipendenze utili al rendering della pagina.
  8. Il client esegue il rendering della pagina web

L’invio di suggerimenti in anticipo su quali risorse aspettarsi prima che l’intera risposta venga compilata consente al browser di utilizzare il think time per recuperare le risorse necessarie e preparare parti della pagina visualizzata. Il rendering parte prima, si risparmia del tempo morto.

Cloudflare, in quanto CDN – rete perimetrale che si trova tra client e server, è ben posizionata per fornire questi suggerimenti ai client per conto dei server. Questo è vero per alcuni motivi:

  • 103 è un codice di stato sperimentale che i web server potrebbero non essere in grado di emettere da sole, principalmente per motivi legacy. Gran parte dei meccanismi che alimentano il web presuppongono erroneamente che le richieste HTTP corrispondano sempre 1:1 con le risposte HTTP. Questa premessa errata è incorporata nella maggior parte dei software per server HTTP, rendendo difficile per i server di origine emettere le risposte Early Hints 103 prima di una risposta “finale” 200. I server perimetrali Cloudflare che gestiscono questa complessità per conto dei clienti eludono queste sfide tecniche e fanno girare più velocemente il volano di adozione su questa nuova tecnologia.
  • Il vantaggio di Cloudflare è che si trova molto vicino agli utenti finali. Ciò significa che può fornire suggerimenti molto rapidamente, riempiendo anche le più piccole pause di tempo del server con informazioni utili che il client può utilizzare per iniziare subito a caricare le risorse.
  • Cloudflare esegue queste ottimizzazioni in automatico dato che vede già il flusso di richieste e risposte tra il server ed i client. Utilizza questi dati per generare automaticamente suggerimenti, senza che siano necessarie modifiche al web server.

Un esempio pratico?

Dopo aver implementato la funzoine Early Hints 103, non appena un browser richiede una tua pagina web, viene immediatamente restituita dalla CDN un’intestazione di 103 contenente alcuni “suggerimenti iniziali”. Ad esempio, questa intestazione comunica al browser che johnny.webp e style.css sono prioritari e che il browser dovrebbe iniziare a scaricarli prima ancora di ricevere la pagina HTML.

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

Nel frattempo, il web server può iniziare a generare la risposta HTTP “reale”. Per le pagine dinamiche, l’operazione potrebbe richiedere un po’ di tempo. Dopo che il server ha terminato la costruzione della pagina, viene inviata insieme alla sua Response Header.

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

Early Hints, possono rendere più veloce un sito web?

La risposta breve è sì. Gli Early Hints possono aumentare la velocità di caricamento delle pagine e quindi la velocità complessiva del sito, migliorare i tassi di conversione, la soddisfazione dei clienti, i Core Web Vitals, PageSpeed e altro ancora.

Il tipico ciclo di richiesta/risposta tra browser e server lascia molto spazio all’ottimizzazione. Quando digiti un indirizzo nella barra di ricerca del tuo browser e premi Invio, accadono una serie di cose per fornirti il ​​contenuto di cui hai bisogno, il più rapidamente possibile. Il tuo browser converte prima il nome host nell’URL in un indirizzo IP attraverso i DNS, quindi stabilisce una connessione iniziale al server in cui è archiviato il contenuto.

Dopo aver stabilito la connessione, viene inviata la richiesta effettiva – Request Header. Questa è spesso una richiesta GET con una serie di informazioni su ciò che il browser può e non può mostrare all’utente finale. A seguito della richiesta, il browser deve attendere che il server di origine invii i primi byte della risposta – Response Header prima che inizi il rendering della pagina. In questo momento, il server è impegnato a generare la pagina web (ad esempio: cerca cose nei database, interpreta template PHP, personalizza la pagina, rileva frodi, ecc.) prima di inviare una risposta al browser.

Una volta ricevuta la risposta per la pagina HTML originale, il browser deve quindi leggere ed analizzare la pagina, generare un Document Object Model (DOM) e iniziare a caricare le sottorisorse specificate nella pagina, come immagini, script e fogli di stile aggiuntivi.

HTTP/2 Server push non doveva risolvere questo problema?

In teoria si e, se impostato bene, funziona. Tuttavia, il server push ha sofferto di due problemi principali:

  • Il server push, se configurato male, potrebbe inviare file già presenti nella cache del browser.
  • Il server push non è stato ampiamente implementato.

Il server push l’ho implementato in questo web server con anche la gestione ottimale delle risorse già presenti nella cache del browser, ci ho perso qualche sera ma è stato divertente. Ora vogliono renderlo obsoleto perché molti lo hanno implementato male. Va sempre così!

Come accelerare il tempo di caricamento del tuo sito web

Tutto quello che devi fare è abilitare Early Hints e la tecnologia eseguirà l’accelerazione in automatico tramite il suo algoritmo. Sappi che non tutti i browser supportano ancora lo status code 103, poiché è ancora nella sua fase beta. I browser Google Chrome, Microsoft Edge e Mozilla Firefox intendono supportare Early Hints.

Crawler Hints

Visto che parliamo di una nuova funzionalità di Cloudflare, credo sia utile menzionare anche Crawler Hints. Crawler Hints è abilitato per impostazione predefinita e fornisce informazioni ai bot e crawler dei motori di ricerca circa quali URL meritano una scansione perché sono stati aggiornati.

Hai presente l’attributo lastmod della sitemap.xml? Ecco, è la stessa cosa, come se fosse un remake nostalgico.

Comunicare agli spider quando un contenuto viene aggiornato è utile perchè:

  • Lo spider conosce esattamente il momento in cui viene aggiornato un contenuto.
  • La scansione avviene tempestivamente.
  • Si evitano scansioni inutili di pagina sempre uguali.
  • Si riduce il consumo di risorse in generale riducendo l’impatto ambientale delle attività di web crawling.

Crawler Hints è disponibile per i clienti Cloudflare e assicura che i motori di ricerca siano sempre aggiornati sui contenuti nuovi e aggiornati da scansionare.

Crawler Hints può ridurre il traffico dei bot sul tuo web server, migliorando il consumo di risorse e limitando l’impatto ambientale. In aggiunta a ciò, le prestazioni del tuo sito web potrebbero migliorare dato che il web server sarà più “scarico” e potrà lavorare quasi solo per gli utenti.

Per abilitare la funzione Crawler Hints devi aprire Cloudflare e navigare nella sezione Caching – Configuration.

Conclusione

In questo articolo abbiamo visto cos’è e come funziona lo status code 103 Early Hints e come può aiutarci a velocizzare il rendering delle pagine web. Spero di averti dato qualche input per invogliarti ad approfondire questi aspetti tecnici e spinere al massimo il tuo web server ;)

Articoli correlati

Autore

Commenti |2

Lascia un commento Lascia un commento
  1. alex.a 1 commento

    complimenti per l’articolo, tuttavia potresti linkare qualche sito che utilizza questa tecnica, ho provato pagespeed su questa tua pagina e non ha dei valori altissimi, mi chiedo se l’hai ottimizzata

    grazie

    1. Giovanni Sacheli 759 risposte

      Ciao Alex, grazie per il tuo commento e per aver verificato i punteggi PageSpeed della mia pagina. Attualmente sto lavorando sulla versione aggiornata del sito web e ho disattivato alcune personalizzazioni tecniche per rendere più agevole il lavoro del team di sviluppo.

      Per quanto riguarda la tua richiesta di linkare qualche sito che utilizza la tecnica di cui parlo nell’articolo, puoi analizzare questa pagina. Infatti, il server di questo sito utilizza il preload, come puoi verificare guardando gli HTTP “HINTS” nell’intestazione HTTP delle pagine web.

      Mi scuso per i punteggi PageSpeed scarsi attuali, ma appena avrò la nuova versione del sito potrò lavorarci di nuovo e migliorare la situazione. Se hai altre domande o curiosità, non esitare a chiedere! Grazie ancora per aver commentato il mio articolo.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Ultimi articoli aggiornati

Richiedi un preventivo SEO e Google Ads

Porta il tuo sito web al livello successivo con l’esperienza di EVE Milano. La nostra agenzia di Search Marketing ha ricevuto oltre 1146 richieste di preventivo, un segnale chiaro della fiducia che imprenditori e manager, come te, ripongono nella nostra specializzazione tecnica e verticale nella SEO e PPC. Se la tua organizzazione cerca competenze specifiche per emergere nei risultati di Google, noi siamo pronti a fornire quel valore aggiunto. Richiedi un preventivo ora e scopri la differenza tra noi e gli altri.
Richiedi un preventivo

Vuoi ricevere un avviso al mese con le nuove guide pubblicate?

Iscriviti alla newsletter!

Informativa sui cookies

Noi e terze parti selezionate utilizziamo cookie o tecnologie simili per finalità tecniche e, con il tuo consenso, anche per le finalità di esperienza e misurazione come specificato nella cookie policy. Puoi liberamente prestare, rifiutare o revocare il tuo consenso, in qualsiasi momento, accedendo al pannello delle preferenze. Il rifiuto del consenso può rendere non disponibili le relative funzioni. Usa il pulsante “Accetta” per acconsentire. Usa il pulsante “Rifiuta” per continuare senza accettare.