SEO

Early Hints: come migliorare il load time dei siti web con Cloudflare

Cloudflare ha attivato un nuovo servizio per migliorare i tempi di caricamento delle pagine web basato sugli Early Hints. I test indicano una riduzione del load time di oltre il 30%. Ci avviamo verso tecnologie che miglioreranno sempre di più l'esperienza utente, e di conseguenza la SEO.

Alessio Pomaro

30 set 2021 • 5 min read

Early Hints: come migliorare il load time dei siti web con Cloudflare

Sai che i browser trascorrono una grande quantità di tempo in attesa che gli venga detto cosa fare?

Questo influisce inevitabilmente sulle prestazioni di caricamento delle pagine web. Cloudflare ha recentemente annunciato il supporto per gli Early Hints (in versione beta ed attivabile gratuitamente), che va a migliorare notevolmente la velocità, riducendo i tempi d'attesa.
I test hanno fatto registrare un miglioramento di oltre il 30% sul tempo di caricamento delle pagine visitate per la prima volta.

Cosa sono gli Early Hints?

I browser hanno bisogno di istruzioni sulle risorse da recuperate per renderizzare una determinata pagina web. Tali informazioni provengono da una risposta del server che necessita del tempo per essere generata. Questo tempo determina il cosiddetto "think time" del server, durante il quale il browser rimane inattivo ed attende.

Gli Early Hints sfruttano il "think time" del server per inviare in modo asincrono al browser le istruzioni per iniziare a caricare le risorse, mentre il server genera la risposta completa. Grazie a questa dinamica, il browser può capire cosa fare per caricare la pagina web più velocemente per l'utente.

Caricamenti più rapidi delle pagine e bassa latenza percepita, si traducono in utenti più felici!

Nello specifico, Early Hints è uno standard web che definisce un nuovo status code (103 Early Hints), il quale precisa nuove interazioni tra un client e un server. I codici 103 vengono restituiti ai client mentre viene preparata una risposta "200 OK" (durante il cosiddetto "think time") e contengono informazioni sulle risorse che probabilmente saranno necessarie per eseguire il rendering completo della pagina web. Questo fa si che, mentre attende la risposta, il browser impieghi quel tempo per recuperare risorse necessarie e comunque per prepararsi per la risposta completa.

Lo schema di funzionamento di Early Hints con Cloudflare

Perché quella di Cloudflare è una soluzione interessante?

Fondamentalmente per 3 motivi.

Il 103 è uno status code sperimentale, e le strutture server potrebbero avere difficoltà nel mettere a disposizione questo tipo di implementazione. La maggior parte dei server web, infatti, presuppone che alle richieste HTTP corrispondano sempre risposte HTTP; questa premessa errata rende complessa la generazione di Early Hints 103 prima della risposta finale "200 OK".
Proprio per questi motivi, il servizio di Cloudflare va a sgravare i clienti da questa complessità di implementazione, offrendo solo vantaggi.
Il fatto che gli Early Hints vengano generati dalla CDN, rende la risposta molto più veloce, per una questione di distribuzione dei contenuti nel mondo. Questo si traduce nella possibilità di più informazioni.
I dati delle richieste che passano attraverso la CDN, quindi delle risorse che vengono richieste, vengono utilizzati per generare automaticamente gli Early Hints, senza alcun accorgimento da implementare lato server.

"Entrepreneurs know that first impressions matter. Shopify's own data shows that on average, when a store improves the speed of the first page in the buyer journey by 10%, there is a 7% increase in conversion. We see great promise in Early Hints being another tool to help improve the performance and experience for all merchants and customers."
— Colin Bendell, Director Performance Engineering at Shopify

Early Hints: un esempio di funzionamento

Ricapitolando, Early Hints è uno status code utilizzato prima delle risposte HTTP finali. È progettato per accelerare i tempi di caricamento complessivi della pagina fornendo al browser delle informazioni preventive in merito alle risorse che potrebbero essere necessarie alla risposta finale. Il browser utilizza tali "suggerimenti" per iniziare a preparare la pagina in attesa della risposta finale "200 OK" dal server.

Vediamo un esempio del ciclo richiesta/risposta con l'uso di Early Hints.

Richiesta del client

GET / HTTP/1.1 
Host: example.com

Risposte del server

Early Hint Response

HTTP/1.1 103 Early Hints
     Link: ; rel=preload; as=style
     Link: ; rel=preload; as=script

"Think time" del server

Full Response

HTTP/1.1 200 OK
     Date: Thurs, 30 Sept 2021 11:30:00 GMT
     Content-Length: 1234
     Content-Type: text/html; charset=utf-8
     Link: ; rel=preload; as=style
     Link: ; rel=preload; as=script
...

Le problematiche rilevate e le soluzioni di Cloudflare

Standard come Early Hints spesso non decollano a causa di un problema molto semplice:

i client non hanno motivo di supportare nuovi standard senza il supporto lato server, e a loro volta, chi gestisce i server non è motivato ad implementare il supporto senza che i client "parlino la loro lingua".

Come detto in precedenza, inoltre, Early Hints è particolarmente complesso da implementare, considerando le attuali (più diffuse) configurazioni server.

Questi aspetti sono stati risolti in due modi da Cloudflare:

attraverso una stretta collaborazione con Google Chrome ed altri browser per creare il supporto;
sviluppando in modo da inviare i dati dalla CDN ai client senza richiedere operazioni al server web. Questo è stato possibile anche grazie al contributo di Shopify.

Come vengono determinate le risorse da precaricare?

Nel momento in cui la CDN riceve le risposte dal server, vengono analizzati gli header delle pagine ed estratte le risorse specificate dai rel "preload" e "preconnect".

Tali dati vengono memorizzati nella cache della CDN, pronti per essere proposti come Early Hints nel momento in cui quella pagina verrà richiesta nuovamente, in attesa della risposta completa.
Quando diventa disponibile la risposta completa, viene verificato se le risorse in cache hanno bisogno di essere aggiornate.

Smart Early Hints

Cloudflare sta anche lavorando alla versione successiva del sistema, che prenderà il nome di Smart Early Hints, la quale sfrutterà il Machine Learning per determinare i "suggerimenti" da inviare anche quando non vengono specificati negli header.
Come? Analizzando i cicli storici di richiesta/risposta e deducendo quali risorse vanno precaricate per migliorare le prestazioni delle pagine.

Prestazioni

Utilizzando Web Page Test, il team di Cloudflare ha osservato un miglioramento superiore al 30% per quanto riguarda il tempo di caricamento di una pagina nel browser. L'immagine che segue è un esempio.