First Input Delay, cos’è e come ottimizzarlo

Postato in data 27 Maggio 2021 da Riccardo Esposito

Il First Input Delay – o ritardo del primo input utente – è una metrica presa in considerazione dai Core Web Vitals. Ovvero gli elementi più importanti, almeno secondo la valutazione di Google, nella definizione dell’esperienza utente e che comprendono altri aspetti come il Cumulative Layout Shift e il Largest Contentful Paint.

First Input Delay, cos'è e come ottimizzarlo

Tutto questo, insieme ad altri segnali come la presenza dell’HTTPS e di una navigazione sicura, rende un servizio migliore alla page experience che è ormai diventata un fattore di ranking.

Insomma, in poche parole stiamo dicendo che tutto ciò che riguarda la UX si intreccia in modo evidente con la SEO. E che il First Input Delay è uno degli ingredienti fondamentali di questo equilibrio. Ma di cosa si tratta esattamente? Scopriamo insieme questo fattore decisivo.

Cos’è il First Input Delay, definizione

Con il termine First Input Delay intendiamo uno dei tre segnali web essenziali. Nello specifico si tratta di quello che misura la capacità di una pagina di interagire nel minor tempo possibile.

Nello specifico, il FID indica il tempo che trascorre tra la prima interazione dell’utente con la pagina e la risposta. Questo perché è sicuramente vera l’importanza di avere un First Contentful Paint (FCP, velocità di caricamento percepita) adeguato all’esperienza utente, ma per renderla tale c’è bisogno che la persona riceva feedback.

Per sintetizzare: non basta far caricare la pagina in tempi rapidi, deve anche funzionare tutto quello che serve al tuo pubblico per essere soddisfatto in tempi utili. E il First Input Delay fa questo: permette al webmaster o al SEO expert di scoprire il tempo trascorso tra, ad esempio, il click su un bottone o un elemento mobile e il momento in cui il browser dà la risposta.

Per approfondire: a cosa serve il robots.txt

FID basso o alto: il valore ideale?

Per dare una definizione chiara di come si gestisce questa metrica e di come può aiutarti a migliorare il tuo sito web, possiamo dire che si tratta di una proporzione diretta tra FID alto e bassa UX: minore sarà il First Input Delay e migliore sarà l’esperienza utente.

First Input Delay, cos'è e come ottimizzarlo

Da questo punto di vista si tratta di una metrica abbastanza facile da definire: per fornire una buona pagina web ai tuoi utenti, il ritardo dovrebbe rientrare nei 100 millisecondi o meno.

Perché valutare questo ritardo?

Il divario tra il momento in cui un elemento appare sulla pagina e quello in cui risponde all’interazione umana dipende da una serie di elementi che devi monitorare con attenzione.

Anche se un ritardo di qualsiasi tipo porta comunque a una cattiva esperienza dell’utente, Google suggerisce di puntare soprattutto su questo parametro per alcuni motivi fondamentali.

In primo luogo perché sarà la prima impressione dell’utente sulla reattività del tuo sito e le prime impressioni sono fondamentali per plasmare l’approccio sulla qualità e l’affidabilità.

Il miglioramento della prima interazione con l’utente del sito avrà il maggiore impatto sul miglioramento dell’interattività complessiva del web: le attività per migliorare questo aspetto porta vantaggi a ogni dettaglio della risorsa anche se possono esserci delle differenze.

Come monitorare il First Input Delay

Google fornisce diversi strumenti che consentono di osservare e valutare il First Input Delay che resta una metrica da misurare sul campo. Per una visione d’insieme di un singolo progetto web si può usare la Search Console che fornisce un’intera sezione dedicata alla page experience in cui troviamo anche i Core Web Vitals con l’andamento delle pagine.

Poi, per valutare le singole risorse possiamo usare Lighthouse. Ovviamente c’è Pagespeed Insight. In particolar modo quest’ultimo tool consente di avere una legenda con i principali Core Web Vitals in primo piano con le voci da ottimizzare per avere dei risultati migliori. Quali sono, appunto, i passaggi da rispettare per migliorare il FID? Ecco una guida base.

Ottimizzazione base del First Input Delay

Partiamo da un presupposto chiaro: maggior semplicità vuol dire sempre un minor numero di possibili problemi. Avere un sito web semplice e snello porta sempre dei vantaggi.

Soprattutto lato Core Web Vitals. Lo stesso discorso si può fare per l’acquisto di un hosting di qualità. Ma non bastano questi ingredienti per ottimizzare il First Input Delay. Devi ridurre:

Tempi di esecuzione JavaScript

Bello usare JavaScript sulle pagine web ma questa scelta può rallentare il sito web in modi differenti. La soluzione? Usa un buon plugin per l’ottimizzazione di questo snodo, inviando solo il codice di cui gli utenti hanno bisogno e minimizza al massimo ciò che serve.

Inoltre, rimuovi tutto ciò che è praticamente inutile. Ad esempio: pulsanti di condivisione social, video embedded, chat, banner pubblicitari, librerie di supporto.

Lavoro sul thread principale

Il thread principale del processo di rendering gestisce la maggior parte del codice: analizza HTML e crea il DOM, definisce il CSS e applica gli stili, valuta ed esegue JavaScript. Si occupa anche degli eventi relativi all’utente.

First Input Delay

Qui andiamo alla fonte del problema: se il thread principale è intasato, la tua pagina web potrebbe non rispondere alle interazioni, causando un aumento del First Input Delay. Come suggerisce anche Google, grazie a Lighthouse puoi individuare tutto ciò che crea problemi su questo fronte e intervenire di conseguenza.

Codice di terze parti

Per aggiungere un banner dinamico, un bottone di share o un qualsiasi altro elemento legato a servizi esterni si aggiunge uno script – ospitato su un dominio diverso – nel codice HTML.

Queste soluzioni possono influire sulle prestazioni di caricamento della pagina. E in particolar modo sul First Input Delay. Come risolvere? Usa Lighthouse per analizzare i tempi: se si superano i 250 millisecondi per voce c’è bisogno di ottimizzare o eliminare.

Da leggere: cos’è il rel=”canonical” e a cosa serve

Richieste e dimensioni file

Torniamo alla base, alle origini del nostro lavoro: sintetizzare, ridurre, comprimere tutto ciò che può essere migliorato e snellito. Le richieste di file CSS e JavaScript bloccano il rendering, i browser non possono visualizzare il contenuto sullo schermo finché continuano le richieste e il tuo obiettivo è ridurre tutto ciò con plugin specifici o intervento manuale.

Concentriamoci sul visual: le richieste per caricare le immagini non bloccano il rendering come CSS e JavaScript, ma possono influire negativamente sulle prestazioni di caricamento. Questo soprattutto da mobile quindi è importante ridurre il peso e definire le dimensioni con precisione.

Passiamo ai font: Il caricamento lento dei caratteri può portare alla presenza di blocchi invisibili, quindi imposta un carattere sempre disponibile in modo da non creare mancanze per l’interazione. Tutto questo, chiaramente, si inserisce in un processo di ottimizzazione generale che inizia sempre da una buona base. Come quella che abbiamo già citato: la scelta di un server di qualità.

Clicca per votare questo articolo!
[Voti totali: 0 Media: 0]

Discussione

Lascia un commento

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