INP, acronimo di Interaction to Next Paint, è una metrica fondamentale introdotta da Google all’interno dei Core Web Vitals per valutare il grado di reattività di una pagina web. Mentre le vecchie metriche si limitavano a monitorare il primo contatto con il sito, l’INP misura la velocità con cui la pagina risponde visivamente alle interazioni dell’utente durante l’intera sessione di navigazione.
Ogni volta che un visitatore interagisce con il tuo sito – cliccando su un pulsante, aprendo un menu a tendina, digitando in una casella di testo o toccando lo schermo dello smartphone – il browser deve elaborare l’evento e ridisegnare l’interfaccia per mostrare il cambiamento. L’INP calcola il tempo trascorso dal momento dell’interazione fino al fotogramma successivo in cui la modifica appare visibile. Secondo le linee guida di Google, una risposta ottimale deve verificarsi entro 200 millisecondi.
Immagina un utente che naviga sul tuo blog WordPress da smartphone e clicca sull’icona a forma di hamburger per aprire il menu di navigazione. Se il codice della pagina è sovraccaricato da script di tracciamento pubblicitario o da animazioni pesanti, il browser rimane bloccato e il menu compare solo dopo un secondo. Questa sensazione di lentezza o congelamento dell’interfaccia rovina l’esperienza di navigazione e genera un valore INP scadente nei rapporti di PageSpeed Insights.
L’equivoco principale è confondere l’INP con i tempi di risposta del server di hosting. L’INP è quasi sempre un problema legato al browser: è causato da codice JavaScript inefficiente che monopolizza il processore del dispositivo dell’utente, impedendo allo schermo di aggiornarsi. Un altro errore è testare il sito solo da computer performanti con connessioni ultraveloci, dimenticando che chi naviga da smartphone economici risente molto di più del carico computazionale degli script.
Ottimizzare l’INP è indispensabile per preservare il posizionamento sui motori di ricerca e ridurre l’abbandono da parte degli utenti, soprattutto nei siti editoriali con molti banner o negli e-commerce. Per mantenerlo sotto la soglia di guardia, alleggerisci il carico dei plugin, ritarda o elimina gli script non essenziali e preferisci menu ed elementi interattivi gestiti con codice CSS pulito.
Fonte: web.dev