INP: Cos’è l’Interaction to Next Paint e Come Ottimizzare la Metrica Core Web Vitals

Interaction to Next Paint (INP)

Interaction to Next Paint (INP) è la più recente metrica di Google per i Core Web Vitals.

Misura la reattività di una pagina web durante tutte le interazioni. A partire da marzo 2024, INP ha sostituito il First Input Delay (FID), che fino ad allora misurava il ritardo nella risposta a un comando dell’utente.

Approfondiamo come funziona questa nuova metrica.

Come funziona Interaction to Next Paint (INP)

Un’interazione si verifica quando un utente clicca o scorre una pagina, provocando cambiamenti visibili sullo schermo. INP misura il tempo che intercorre tra l’interazione dell’utente con la pagina e il successivo aggiornamento visivo che avviene dopo l’esecuzione di tutti gli eventi associati. Questa durata è la somma dei seguenti intervalli:

1. Ritardo di input: Tempo tra l’interazione dell’utente e l’inizio dell’esecuzione degli eventi associati.
2. Tempo di elaborazione: Tempo totale necessario per eseguire il codice dell’evento associato.
3. Ritardo di presentazione: Tempo tra il completamento dell’esecuzione dell’evento e quando il browser renderizza il frame successivo.

Un valore INP basso garantisce un’affidabile reattività della pagina, che rappresenta un forte segnale per Google.

Valori INP ottimali

Per soddisfare gli standard Core Web Vitals per Interaction to Next Paint, il 75° percentile dei caricamenti delle pagine registrati deve rimanere sotto i 200 millisecondi. Nello specifico:

• INP buono: ≤ 200ms
• Necessita miglioramento: da 200ms a 500ms
• INP scarso: > 500ms

Misurazione dell'Interaction to Next Paint

Per misurare l’INP sono necessarie interazioni reali degli utenti, il che significa che la metrica riflette le esperienze effettive degli utenti anziché test sintetici. Google acquisisce queste interazioni sulle pagine web attraverso i dati di utilizzo di Chrome, monitorando come gli utenti interagiscono con elementi come pulsanti, link e azioni di scorrimento.

Questi dati vengono poi aggregati e archiviati nel Chrome User Experience Report (CrUX), che funge da dataset ufficiale per le metriche Core Web Vitals.

Il dataset CrUX fornisce preziose informazioni sulle prestazioni reali di un sito web, aiutando i proprietari dei siti a identificare le aree di miglioramento in base a come le loro pagine rispondono alle azioni degli utenti su una vasta gamma di dispositivi e condizioni di rete.

Strumenti per le metriche INP ufficiali

• PageSpeed Insights: Mostra il punteggio del 75° percentile degli ultimi 28 giorni.
• CrUX Dashboard e Google BigQuery: Forniscono contesto storico e approfondimenti dettagliati.

Misurazione dell'INP nella sessione corrente

• Lighthouse in modalità “timespan”: Esegui un’analisi Lighthouse in Chrome per misurazioni basate sulla sessione.
• Core Web Vitals Visualizer: Offre una rappresentazione visiva dei dati INP.
• Google Web Vitals Library: Registra le metriche programmaticamente:

• html<script type="module">
import { onINP } from 'https://unpkg.com/web-vitals@3/dist/web-vitals.attribution.js?module';
onINP(console.log);
</script>

Migliorare l'Interaction to Next Paint

Il miglioramento dell’INP richiede di affrontare i suoi tre componenti: ritardo di input, tempo di elaborazione e ritardo di presentazione. Di seguito le strategie da implementare:

1. Minimizzare il Ritardo di Input

La maggior parte delle pagine è meno reattiva durante il caricamento iniziale. Per ottimizzare:

• Eliminare il codice inutilizzato: Utilizzare il tree shaking per rimuovere il codice morto e lo code splitting per caricare piccole porzioni su richiesta.
• Posticipare il codice non essenziale: Caricare widget come gli strumenti di chat solo quando il sistema è inattivo.
• Ottimizzare gli script lenti: Riscrivere gli script pesanti per renderli più efficienti.
• Semplificare il rendering: Evitare dimensioni DOM eccessive, immagini/video di grandi dimensioni e animazioni CSS non necessarie.

2. Ridurre il Tempo di Elaborazione

Per le azioni attivate dall’utente (ad esempio, l’invio di moduli), fornire un feedback immediato invece di attendere la conferma del server. Per esempio:

• Mostrare un messaggio come “Invio in corso…” durante l’elaborazione.
• Cedere il controllo al thread principale suddividendo l’esecuzione JavaScript. Utilizzare setTimeout() per consentire al browser di renderizzare gli aggiornamenti intermedi.

Example:

javascriptformEl.addEventListener("submit", (evt) => {
evt.preventDefault();
formFeedbackEl.innerText = "Submitting...";
fetch("/form-endpoint", { method: "POST", body: new FormData(formEl) })
.then(response => response.json())
.then(json => {
formEl.reset();
formFeedbackEl.innerText = json.message;
});
setTimeout(() => otherCode(), 0);
});

3. Minimizzare il Ritardo di Presentazione

Il ritardo di presentazione si verifica quando il browser aggiorna i contenuti visibili. Le strategie includono:

• Mantenere il DOM snello: Semplificare la struttura HTML per migliorare la velocità di rendering.
• Utilizzare content-visibility: Ritardare il rendering degli elementi fuori schermo per concentrare le risorse sui contenuti visibili.

Esempio:

css.offscreen {
content-visibility: auto;
}

Semplificare l'ottimizzazione delle Core Web Vitals con Tuurbo

Come evidenziano queste raccomandazioni, l’ottimizzazione delle Core Web Vitals, incluso l’INP, può risultare complessa e tecnicamente impegnativa. Fattori come la struttura del sito e il CMS utilizzato influenzano significativamente la difficoltà di implementazione.

Per semplificare questo processo, abbiamo sviluppato Tuurbo, uno strumento progettato per affrontare automaticamente queste sfide. Con Tuurbo, puoi migliorare l’INP e altre metriche Core Web Vitals in sole 48 ore, eliminando la necessità di lunghi sviluppi o costose consulenze tecniche.

Esplora le nostre guide e scopri come Tuurbo può aiutarti a creare un’esperienza web più veloce e reattiva.

Sembra magia?

Non ci credi, vero?! Provalo!

Prova la nostra soluzione, goditi i risultati e decidi per quanto tempo mantenere attivo il tuo abbonamento.