La struttura Pagespeed di Google, a cui siamo abituati da anni, è costruita per garantire che i siti web vengano caricati e serviti rapidamente. Producendo parametri misurabili e sfruttando i dati anonimi raccolti dalla quota di mercato di Chrome, Google utilizza queste metriche come indicatori SEO. Con l'introduzione di Interaction to Next Paint (INP) nel 2022, l'attenzione si è spostata dalla semplice velocità di caricamento della pagina a una prospettiva più ampia delle prestazioni web. INP non misura solo la velocità di caricamento di una pagina, ma anche la velocità con cui vengono elaborate le interazioni dell'utente sulla pagina. In sostanza, trasforma l’esperienza di navigazione del sito in una metrica di Pagespeed.
Sul blog di Kerem, il termine "General Interaction Delay" viene suggerito come adatto a questo concetto, cosa che Google spiega bene anche nel proprio video. Tuttavia, per comprendere appieno questa metrica, approfondiremo l'argomento nelle sezioni seguenti.
Qual è la spiegazione della durata INP?
La durata dell'INP comprende:
- Il tempo che intercorre tra l'interazione dell'utente con la pagina e l'esecuzione del gestore eventi.
- Il tempo di esecuzione dello script.
- Il tempo che intercorre tra l'esecuzione del codice e la visualizzazione dell'output all'utente.
Questi processi in genere si verificano nell'arco di pochi millisecondi, ma sui dispositivi mobili, in particolare sui telefoni Android più vecchi con bassa potenza della CPU, tali ritardi (latenza) possono spesso essere evidenti. Vale la pena notare che i dati INP, come altri dati Lighthouse, vengono raccolti in modo anonimo e valutati in base a 75o percentile. Pertanto, l'obiettivo è creare applicazioni che funzionino bene su dispositivi medi piuttosto che solo su dispositivi di fascia alta.
Esempi di vita reale di durata INP
Ecco alcuni esempi di vita reale tratti dalle pagine Internet che visitiamo quotidianamente per spiegare questo concetto:
Immissione dell'indirizzo su un sito di e-commerce
Quando fai acquisti su un sito di e-commerce e inserisci l'indirizzo per la spedizione, devi prima selezionare la provincia. Quindi, quando fai clic sulla casella di selezione per scegliere il distretto, attendi qualche istante per il caricamento del risultato Ajax e, dopo un certo tempo, vengono caricate le informazioni sul distretto. Questo è un buon esempio di INP. Migliorare l'esperienza dell'utente in questo esempio potrebbe comportare l'aggiunta di un "indicatore di caricamento" per informare l'utente del processo Ajax.
Selezione dell'ordinamento
Quando si utilizzano i filtri nelle pagine di elenco dei prodotti, se i prodotti filtrati non vengono gestiti correttamente dopo aver fatto clic su una casella di controllo, aumenterà l'INP. L'utilizzo di JS meno complesso e la considerazione dell'esperienza dell'utente durante le operazioni di filtro possono aiutare a mantenere il valore INP il più alto possibile.
Gallerie fotografiche dei prodotti
Il tempo che gli utenti attendono per il caricamento della galleria fotografica dopo aver fatto clic sulla foto di un prodotto nelle pagine dei dettagli del prodotto può potenzialmente influire sull'INP.
Pulsante di prenotazione
Il ritardo di interazione tra il clic sul pulsante "Effettua una prenotazione" e la pagina successiva è un esempio di INP.
Pulsante Aggiungi al carrello
I millisecondi di ritardo quando si fa clic sul pulsante "Aggiungi al carrello" e si chiede se l'articolo è stato aggiunto al carrello o non definisce perfettamente INP.
Come visto in questi esempi, le trappole INP sono presenti in scenari che influenzano sia il SEO che i tassi di conversione diretta.
Come migliorare l'INP?
- Utilizza librerie frontend JS aggiornate: Migliorare le prestazioni utilizzando le moderne librerie frontend JS come Vue, React e Angular è vantaggioso poiché offrono vantaggi in termini di prestazioni e riusabilità.
- Riduci al minimo la complessità delle librerie JS: È consigliabile utilizzare librerie JS meno complesse. Personalmente, consiglio di evitare il più possibile jQuery.
Livelli metrici INP accettabili
I valori di soglia per i livelli INP buono, medio e scarso sono 200 millisecondi e 500 millisecondi. Mantenere l'INP al di sotto di queste soglie è fondamentale per mantenere una buona esperienza utente e prestazioni web complessive.
