Come migliorare il first input delay? (Google Search Central)

Entriamo in un sito, in una app o carichiamo un video, e al posto del contenuto desiderato appare una schermata di caricamento che richiede vari secondi per ultimare il processo. Un’enormità di tempo, per i nostri standard. Purtroppo è un’esperienza che abbiamo vissuto tutti.

Questi ritardi per i proprietari di siti si traducono in una maggiore difficoltà nel raggiungere gli obiettivi aziendali (conversioni). Perciò occorre far sì che gli utenti del nostro sito debbano sottostare al minor numero di delay possibile.

Il First Input Delay (FDI) ci da un’idea dell’importanza che questo aspetto riveste nel nostro sito.

In questo video di Google Search Central (del quale andrò a tradurre i passi salienti) scopriremo come perfezionare il First Input Delay per far fare al sito web una buona impressione da subito.

Cos’è il First Input Delay?

Il First Input Delay è un indice che indica il tempo che una pagina web impiega per essere reattiva. Esso è un indice influenzato dalle reali reazioni ai comportamenti degli utenti.

L’FDI è una nuova web API appartenente al nuovo gruppo dei core web vitals.

Il First Input Delay indica quanti millisecondi servono al tuo sito a reagire quando un utente interagisce con esso. Per esempio, può trattarsi del tempo necessario per generare un’azione quando un utente clicca su un video o digita un testo. Possiamo considerarlo quindi un indice del tempo necessario alla pagina per essere interattiva.

Ogni URL della pagina web viene analizzato indipendentemente. Perciò, ad esempio, l’homepage potrebbe avere un ottimo FDI mentre una pagina prodotta essere carente sotto quel punto di vista.

I numeri che vengono restituiti dall’indicatore rappresentano una misura dell’esperienza che gli utenti stanno provando sul sito. Il punteggio FID proviene dal report di user experience mensile di Chrome.

Come analizzare il First Input Delay?

Google Search Console fornisce una serie di informazioni preziosissime per valutare questo e altri parametri attinenti alla user experience.

Pagespeed Insights permette di valutare velocemente le prestazioni del proprio sito web. Si tratta di una versione hostata del Lighthouse SEO tool del Chrome dev tools. Il tool analizza le performance degli elementi in un ambiente di test. I tuoi URL devono essere online almeno per un mese per essere inclusi nel Chrome user experience report.

Se ciò è avvenuto puoi vedere i reali risultati core web vitals.

Un buon obiettivo da raggiungere consiste nell’avere un 75% degli utenti del sito con un first input delay inferiore a 100 millisecondi.

100 millisecondi è stato preso come soglia entro la quale le persone percepiscono l’interazione come istantanea. Da 100 a 300 millisecondi inizia a diventare problematica.

Oltre i 300 millisecondi la user experience ne risente notevolmente.

Da notare inoltre che l’FID è realmente derivante dall’interazione degli utenti. Quindi se hai una pagina che non interagisce in alcun modo (es. le persone non cliccano sul pulsante) non avrai un risultato. Nel caso di pagine non ancora incluse nel Chrome user experience report bisognerà aspettare che vengano registrate.

Come migliorare il First Input Delay?

Qui trovi alcuni suggerimenti per ottimizzare il First Input Delay.

Il ritardo può essere collegato all’esecuzione di Javascript sul sito. Le richieste di una pagina partono tutte insieme ma possono essere recepite dal browser soltanto una per volta, perciò un po’ di codice può richiedere anche molto tempo. Controlla se stai caricando troppo Javascript. Ogni Javascript più grande di 100 kilobyte è troppo ingombrante.

Il codice può essere splittato in blocchi per ridurre il suo peso a carico della pagina.

In generale l’ottimizzazione del codice Javascript dovrebbe tenere conto del quando, del dove e del perché dell’esecuzione del codice, se vuoi ridurne l’uso al minimo indispensabile per massimizzare il potenziale del sito.

Il caricamento dovrebbe avvenire utilizzando gli attributi async o defer sul tag dello script.

Con defer comunichi che non andrai a cambiare il layout della pagina, così non ne bloccherà il rendering mentre verrà caricato asincrono.

Async si avvicina a defer ma in aggiunta dichiara di non dover aspettare altri script. In pratica dici al browser di eseguire lo script senza bloccare in attesa nient’altro.

Anche se il tuo codice non ha bisogno di essere splittato, potrebbero comunque averne bisogno i tuoi task. Un task lungo è uno che richiede più di 50 millisecondi per completarsi.
Se hai problemi con il FID puoi dare un’occhiata ai task per appurare quali interventi si potrebbero mettere in atto. In Chrome dev tools i task lunghi sono messi in risalto.

Un task lungo può essere spezzato in istruzioni più elementari. Si può racchiudere del codice in set timeout o richiamare frame di animazione, ma la scelta più indicata dipende dal caso in questione.