16 febbraio 2023
Interaction to Next Paint (INP): cos’è e perché devi ottimizzarlo
Scritto daAlex Baldarelli
Le metriche che Google tiene in considerazione per stabilire il ranking dei risultati di ricerca sono tantissime, tra queste quelle sicuramente più rilevanti sono quelle legate alla user experience. Da anni si studiano i Core Web Vitals e come ottimizzare un sito web per migliorare l’esperienza dell’utente, tuttavia troppo poco si parla dell’importanza dell’Interaction to Next Paint (INP), un fattore che, come vedremo, fa assolutamente la differenza.
Tra poco, questo parametro potrebbe essere inserito nei Core Web Vitals e diventare quindi una metrica di assoluta rilevanza in termini di posizionamento sul motore di ricerca. Vediamo quindi, nello specifico, di cosa si tratta quando parliamo di Interaction to Next Paint, come si misura, come ottimizzarlo e perché chi si occupa di SEO non lo sottovaluta mai.
Interaction To Next Paint: una definizione
L’Interaction To Next Paint (INP) è una metrica che analizza i tempi di risposta della pagina all’interazione dell’utente: un clic, un tocco su un device touchscreen, la pressione di un tasto (non contano, invece, gli scroll di pagina).
Come detto, tra poco potrebbe entrare a far parte dei Core Web Vitals, ossia l’insieme dei parametri legati alla velocità del sito, ma anche alla chiarezza e alla reattività delle pagine web rispetto alle richieste dell’utente. Tutti questi fattori, che incidono sulla Page Experience devono essere ottimizzati affinché il visitatore possa fruire di un’esperienza all’altezza dei suoi intenti di ricerca.
Innanzitutto, è importante sapere che l’INP misura proprio la reattività, soffermandosi sulla latenza delle interazioni di un utente con la pagina web. La reattività non è altro che la velocità con cui la pagina risponde alla richiesta del visitatore in termini di interazione; la latenza quindi è l’intervallo di tempo che va dal momento in cui l’utente inizia l’interazione con la pagina a quello in cui viene presentata la risorsa richiesta. Ad esempio, quanto tempo occorre al sito per aggiungere un articolo nel carrello, dopo il tuo clic? Dopo quanto tempo viene mostrato un determinato menu, a partire dalla tua interazione con il sito? Ecco, questa durata deve assolutamente essere ridotta il più possibile.
Attenzione però, il valore dell’INP non si misura solo sulla base della latenza verificata nella prima interazione (in questo caso si parla di First Input Delay) ma in tutto il ciclo di vita della pagina. In sostanza, è un valore “definitivo” basato su tutte le interazioni che il visitatore effettua sulla pagina, aggiornandosi continuamente, fino a quando l’utente abbandona la pagina. E’ a questo punto che si registra un valore di INP complessivo.
È importante non confondere l’INP con la velocità di caricamento di una pagina, che prende in considerazione il tempo necessario affinché l’utente veda la prima schermata. L’INP - definita anche reattività di runtime - parte dal clic (o dal touch) dell’utente, fino a quando questi non riceve una risposta dalla risorsa richiesta: questo sarà il risultato “parziale” dell’INP, che cambierà, come detto, fino alla chiusura della pagina da parte dell’utente stesso.
Interaction To Next Paint: come si misura
È giunto quindi il momento di approfondire come effettivamente Google misura l’Interaction To Next Paint e quali sono i valori ottimali. La risposta ci viene fornita da uno degli sviluppatori di Google, su blog.dev. Vediamola in sintesi.
Come detto, l’Interaction to Next Paint rappresenta la latenza complessiva delle interazioni di una pagina. Per le pagine con meno di 50 interazioni complessive (si pensi alle pagine con testo e immagini, con poche modalità di interazione) l’INP non è altro che l’interazione con la latenza peggiore (quella con la durata più elevata), ignorando i valori anomali. Per le pagine con più di 50 interazioni l’INP è rappresentato, nella maggior parte dei casi, dal 98° percentile della latenza di interazione.
Ricordiamoci che sull’INP incidono fattori quali:
Troppo complicato? Non preoccuparti, ci sono diversi tool che ti consentono di effettuare il test delle diverse metriche che incidono sulla velocità di pagina, con effetti in termini di ranking. Ovviamente, quello più semplice e immediato è PageSpeed Insights. Ti basta inserire l’URL di una pagina web e avrai anche degli spunti di ottimizzazione.
Inoltre, esiste un’estensione di Chrome che ti consente di analizzare i Core Web Vitals, fornendo un feedback immediato su Largest Contentful Paint, Cumulative Layout Shift e First Input Delay. Al momento, la misurazione dell’Interaction to Next Paint è solo sperimentale, ma consente già di farsi un’idea sullo “stato di salute” del tuo sito in termini di user experience. La trovi qui: provala subito!
Come ottimizzare l’Interaction To Next Paint
Migliorare le prestazioni delle pagine del nostro sito e ottimizzare i valori di Interaction To Next Paint non è così immediato, senza un minimo di conoscenze di programmazione (JavaScript) e sviluppo.
Come abbiamo già sottolineato, l’Interaction to Next Paint è una metrica che tiene conto di tutto il ciclo di vita della pagina. A grandi linee, quindi, l’ottimizzazione di questo parametro consiste, in primis, nell’individuare il momento critico dove avviene la riduzione della reattività, se durante il caricamento della pagina oppure successivamente.
Solitamente, a causare elevati valori di INP è un caricamento di un frammento di codice Javascript che avviene in concomitanza con l’interazione dell’utente. Un qualsiasi script che blocca il thread principale per un lungo periodo, ritarda, per forza di cose, l’interazione.
Per migliorare l’INP durante il caricamento della pagina, il programmatore rimuove, innanzitutto, la parte di codice inutilizzato, identifica la parte che fatica ad essere caricata e trova quale frammento può essere suddiviso in più parti per essere caricato più velocemente. Un Javascript non ottimizzato, con codice ridondante o poco suddiviso può causare il blocco del threat per un tempo prolungato.
Per ottimizzare l’INP dopo il caricamento completo della pagina, è opportuno verificare se esistono frammenti di codice Javascript di terze parti in esecuzione che condizionano la reattività della pagina (si pensi agli script pubblicitari).
Inoltre, è estremamente utile “far girare” il profilatore di prestazioni, che consente di individuare attività che richiedono troppo tempo e che devono essere ottimizzate, oltre a valutare interazioni discrete. Al contempo, è importante utilizzare l’API postTask, per assegnare le giuste priorità nel modo corretto.
Vuoi ottimizzare l’Interaction To Next Paint e migliorare le prestazioni del tuo sito? Contattaci subito!
Interaction to Next Paint e SEO: cosa devi sapere
Sappiamo da tempo che Google considera molto importante l’esperienza utente, per posizionare le pagine web sul motore di ricerca. Se veramente tra poco l’INP diventerà parte dei Core Web Vitals, allora sarà opportuno farsi trovare pronti. Noi in Doweb stiamo approfondendo questa metrica da tempo e teniamo conto di ogni aspetto che possa incidere sulla velocità del sito, quando realizziamo siti web ed effettuiamo restyling di siti web esistenti.
Una volta entrata nei Core Web Vitals, l’Interaction to Next Paint sarà considerato fattore di posizionamento da Google. E’ vero che i contenuti e la capacità di questi di soddisfare gli intenti di ricerca restano fattori di primaria importanza, ma a parità di questo fattore, un sito web con valori Core Web Vitals più elevati, verrà premiato. Senza tralasciare, ovviamente, altri fattori come la creazione di una struttura di link ottimizzati, una rete di link esterna, l’implementazione dell’HTTPS, l’ottimizzazione per i dispositivi mobili e l’eliminazione di ogni forma di annuncio invasivo, ecc.
Tutti questi elementi e molti altri vengono valutati quando realizziamo un sito, individuando la migliore soluzione per la specifica esigenza del cliente. Ecco perché i nostri siti sono progettati sin dal primo codice per posizionarsi tra i primi risultati di ricerca e ottenere tante visite.
Non dimenticare, inoltre, che la frequenza di rimbalzo è un parametro di primaria rilevanza per Google: non abbandoneresti subito un sito che non risponde con reattività ai tuoi comandi? Ecco che allora potrai offrire anche il miglior contenuto, ma nel lungo periodo, se non riesci a mostrarlo nel modo corretto, non andrai molto lontano.
Non solo, una reattività del sito incide in larga parte anche sul tasso di conversione: pertanto, se hai un ecommerce, non puoi sicuramente esimerti dall’ottimizzare l’Interaction to Next Paint. E’ risaputo che un utente che ha già le idee chiare e vuole procedere con l’acquisto, non ha nessuna intenzione di perdere tempo con una procedura troppo lunga e difficoltosa, figuriamoci se si trova di fronte un sito che non risponde subito alla sua interazione!
Insomma, a prescindere da quale sia la natura del tuo sito e dei contenuti che “promuovi”, devi subito correre a ottimizzare l’Interaction To Next Paint, una metrica che fa assolutamente la differenza!
Realizziamo siti web veloci e reattivi: contattaci per un preventivo!
Tra poco, questo parametro potrebbe essere inserito nei Core Web Vitals e diventare quindi una metrica di assoluta rilevanza in termini di posizionamento sul motore di ricerca. Vediamo quindi, nello specifico, di cosa si tratta quando parliamo di Interaction to Next Paint, come si misura, come ottimizzarlo e perché chi si occupa di SEO non lo sottovaluta mai.
Interaction To Next Paint: una definizione
L’Interaction To Next Paint (INP) è una metrica che analizza i tempi di risposta della pagina all’interazione dell’utente: un clic, un tocco su un device touchscreen, la pressione di un tasto (non contano, invece, gli scroll di pagina).
Come detto, tra poco potrebbe entrare a far parte dei Core Web Vitals, ossia l’insieme dei parametri legati alla velocità del sito, ma anche alla chiarezza e alla reattività delle pagine web rispetto alle richieste dell’utente. Tutti questi fattori, che incidono sulla Page Experience devono essere ottimizzati affinché il visitatore possa fruire di un’esperienza all’altezza dei suoi intenti di ricerca.
Innanzitutto, è importante sapere che l’INP misura proprio la reattività, soffermandosi sulla latenza delle interazioni di un utente con la pagina web. La reattività non è altro che la velocità con cui la pagina risponde alla richiesta del visitatore in termini di interazione; la latenza quindi è l’intervallo di tempo che va dal momento in cui l’utente inizia l’interazione con la pagina a quello in cui viene presentata la risorsa richiesta. Ad esempio, quanto tempo occorre al sito per aggiungere un articolo nel carrello, dopo il tuo clic? Dopo quanto tempo viene mostrato un determinato menu, a partire dalla tua interazione con il sito? Ecco, questa durata deve assolutamente essere ridotta il più possibile.
Attenzione però, il valore dell’INP non si misura solo sulla base della latenza verificata nella prima interazione (in questo caso si parla di First Input Delay) ma in tutto il ciclo di vita della pagina. In sostanza, è un valore “definitivo” basato su tutte le interazioni che il visitatore effettua sulla pagina, aggiornandosi continuamente, fino a quando l’utente abbandona la pagina. E’ a questo punto che si registra un valore di INP complessivo.
È importante non confondere l’INP con la velocità di caricamento di una pagina, che prende in considerazione il tempo necessario affinché l’utente veda la prima schermata. L’INP - definita anche reattività di runtime - parte dal clic (o dal touch) dell’utente, fino a quando questi non riceve una risposta dalla risorsa richiesta: questo sarà il risultato “parziale” dell’INP, che cambierà, come detto, fino alla chiusura della pagina da parte dell’utente stesso.
Interaction To Next Paint: come si misura
È giunto quindi il momento di approfondire come effettivamente Google misura l’Interaction To Next Paint e quali sono i valori ottimali. La risposta ci viene fornita da uno degli sviluppatori di Google, su blog.dev. Vediamola in sintesi.
Come detto, l’Interaction to Next Paint rappresenta la latenza complessiva delle interazioni di una pagina. Per le pagine con meno di 50 interazioni complessive (si pensi alle pagine con testo e immagini, con poche modalità di interazione) l’INP non è altro che l’interazione con la latenza peggiore (quella con la durata più elevata), ignorando i valori anomali. Per le pagine con più di 50 interazioni l’INP è rappresentato, nella maggior parte dei casi, dal 98° percentile della latenza di interazione.
Ricordiamoci che sull’INP incidono fattori quali:
- Input delay – l’intervallo di tempo tra l’interazione e l’esecuzione dei gestori di eventi
- Processing time – il tempo complessivo necessario per eseguire il codice nei gestori di eventi associati
- Presentation delay – l’intervallo di tempo tra la fine dell’esecuzione dei gestori degli eventi e la presentazione della risorsa richiesta nel browser.
Troppo complicato? Non preoccuparti, ci sono diversi tool che ti consentono di effettuare il test delle diverse metriche che incidono sulla velocità di pagina, con effetti in termini di ranking. Ovviamente, quello più semplice e immediato è PageSpeed Insights. Ti basta inserire l’URL di una pagina web e avrai anche degli spunti di ottimizzazione.
Inoltre, esiste un’estensione di Chrome che ti consente di analizzare i Core Web Vitals, fornendo un feedback immediato su Largest Contentful Paint, Cumulative Layout Shift e First Input Delay. Al momento, la misurazione dell’Interaction to Next Paint è solo sperimentale, ma consente già di farsi un’idea sullo “stato di salute” del tuo sito in termini di user experience. La trovi qui: provala subito!
Come ottimizzare l’Interaction To Next Paint
Migliorare le prestazioni delle pagine del nostro sito e ottimizzare i valori di Interaction To Next Paint non è così immediato, senza un minimo di conoscenze di programmazione (JavaScript) e sviluppo.
Come abbiamo già sottolineato, l’Interaction to Next Paint è una metrica che tiene conto di tutto il ciclo di vita della pagina. A grandi linee, quindi, l’ottimizzazione di questo parametro consiste, in primis, nell’individuare il momento critico dove avviene la riduzione della reattività, se durante il caricamento della pagina oppure successivamente.
Solitamente, a causare elevati valori di INP è un caricamento di un frammento di codice Javascript che avviene in concomitanza con l’interazione dell’utente. Un qualsiasi script che blocca il thread principale per un lungo periodo, ritarda, per forza di cose, l’interazione.
Per migliorare l’INP durante il caricamento della pagina, il programmatore rimuove, innanzitutto, la parte di codice inutilizzato, identifica la parte che fatica ad essere caricata e trova quale frammento può essere suddiviso in più parti per essere caricato più velocemente. Un Javascript non ottimizzato, con codice ridondante o poco suddiviso può causare il blocco del threat per un tempo prolungato.
Per ottimizzare l’INP dopo il caricamento completo della pagina, è opportuno verificare se esistono frammenti di codice Javascript di terze parti in esecuzione che condizionano la reattività della pagina (si pensi agli script pubblicitari).
Inoltre, è estremamente utile “far girare” il profilatore di prestazioni, che consente di individuare attività che richiedono troppo tempo e che devono essere ottimizzate, oltre a valutare interazioni discrete. Al contempo, è importante utilizzare l’API postTask, per assegnare le giuste priorità nel modo corretto.
Vuoi ottimizzare l’Interaction To Next Paint e migliorare le prestazioni del tuo sito? Contattaci subito!
Interaction to Next Paint e SEO: cosa devi sapere
Sappiamo da tempo che Google considera molto importante l’esperienza utente, per posizionare le pagine web sul motore di ricerca. Se veramente tra poco l’INP diventerà parte dei Core Web Vitals, allora sarà opportuno farsi trovare pronti. Noi in Doweb stiamo approfondendo questa metrica da tempo e teniamo conto di ogni aspetto che possa incidere sulla velocità del sito, quando realizziamo siti web ed effettuiamo restyling di siti web esistenti.
Una volta entrata nei Core Web Vitals, l’Interaction to Next Paint sarà considerato fattore di posizionamento da Google. E’ vero che i contenuti e la capacità di questi di soddisfare gli intenti di ricerca restano fattori di primaria importanza, ma a parità di questo fattore, un sito web con valori Core Web Vitals più elevati, verrà premiato. Senza tralasciare, ovviamente, altri fattori come la creazione di una struttura di link ottimizzati, una rete di link esterna, l’implementazione dell’HTTPS, l’ottimizzazione per i dispositivi mobili e l’eliminazione di ogni forma di annuncio invasivo, ecc.
Tutti questi elementi e molti altri vengono valutati quando realizziamo un sito, individuando la migliore soluzione per la specifica esigenza del cliente. Ecco perché i nostri siti sono progettati sin dal primo codice per posizionarsi tra i primi risultati di ricerca e ottenere tante visite.
Non dimenticare, inoltre, che la frequenza di rimbalzo è un parametro di primaria rilevanza per Google: non abbandoneresti subito un sito che non risponde con reattività ai tuoi comandi? Ecco che allora potrai offrire anche il miglior contenuto, ma nel lungo periodo, se non riesci a mostrarlo nel modo corretto, non andrai molto lontano.
Non solo, una reattività del sito incide in larga parte anche sul tasso di conversione: pertanto, se hai un ecommerce, non puoi sicuramente esimerti dall’ottimizzare l’Interaction to Next Paint. E’ risaputo che un utente che ha già le idee chiare e vuole procedere con l’acquisto, non ha nessuna intenzione di perdere tempo con una procedura troppo lunga e difficoltosa, figuriamoci se si trova di fronte un sito che non risponde subito alla sua interazione!
Insomma, a prescindere da quale sia la natura del tuo sito e dei contenuti che “promuovi”, devi subito correre a ottimizzare l’Interaction To Next Paint, una metrica che fa assolutamente la differenza!
Realizziamo siti web veloci e reattivi: contattaci per un preventivo!
