20 Mag Interaction to Next Paint (INP): la nuova metrica per ottimizzare il caricamento del tuo ecommerce
Sicuramente avrete sentito parlare del TTFB (Time to First Byte), una metrica molto importante che definisce i tempi di caricamento di una pagina web. Il “tempo al primo byte” indica la velocità che un server impiega per rispondere alle richieste degli utenti. Negli ultimi giorni, come dichiarato dal documento ufficiale, PageSpeed Insights di Google ha inserito una nuova metrica relativa a Lighthouse: l’Interaction to Next Paint o INP (in italiano: interazione fino alla successiva visualizzazione) . Vediamo insieme cos’è e quali sono le principali differenze tra le due metriche.
Partiamo dal Time To First Byte: cos’è?
Il TTFB è la prima metrica da tenere sotto controllo quando si parla di velocità di un sito web. Infatti, questo valore misura quanto deve aspettare il browser di un utente o lo spider dei motori di ricerca prima di ricevere un segnale dal server.
Minore è il tempo di attesa, maggiore sarà la qualità della pagina web perché più veloce e responsive. Gli utenti, infatti, evitano le pagine con caricamenti troppo lenti e questo potrebbe penalizzare il tuo sito web lato SEO.
Il TTFB si misura valutando tre parametri: la richiesta fatta al server, l’elaborazione e l’invio al browser o allo spider che visita il sito web. Uno dei metodi principali per migliorarlo è affidarsi a un hosting di qualità, ottimizzare il codice e aggiungere un sistema di cache.
Cos’è l’Interaction To Next Paint o INP
L’INP è una nuova metrica interessante per la misurazione delle performance di un sito web. Viene definita da Google “latenza di interazione complessiva” e rappresenta il tempo necessario per interagire con l’intera pagina. Più è basso il valore dell’INP, più la pagina viene definita reattiva.
Una pagina web si definisce reattiva quando risponde rapidamente alle interazioni dell’utente. Possiamo riferirci a feedback visivi che ci confermano l’aggiunta di un articolo al carrello, conferme di invio modulo, e così via.
L’INP, valutando la reattività, registra la latenza di tutte le interazioni durante l’intero ciclo di vita della pagina. Viene calcolata considerando l’interazione più lunga che si verifica quando un utente visita una pagina.
La durata di un’interazione, a sua volta, dipende da:
- il ritardo di input, ovvero il tempo tra l’interazione dell’utente con la pagina e l’esecuzione dei gestori di eventi;
- il tempo di elaborazione, ovvero il tempo totale per eseguire il codice nei gestori di eventi;
- il ritardo di presentazione, ovvero l’intervallo di tempo tra l’esecuzione dell’evento nel gestore e il momento in cui il browser ne mostra il risultato.
Perché la reattività è importante per un sito web e quindi anche per il tuo ecommerce?
I recenti dati di utilizzo di Chrome mostrano che circa il 90% del tempo trascorso da un utente su una pagina viene appunto trascorso dopo il caricamento della stessa: pertanto, un’attenta misurazione della reattività è importante, soprattutto se si considera che un numero sempre maggiore di siti web si affida a JavaScript per fornire interattività, e INP misura questo aspetto comprendendo come detto l’intero ciclo di vita di una pagina.
Quando la reattività è buona, le pagine rispondono rapidamente alle interazioni degli utenti: quando un’applicazione risponde alle interazioni, i cambiamenti nell’interfaccia utente che ne derivano sono un feedback visivo che “ci dice, ad esempio, se un articolo che abbiamo chiesto di aggiungere al carrello di un sito viene effettivamente aggiunto, se il contenuto di un modulo di login viene autenticato dal server, se un menu mobile si è aperto e così via”.
Quali sono i valori ottimali dell’INP?
Google vuole incoraggiare lo sviluppo di esperienze utente che offrano una buona reattività, ma d’altro canto è necessario tenere conto del fatto che esiste una notevole variabilità nelle capacità dei dispositivi utilizzati dalle persone, e stabilire di conseguenza aspettative realmente realizzabili selezionando un obiettivo che non sia impossibile da raggiungere sui dispositivi di fascia bassa.
Alla luce di questo, è importante che la metrica della reattività sia appropriata per i casi d’uso più disparati e per essere certi di raggiungere questo obiettivo, una buona soglia da misurare è il 75° percentile dei caricamenti di pagina registrati sul campo, segmentati tra dispositivi mobili e desktop:
- Un INP inferiore o pari a 200 millisecondi significa che la tua pagina ha una buona reattività;
- Un INP compreso tra 200 e 500 millisecondi significa che la reattività della tua pagina deve essere migliorata;
- Un INP superiore a 500 millisecondi significa che la tua pagina ha una scarsa reattività.
Tuttavia, essendo INP una metrica sperimentale, le indicazioni relative alle soglie possono cambiare nel tempo man mano che la metrica viene messa a punto.
Come misurare INP?
Il modo più semplice per misurare l’Interaction to Next Paint è attraverso gli approfondimenti di PageSpeed o tramite Lighthouse in modalità ‘timespan’. Leggi di più qui: https://developer.chrome.com/en/blog/inp-tools-2022/
Puoi usare in alternativa il Chrome User Experience Report (CrUX) e/o l’estensione Web Vitals per Chrome.
Alcuni suggerimenti per migliorare INP
Per migliorare la reattività durante il caricamento della pagina, possiamo valutare una o più delle seguenti soluzioni:
- Rimuovere codice inutilizzato utilizzando lo strumento coverage in DevTools di Chrome;
- Identificare JavaScript di terze parti che sia troppo lento, ovvero che potrebbe caricarsi durante l’avvio;
- Cercare di suddividere il codie in modo da poter caricare con lazy load il JavaScript non necessario durante il caricamento della pagina.
Conclusioni
Ricorda sempre che il posizionamento SEO nelle ricerche organiche dipende molto anche dalla velocità e dalla reattività del tuo ecommerce. Tenere sotto controllo queste metriche ti permetterà di offrire la migliore esperienza di navigazione restando nel range standard di qualità per Google. Migliorare l’INP fornirà al motore di ricerca un parametro essenziale per considerare ottimale la User Experience del tuo sito e con grandi probabilità verrà premiato con un posizionamento più alto nei risultati di ricerca.
