INP: cos’è Interaction to Next Paint e come migliorarlo

In breve: L’INP (Interaction to Next Paint) misura quanto la pagina è reattiva: il tempo tra un clic, un tocco o un tasto e il momento in cui lo schermo mostra la risposta. È buono fino a 200 millisecondi, scarso oltre 500. Si migliora soprattutto riducendo e alleggerendo il JavaScript.

Ti è mai capitato di toccare il menu di un sito da smartphone e aspettare un attimo di troppo prima che si apra? Quel ritardo ha un nome: INP. È una delle tre metriche Core Web Vitals con cui Google valuta l’esperienza sulle pagine, insieme a LCP (velocità di caricamento) e CLS (stabilità visiva).

Nell’articolo su come ottimizzare i Core Web Vitals trovi il quadro generale; qui mi concentro solo sulla reattività, che è la metrica più difficile da sistemare.

Cos’è INP

INP osserva tutte le interazioni durante la visita (clic del mouse, tocchi sullo schermo, tasti premuti) e misura per ciascuna il tempo fino al disegno successivo dello schermo. Il valore finale è, in pratica, quello delle interazioni più lente, scartando i casi isolati. Scorrere, passare con il mouse e zoomare non contano (fonte: web.dev).

Dal 12 marzo 2024 INP ha sostituito FID tra i Core Web Vitals (fonte: Google Search Central). FID misurava solo il ritardo della prima interazione; INP guarda tutta la visita, ed è molto più severo.

Le soglie di INP

Valore	Giudizio
fino a 200 ms	Buono
tra 200 e 500 ms	Da migliorare
oltre 500 ms	Scarso

Google valuta il 75° percentile delle visite reali, separando smartphone e computer: vuol dire che almeno tre visite su quattro devono stare sotto la soglia.

Da cosa è fatto il ritardo

Ogni interazione lenta si divide in tre parti, ed è utile sapere quale pesa di più:

ritardo dell’input: il browser è occupato in altro (spesso script lunghi) e non può iniziare a gestire il clic;
elaborazione: il tempo per eseguire il codice collegato al clic;
presentazione: il tempo per ricalcolare la pagina e disegnare il risultato sullo schermo.

Come misurare INP

PageSpeed Insights: nella parte alta mostra i dati reali degli utenti di Chrome, se il sito ha abbastanza visite. Il punteggio di Lighthouse sotto, invece, è una simulazione e non misura INP;
Search Console, report Core Web Vitals: raggruppa le pagine con problemi di INP, separate per dispositivo;
Chrome DevTools, pannello Prestazioni: registri un’interazione e vedi quale script la rallenta.

Se il sito ha poche visite e non ci sono dati reali, prova tu: apri le pagine principali da uno smartphone di fascia media e tocca menu, filtri, pulsanti e moduli. Se senti il ritardo, c’è.

Le cause più comuni di un INP alto

troppo JavaScript da eseguire, spesso di temi e page builder carichi di funzioni che la pagina non usa;
script di terze parti: chat, widget social, mappe, pixel pubblicitari e strumenti di analisi caricati tutti insieme;
banner cookie, slider e pop-up pesanti che si attivano proprio quando l’utente prova a interagire;
pagine con un numero enorme di elementi (menu giganti, cataloghi senza paginazione), lente da ricalcolare;
filtri e-commerce che ricaricano gran parte della pagina a ogni clic.

Come migliorare INP

Meno JavaScript, caricato al momento giusto

La prima domanda è sempre: questo script serve davvero, e serve su questa pagina? Togli i plugin e i widget non indispensabili, carica gli script non urgenti dopo il caricamento o solo quando servono (per esempio la mappa solo quando l’utente arriva alla sezione contatti).

Spezza i compiti lunghi

Un compito che occupa il browser per centinaia di millisecondi blocca ogni clic. Chi sviluppa può dividerlo in parti più piccole, così il browser può rispondere all’utente tra una parte e l’altra.

