Misurare INP e migliorare la risposta del sito con INP Scanner

Questa guida spiega INP e come usare INP Scanner Milten per indagare le interazioni lente. INP ha sostituito FID nei Core Web Vitals nel marzo 2024. Un test di laboratorio copre le azioni eseguite, non l’esperienza di tutti i visitatori.

Che cos’è Interaction to Next Paint (INP)?

INP valuta la risposta a clic, tocchi e input da tastiera durante una visita. La latenza comprende l’attesa prima dell’elaborazione dell’input, l’esecuzione dei gestori e l’attesa del successivo aggiornamento visivo. FID misurava solo il ritardo del primo input; INP considera le interazioni idonee per tutta la visita. Non misura l’intera durata di una successiva risposta di rete asincrona.

Caratteristiche principali dell'INP:

• Aggregazione: INP non è una media. In genere riflette l’interazione più lenta, escludendo valori anomali nelle visite con molte interazioni.
• Soglie: buono fino a 200 ms; da migliorare oltre 200 ms e fino a 500 ms; scarso oltre 500 ms. Per le visite reali usa il 75° percentile, separando dispositivi mobili e desktop.
• Azioni incluse: clic, tocchi e tastiera. Scorrimento e passaggio del puntatore non sono di per sé interazioni INP.

Perché l'INP è importante per te?

1. Esperienza utente (UX)

Una risposta visiva lenta può far sembrare inattivo un pulsante e provocare clic ripetuti. Misura l’interazione e il suo esito. Le statistiche sul caricamento delle pagine non dimostrano un effetto di INP sulla frequenza di rimbalzo del tuo sito.

2. SEO e posizionamento nelle ricerche

INP fa parte dei Core Web Vitals usati dai sistemi di ranking di Google. Un buon punteggio non garantisce una posizione migliore e un punteggio scarso non dimostra una penalizzazione fissa. Valuta la reattività insieme alla pertinenza dei contenuti e agli altri aspetti dell’esperienza di pagina.

3. La velocità come vantaggio competitivo

Una risposta visiva rapida conferma che l’azione è stata ricevuta. Confronta le attività importanti per il tuo pubblico: lo stesso ritardo può avere effetti diversi a seconda del compito.

Come usare INP Scanner di Milten

INP Scanner aiuta a esaminare la reattività in un browser controllato. Verifica le azioni eseguite e i limiti del report prima di generalizzare i risultati.

1. Verifica le interazioni testate

Scegli un percorso rappresentativo e controlla quali azioni sono state eseguite:

• Clic su pulsanti e link.
• Input da tastiera nei campi pertinenti.
• Scorrimento necessario per raggiungere un elemento; lo scorrimento in sé non è un’interazione INP.

Un test controllato è uno scenario riproducibile, non una misura sui dispositivi di tutti i visitatori. Registra browser, profilo del dispositivo e condizioni effettive del test. Integra i percorsi importanti non coperti con prove manuali.

2. Interpreta i tempi

La misura di INP utilizza i dati di Event Timing. PerformanceObserver può osservare le voci event supportate; non esiste un tipo generale render per questo scopo. Una libreria come web-vitals raggruppa le interazioni e calcola INP.

• Distingui ritardo dell’input, esecuzione del gestore e ritardo di presentazione.
• Indaga i task JavaScript lunghi sul thread principale.
• Esamina la fluidità delle animazioni come un aspetto collegato, ma distinto.

3. Indaga le osservazioni

Usa i dati effettivamente presenti nel report:

• Individua le interazioni registrate e gli elementi interessati.
• Analizza un’azione lenta, per esempio un pulsante «Acquista» ipotetico che impiega 600 ms; non è una misura di un cliente.
• Verifica la possibile causa in una registrazione delle prestazioni del browser e prova una modifica limitata al codice.

Limiti di un test automatico

• Consulta le condizioni attuali del servizio e i campi disponibili nel report.
• Un test nel browser non dimostra l’uso di dispositivi fisici dei visitatori.
• Azioni non eseguite e dati mancanti restano non verificati. Integra l’analisi con dati reali quando disponibili.

Cause comuni di interazioni lente

1. Gestori di eventi lunghi

Esempio didattico: funzioni e dati devono essere definiti nell’applicazione.

button.addEventListener('click', () => {
	// Synchronous processing of 10,000 data rows
	const result = heavyCalculation(data)
	updateUI(result)
})

