Interaction Next Paint: cos’è questa metrica e come ottimizzare il sito
Cosa troverai in questo articolo. Interaction Next Paint è la metrica che a partire dal prossimo anno rimpiazzerà l’ormai obsoleto First Input Delay, inaugurato nel 2021, nell’ambito dei Core Web Vitals, ovvero i parametri con cui Google valuta l’usabilità e accessibilità dei siti web. Alla base della nuova metrica c’è un nuovo concetto, quello di interazione, che misura la responsività di un sito web. Questo parametro si compone di tre elementi diversi, per ognuno dei quali esistono strategie di ottimizzazione fondamentali per la SEO che hanno a che vedere soprattutto con il codice HTML del sito.
Indice
Fra non molto sarà il momento di dire addio a una metrica che ha accompagnato il nostro lavoro di web marketing a partire dal 2021, il First Input Delay, e dare il benvenuto a un aggiornamento chiamato Interaction Next Paint. Sarà questo a rappresentare il nuovo punto di riferimento di Google per valutare l’esperienza degli utenti su un sito web. Se siete a digiuno di questi concetti o volete fare il punto della situazione, in questo articolo vi racconteremo in cosa differiscono la nuova e la vecchia metrica e quali azioni di ottimizzazione è possibile intraprendere.
Interaction Next Paint (INP): cosa significa questa metrica?
Interaction Next Paint è una nuova metrica per valutare la responsività di un sito web, ovvero quanto rapidamente è in grado di rispondere agli input degli utenti. Misura dunque la quantità di tempo che trascorre fra quell’input (che può essere un clic del mouse, un tap su uno schermo touch o la pressione di un tasto della tastiera) e l’aggiornamento della pagina. Il valore dell’INP è inversamente proporzionale alla lunghezza di quel periodo di tempo: a un INP basso corrisponde un sito con un livello soddisfacente di responsività.
La metrica è particolarmente importante per quei siti web che prevedono interazioni frequenti degli e fra gli utenti, come le piattaforme social o gli e-commerce. Ma cosa sono le interazioni? Non si tratta semplicemente del clic su un pulsante su uno schermo, ma di compiere una serie di microazioni collegate fra loro e contate come una singola interazione. Ad esempio, all’interno dell’azione di cui prima, il momento in cui il mouse non è attivo, quello in cui il mouse si muove verso il pulsante e il clic sul pulsante rappresentano un’unica azione.
Come interpretare l’INP?
Poiché alcune interazioni sono più lente a caricare di altre, specialmente quelle più complesse, Google misura il tempo di reazione necessario al sito per fornire un qualche tipo di feedback visivo (anche semplicemente l’icona di caricamento pagina); qualcosa, cioè, che faccia capire all’utente che il processo avviato ad esempio con un clic è effettivamente in corso.
La differenza fra First Input Delay e Interaction Next Paint è che mentre il primo misura unicamente la primissima interazione dell’utente e nello specifico il ritardo nel completamento dell’evento nella sua globalità, l’Interaction Next Paint misura invece il ritardo di ogni singola interazione di un utente con un sito, ritardo “delimitato” dalla comparsa di un primo responso visivo e non dal completamento effettivo dell’azione intera.
Le tre componenti che fanno parte dell’INP sono ritardo dell’input, tempo di elaborazione e ritardo nella presentazione. Il primo valore rappresenta il tempo trascorso fra il clic dell’utente e la comparsa di un responso visivo; il secondo è invece il tempo necessario per caricare il codice in risposta all’interazione; il terzo, infine, è il tempo necessario al browser per capire l’ubicazione corretta per il caricamento dei blocchi di contenuto.
Come si ottimizza un sito per l’Interaction Next Paint?
Il punto di partenza è ovviamente la misurazione dell’INP per il tramite di dati raccolti sul campo con strumenti come il Chrome UX Report o simili. In alternativa, qualora non abbiate tempo o budget a sufficienza, potete ricorrere allo strumento PageSpeed Insights di Google, che permette però di visualizzare i dati relativi a singole pagine; esistono tuttavia estensioni di Chrome in grado di fornire un prospetto più rapido delle performance Core Web Vitals di tutte le pagine di un sito web.
Il processo di ottimizzazione andrà declinato in base alle tre diverse componenti dell’Interaction Next Paint citate in precedenza, e cioè:
- Ritardo dell’input: per ottimizzare questo parametro, la strategia migliore è quella di minimizzare i file JavaScript, attivare la compressione GZip e usare un CDN (Content Delivery Network) per il caricamento dei file JavaScript; un altro consiglio è quello di usare i web worker per eseguire gli script JavaScript in background indipendentemente dagli script dell’interfaccia utente;
- Tempo di elaborazione: per quanto riguarda il processing time, cercate di eliminare le funzioni callback non essenziali, dividendo il loro lavoro in task separati e facendo in modo che quelli necessari per gli aggiornamenti grafici di pagina vengano eseguiti per primi;
- Ritardo nella presentazione: qui una delle strategie operative più efficaci è quella di ridurre le dimensioni del DOM. Questo può essere fatto “ripulendo” il codice ed eliminando i plugin non necessari, evitando le dichiarazioni CSS troppo complesse ma anche il ricorso ai page builder. Inoltre, il presentation delay può essere ottimizzato anche presentando all’utente segnali visivi come pop-up e barre di caricamento che mostrino l’avanzamento dell’operazione o confermino la validità dei dati inseriti.
Azioni, dunque, che richiedono competenze di programmazione specifiche, ma che devono essere orchestrate e coordinate insieme al vostro team o figura SEO di riferimento, poiché rivestono un ruolo estremamente importante nel posizionamento del vostro sito sui motori di ricerca.
Coming soon:
La prossima settimana, sul blog di Seed, parleremo dell’ottimizzazione della UX degli accordion sui siti web mobile. Tornate a leggerci!