Dai subito un riscontro visivo

Quando l’utente tocca un pulsante, mostra subito che qualcosa sta succedendo (il pulsante cambia stato, compare un indicatore) e fai il lavoro pesante subito dopo. Il disegno del riscontro è ciò che INP misura.

Pagine più leggere

Meno elementi nella pagina, menu e cataloghi più snelli, animazioni solo dove servono. È anche il motivo per cui alcuni siti piccoli li realizzo con codice su misura, senza CMS: per Minova, tre pagine che cambiano raramente, non serviva un pannello pieno di plugin.

Il banner cookie è spesso la prima cosa che l’utente tocca, ed è caricato su ogni pagina: se è pesante, peggiora INP su tutto il sito. Scegli una soluzione leggera e controlla che il clic su “Accetta” o “Rifiuta” chiuda subito il banner, prima di avviare gli strumenti che dipendono dal consenso.

Su WordPress

Controlla quali plugin caricano script su tutte le pagine, valuta un tema più leggero, usa con prudenza le opzioni di “ritardo del JavaScript” dei plugin di cache e prova sempre menu, moduli e carrello dopo averle attivate. Scegli i plugin con attenzione: ne parlo nella guida sui migliori plugin WordPress.

Un metodo per trovare l’interazione lenta

Quando Search Console segnala un problema di INP, non dice quale pulsante è lento. Il metodo che seguo:

parto dal gruppo di pagine segnalato in Search Console e scelgo una pagina rappresentativa;
elenco le interazioni più frequenti: apertura del menu, banner cookie, filtri, aggiunta al carrello, invio del modulo;
le provo da smartphone e, in Chrome DevTools, registro le interazioni con il pannello Prestazioni, simulando una CPU più lenta come quella di un telefono di fascia media;
cerco i compiti lunghi e lo script che li causa: spesso è un plugin o uno strumento di terze parti;
correggo una cosa alla volta e rimisuro, così so cosa ha funzionato.

I dati reali di Search Console e PageSpeed Insights si aggiornano su una finestra di 28 giorni: dopo una correzione serve qualche settimana per vedere il miglioramento nei report, anche se il sito è già più reattivo.

INP e posizionamento

I Core Web Vitals fanno parte dei segnali sull’esperienza della pagina, ma Google precisa che buoni valori non garantiscono buone posizioni: i contenuti contano di più. Il motivo vero per migliorare INP è un altro: un sito che risponde subito si usa meglio, e chi deve compilare un modulo o comprare non rinuncia a metà. Se il sito è lento anche a caricarsi, leggi le cause di un sito lento.

Domande frequenti su INP

Qual è un buon valore di INP?

Fino a 200 millisecondi è buono, tra 200 e 500 è da migliorare, oltre 500 è scarso. Google valuta il 75° percentile delle visite reali, separando smartphone e computer.

Che differenza c’è tra INP e FID?

FID misurava solo il ritardo prima della prima interazione. INP misura tutte le interazioni della visita, fino al disegno della risposta sullo schermo. Dal 12 marzo 2024 INP ha sostituito FID.

Perché PageSpeed Insights non mostra INP?

INP si misura sulle visite reali. Se il sito non ha abbastanza visite dagli utenti di Chrome, PageSpeed Insights non ha dati di campo da mostrare; il test di Lighthouse è una simulazione e non lo misura.

Lo scroll conta per INP?

No. INP misura clic, tocchi e tasti premuti. Scroll, passaggio del mouse e zoom non vengono considerati.

Un plugin di cache migliora INP?

Non da solo. La cache velocizza soprattutto il caricamento. INP dipende da quanto JavaScript viene eseguito durante le interazioni: si migliora riducendo e alleggerendo gli script.

Armando FerrandinoWeb designer e sviluppatore dal 2009. Realizzo siti web ed e-commerce per aziende e professionisti e scrivo guide pratiche su siti, SEO e vendite online. Chi sono