Problema: il lavoro sincrono di heavyCalculation occupa il thread principale e può ritardare l’aggiornamento visivo. Soluzione: riduci o suddividi il lavoro, oppure sposta i calcoli adatti in un Web Worker. Un singolo setTimeout rimanda lo stesso task pesante, senza trasferirlo fuori dal thread principale.

2. CSS/JS con blocco del rendering

Esempio:

<link rel="stylesheet" href="large-styles.css" />
<script src="analytics.js" defer></script>

Problema: un foglio di stile bloccante e script costosi possono ritardare la visualizzazione o l’input. defer cambia la pianificazione, ma non elimina il lavoro. Il foglio dell’esempio si applica allo schermo; il solo media="print" lascerebbe questi stili inapplicati sullo schermo. Possibili miglioramenti:

• Inserisci inline solo il CSS davvero critico e misura il risultato.
• Elimina gli stili inutilizzati dopo aver verificato classi dinamiche e stati dell’interfaccia; PurgeCSS richiede una configurazione adeguata.
• Rimanda gli script non critici e riduci il costo della loro esecuzione.

3. Animazioni lente

Esempio:

@keyframes fade {
	from {
		opacity: 0;
		transform: translateX(-100px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

Problema: le animazioni di opacity e transform sono spesso efficienti, ma molti elementi animati insieme possono causare scatti. Possibili miglioramenti:

• Semplifica le animazioni e riduci gli elementi animati contemporaneamente.
• Valuta will-change: transform solo quando serve, poco prima della modifica. È un suggerimento, non una garanzia di accelerazione GPU; un uso eccessivo consuma risorse. Misura il risultato.

4. Ricalcoli forzati ripetuti del layout (layout thrashing)

Esempio:

for (let i = 0; i < 100; i++) {
	element.style.height = `${i}px`
	console.log(element.offsetHeight) // Forces layout recalculation
}

Problema: alternare scritture di stile e letture geometriche come offsetHeight può forzare ricalcoli ripetuti. Il calcolo del layout è diverso dalla pittura. Soluzione:

• Raggruppa le letture geometriche prima delle scritture quando possibile.
• Usa requestAnimationFrame per le modifiche visive quando opportuno, ma non aspettarti di risolvere il problema spostandovi lo stesso ciclo di letture e scritture.

Come migliorare l'INP: 5 consigli pratici

1. Ottimizza i gestori di eventi

• Suddividi i task lunghi e restituisci il controllo al browser tra un blocco e l’altro, usando un meccanismo adatto come setTimeout.
• queueMicrotask non offre al browser l’occasione di disegnare: una catena di microtask può continuare a bloccare la pagina.
• Riduci il lavoro immediato del gestore e mostra rapidamente un riscontro.

2. Riduci le dimensioni del pacchetto JavaScript

• Rimuovi le librerie inutilizzate, per esempio con l’aiuto di Webpack Bundle Analyzer.
• Usa il code splitting per caricare i moduli in modo dinamico.

3. Usa debounce e throttle

Limita la frequenza del lavoro costoso se l’attività lo consente. L’esempio richiede che debounce sia definito o importato. Mantieni immediato il riscontro visivo del campo: i 300 ms sono una scelta illustrativa di pianificazione, non un obiettivo INP.

const debouncedSearch = debounce((query) => {
	fetchResults(query)
}, 300)

4. Ottimizza il rendering

• Riduci la complessità superflua del DOM.
• Misura il costo di stili e layout senza presumere che i selettori siano la causa.
• Valuta content-visibility: auto per le sezioni fuori schermo e verifica layout, focus e accessibilità.

5. Test su dispositivi di fascia bassa

Prova dispositivi poco potenti rappresentativi quando possibile. Gli strumenti del browser possono simulare CPU e reti più lente, per esempio un rallentamento CPU di 4× e una connessione mobile limitata. Sono condizioni illustrative, non un profilo 3G fisso del servizio o prove su dispositivi fisici.

Verifica il risultato

Ripeti la stessa interazione dopo la pubblicazione, in condizioni confrontabili. Controlla il tempo e la correttezza del compito: un carrello più rapido deve continuare a contenere il prodotto giusto.

Usa INP Scanner di Milten nell’indagine:

• Registra le azioni testate e i dati mancanti.
• Confronta lo stesso percorso prima e dopo la correzione.
• Valuta le visite reali con i relativi dati: un buon risultato di laboratorio non dimostra un buon INP per tutti gli utenti.

Scegli un’interazione importante, individua una possibile causa e prova una correzione limitata. Distingui controlli riusciti, falliti e non eseguiti.

Consulta la guida alla misura di INP e la guida all’ottimizzazione di INP.