Early Hints 103 – cos’è e come funziona

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.

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.

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!

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.

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 ;)