Interazione con Next Paint (INP): guida tecnica completa e standard di ottimizzazione

Interaction to Next Paint (INP) è una metrica ufficiale di Google Core Web Vital introdotta per valutare la reattività complessiva dell'interfaccia delle pagine web.

A differenza del First Input Delay (FID), che valutava solo l'interazione iniziale al caricamento della pagina, INP osserva la latenza di tutte le interazioni dell'utente (clic, tocchi e input da tastiera) che si verificano durante l'intera durata della visita di un utente a una pagina.

Riepilogo della prima risposta

Interaction to Next Paint (INP) è una metrica Core Web Vital che misura il tempo trascorso da quando un utente interagisce con una pagina (facendo clic, toccando o premendo un tasto) fino a quando il browser presenta sullo schermo il frame visivo aggiornato.La latenza INP è composta da tre sottoparti: ritardo di input, durata di elaborazione e ritardo di presentazione.Un punteggio INP positivo è pari o inferiore a 200 millisecondi al 75° percentile delle visite degli utenti reali.Nel marzo 2024, INP ha ufficialmente sostituito il First Input Delay (FID) negli algoritmi di ranking delle ricerche di Google.

Soglie del punteggio INP e scala di valutazione

Per fornire un'esperienza utente reattiva, le pagine web devono soddisfare le seguenti soglie Core Web Vitals per INP valutate al 75° percentile delle visite sul campo degli utenti reali:

• Buono: $\le 200\text {ms} $ (Verde) - Risposta dell'interfaccia utente rapida e fluida che sembra istantanea per gli utenti.
• Richiede miglioramenti: $> 200\text {ms} $ e $\le 500\text {ms} $ (ambra) - Ritardo notevole durante i clic o i tocchi che influisce sul coinvolgimento dell'utente.
• Scarso: $> 500\text {ms} $ (Rosso) - Grave blocco dell'interfaccia e blocco del thread principale che porta alla frustrazione dell'utente e ad elevate frequenze di rimbalzo.

I tre componenti della latenza dell'interazione INP

Quando un utente interagisce con un elemento su una pagina web, la latenza di interazione totale misurata da INP è costituita da tre fasi sequenziali:

1. Ritardo input: il tempo trascorso tra il momento in cui l'utente avvia l'interazione fisica (clic, tocco o pressione di un tasto) e il momento in cui il thread principale del browser inizia a eseguire i gestori eventi associati.Il ritardo di input è causato principalmente dalla congestione del thread principale dovuta a lunghe attività JavaScript in background in esecuzione durante il caricamento della pagina o il nuovo rendering dei componenti.
2. Durata dell'elaborazione: il tempo impiegato per l'esecuzione del codice JavaScript in tutti i listener di eventi registrati per tale interazione (come onclick , onkeydown o gestori di aggiornamento dello stato reattivo del framework).
3. Ritardo presentazione: il tempo trascorso dal completamento dei gestori eventi fino a quando il browser non termina il calcolo del ricalcolo dello stile, il layout, il disegno dei pixel aggiornati e la visualizzazione del fotogramma visivo successivo sull'hardware di visualizzazione dell'utente.

Matematicamente, la latenza INP totale per una singola interazione è espressa come:

$$\text{Latenza INP} = \text{Ritardo input} + \text{Durata elaborazione} + \text{Ritardo presentazione}$$

Perché Google ha sostituito FID con INP nel marzo 2024

Il primo ritardo di input (FID) misurava solo la componente di ritardo di input della primissima interazione su una pagina.Sebbene il FID aiutasse a identificare le pagine in cui il blocco del thread principale impediva l'interazione iniziale, soffriva di due importanti limitazioni tecniche:

• Ambito di interazione singola: il FID ha ignorato tutte le successive interazioni dell'utente dopo il caricamento della pagina, non riuscendo a rilevare la lentezza durante la navigazione lato client dell'applicazione SPA a pagina singola complessa.
• Misurazione incompleta della latenza: il FID ha misurato solo il ritardo di input, ignorando completamente il tempo di elaborazione e il ritardo di presentazione.Un gestore eventi che ha impiegato 2.000 ms per essere eseguito ha ricevuto un punteggio FID positivo se il ritardo di input iniziale era inferiore a 50 ms.

Nel marzo 2024, Google ha ufficialmente sostituito FID con INP come fattore di ranking ufficiale Core Web Vital.INP valuta il 75° percentile di tutte le interazioni durante una sessione, fornendo una valutazione molto più completa e realistica dell'esperienza dell'utente reale nelle moderne applicazioni web.

Interazioni utente qualificanti ed eventi non qualificanti

INP misura le interazioni discrete dell'utente in cui l'utente si aspetta un feedback visivo immediato.Comprendere quali interazioni contano ai fini dell'INP è essenziale per la profilazione diagnostica:

Interazioni misurate

• Clic del mouse: clic su pulsanti, collegamenti, controlli del modulo o componenti interattivi personalizzati.
• Tocchi touchscreen: tocco di elementi su dispositivi mobili o tablet.
• Pressione tastiera: pressione dei tasti della tastiera fisica o virtuale (come Enter , Space o tasti alfanumerici negli input di testo).

Eventi non misurati

• Scorrimento e panoramica: lo scorrimento di una pagina o la panoramica di un componente della mappa non attiva la misurazione INP.
• Hovering: spostare il cursore del mouse su un elemento senza fare clic è escluso da INP.
• Animazioni di caricamento della pagina: le animazioni CSS che si attivano automaticamente senza l'input dell'utente non vengono conteggiate ai fini dell'INP.

Strategie tecniche comprovate per ottimizzare punteggi INP elevati

Per ridurre la latenza INP al di sotto della soglia di 200 ms, i team di ingegneri dovrebbero implementare le seguenti ottimizzazioni tecniche:

1. Suddividi attività lunghe del thread principale: utilizza requestIdleCallback() , setTimeout() o scheduler.yield() per suddividere le attività di esecuzione più lunghe di 50 ms in blocchi più piccoli, consentendo al browser di elaborare immediatamente gli input degli utenti in arrivo tra i blocchi di esecuzione delle attività.
2. Ottimizza gli aggiornamenti dello stato del framework: nelle applicazioni Vue 3 e Nuxt 4, rinvia i nuovi rendering dell'interfaccia utente non critici utilizzando i limiti dei componenti asincroni o gli aggiornamenti dei riferimenti reattivi differiti.
3. Riduci al minimo il thrashing del layout: evita di leggere le proprietà della geometria DOM (come offsetHeight o getBoundingClientRect() ) immediatamente dopo la modifica degli elementi DOM, che forza il ricalcolo sincrono del layout.
4. Riduci la profondità dell'albero DOM: gli alberi DOM sovradimensionati aumentano il calcolo dello stile e i costi di layout durante il ritardo della presentazione.Mantieni il numero totale di elementi DOM al di sotto di 1.500 nodi per pagina.
5. Ottimizza script di terze parti: pesanti script di terze parti (analisi, reti pubblicitarie, widget di chat dei clienti) spesso dirottano il thread principale.Rinviare o scaricare dal webworker script di terze parti non essenziali.

Monitoraggio INP continuo con SimpleOps

SimpleOps monitora continuamente le prestazioni INP acquisendo le metriche del set di dati sul campo dell'utente reale di Chrome UX Report (CrUX) insieme agli audit sintetici di Lighthouse.SimpleOps avvisa automaticamente il tuo team ogni volta che l'INP del 75° percentile del tuo sito web supera i 200 ms, garantendo che la tua applicazione rimanga veloce, fluida e ottimizzata per il posizionamento nei motori di ricerca.