INP: comprendere la nuova metrica Core Web Vitals e come ottimizzarla
L’Interaction to Next Paint (INP) è una delle metriche prestazionali che Google ha introdotto per misurare la reattività delle pagine web.
Se vuoi migliorare il posizionamento del tuo sito nei motori di ricerca, capire cos’è l’INP e come ottimizzarlo è fondamentale. Altrimenti, le tue pagine potrebbero posizionarsi più in basso nei risultati di ricerca quando questo aggiornamento diventerà ufficiale.
Questo articolo esaminerà l’INP in modo più dettagliato, incluso il modo in cui differisce dagli altri parametri Core Web Vitals e come misurarlo per migliorare il tuo punteggio attuale.
- Cos’è l’Interaction to Next Paint (INP)?
- Come funziona Interaction to Next Paint (INP).
- Interaction to Next Paint (INP) come Core Web vital
- Come misurare Interaction to Next Paint (INP)
- Come ottimizzare per Interaction to Next Paint(INP)
- Ottimizza l’esecuzione di JavaScript
- Utilizzare i Web Worker
- Suddividi i task lunghi
- Dare priorità alla disponibilità degli input
- Fornisci feedback immediato
- Cosa significa Interaction to Next Paint (INP) per i proprietari dei siti web
- Domande frequenti sull’Interaction to Next Paint (INP).
Cos’è Interaction to Next Paint (INP)?
Interaction to Next Paint (INP) è una metrica di campo che misura la reattività della pagina. Una pagina è considerata reattiva se risponde rapidamente agl’ input dell’utente.
INP è particolarmente utile per misurare la reattività di una pagina web poiché non richiede alcun codice JavaScript o CSS, a differenza di altri parametri. Misura invece solo la velocità con cui il browser visualizza gli elementi sullo schermo dopo aver ricevuto le interazioni dell’utente.
Il post del blog di Google Webmasters sulla reattività della pagina cita il fatto che INP sia una metrica sperimentale ma è già disponibile in Google Search Console (GSC) come “Esperienza sulla pagina” nella sezione “Prestazioni del sito”.
I punteggi INP nel rapporto Core Web Vitals di Search Console sono gia raggiungibili ma entro marzo 2024, i punteggi FID non verranno più mostrati nel rapporto Pagespeed e Google Search Console.
Il punteggio INP può variare notevolmente rispetto al punteggio FID più tradizionale.
Come funziona Interaction to Next Paint (INP).
Come metrica di reattività, INP si concentra sul ritardo dell’interazione dell’utente. Misura quindi la velocità con cui un elemento della pagina web risponderà dopo aver eseguito una determinata azione su di esso. Ecco come funziona:
- Un utente interagisce con una pagina Web, ad esempio facendo clic su un pulsante.
- Il browser invia una richiesta al server web per il nuovo contenuto.
- Il server web invia il nuovo contenuto al browser.
- Il browser esegue il rendering del nuovo contenuto nella pagina.
- Il browser misura il tempo necessario per eseguire il rendering del nuovo contenuto e lo segnala come punteggio INP.
Un valore INP basso significa che la pagina è altamente reattiva per le interazioni dell’utente.
Come parte dei Core Web Vitals, soddisfare INP è importante per i seguenti motivi:
- Esperienza utente migliorata. Un valore INP elevato significa che gli utenti devono attendere molto tempo affinché la pagina Web reagisca alle loro interazioni, il che può essere frustrante.
- Ottimizzazione per i motori di ricerca (SEO). INP e altri Core Web Vitals fanno parte dei segnali di esperienza sulla pagina di Google, determinando il posizionamento di un sito Web nelle pagine dei risultati. Ciò rende la metrica INP SEO particolarmente importante.
- Frequenza di rimbalzo inferiore. I tempi di caricamento lenti possono indurre gli utenti ad abbandonare la pagina, danneggiando i profitti della tua azienda.
Interaction to Next Paint (INP) come Core Web Vital
Google ha affermato che INP sostituirà la metrica First Input Delay (FID) nel 2024. INP e FID sono simili, ma funzionano in modo diverso.
Differenza tra INP e FID
Il FID misura la reattività al caricamento della pagina solo alla prima apertura del sito web. Invece, la metrica INP tiene conto di tutti i ritardi di interazione dell’utente durante un’intera visita dopo il caricamento della pagina.
Secondo i dati di Google, la maggior parte del tempo trascorso da un utente su un sito Web avviene dopo il suo caricamento. Pertanto, INP può misurare l’interattività della pagina in modo molto più efficace rispetto al FID.
INP differisce anche da altri Core Web Vitals come Cumulative Layout Shift (CLS) e Largest Contentful Paint (LCP). CLS valuta quanto un sito può spostarsi inaspettatamente, mentre LCP determina la velocità con cui una pagina web visualizza i suoi elementi più grandi.
Come misurare Interaction to Next Paint (INP)
Prima di avviare la misurazione di Interaction to Next Paint, vediamo cosa significano i valori INP.
L’INP è misurato in millisecondi (ms). Un buon benchmark è inferiore a 200 ms e qualsiasi valore compreso tra questo e 500 ms è considerato da migliorare. 500 ms o superiore sono considerati scadenti.
Vari fattori possono influenzare un valore INP, come la dimensione e la complessità di una pagina web, nonché il numero di file JavaScript e CSS caricati.
Puoi misurare il valore INP di un sito Web utilizzando gli strumenti di test della velocità del sito Web. Questo tipo di applicazione può fornire informazioni dettagliate sul rendimento dei parametri Core Web Vitals e su come ottimizzarli.
Google PageSpeed Insights è un’opzione popolare per misurare l’INP e le prestazioni del sito web. Testerà il sito e fornirà dettagli sulle migliori pratiche da implementare.
Potrai anche verificare la velocità del tuo sito quando viene caricato su dispositivi mobili e desktop.
PageSpeed Insights visualizza due tipi di risultati. La sezione superiore mostra le metriche Core Web Vitals di un sito dal rapporto Chrome UX, una raccolta di dati sulle prestazioni reali degli utenti di Chrome.
Il rapporto seguente mostra le stesse metriche, ma provengono da un ambiente di laboratorio controllato in esecuzione su Google Lighthouse. Questi dati possono essere utili per testare nuove funzionalità prima di pubblicarle in tempo reale.
Se i dati INP del sito non sono disponibili, controlla il relativo tempo di blocco totale (TBT). Questa metrica misura un diverso tipo di reattività. Si concentra sul tempo per cui a una pagina viene impedito di rispondere all’interazione durante il caricamento della pagina.
Verso il basso, ci sono suggerimenti su come migliorare le metriche Core Web Vitals, che si mostrano in questo modo:
Come ottimizzare per Interaction to Next Paint (INP)
Parliamo di come eseguire l’ottimizzazione INP sul tuo sito web.
Importante! La maggior parte di questi metodi richiedono una certa conoscenza tecnica di JavaScript. Prima di apportare modifiche al tuo sito web, assicurati di eseguirne il backup in caso di errori.
1. Ottimizza l’esecuzione di JavaScript
JavaScript è un componente importante di molte pagine web. Aggiunge vari elementi interattivi ma può anche rallentare le prestazioni del sito.
Una volta eseguito, JavaScript viene eseguito sul thread principale, quello responsabile del rendering di una pagina web. Se il codice è inefficiente, può bloccare il thread e impedire alla pagina di rispondere all’interazione dell’utente.
La chiave per accelerare la reattività è ottimizzare il tuo JavaScript, cosa che puoi fare:
Minimizzare i file JavaScript. Ridurrà le dimensioni di JavaScript, facendoli caricare più velocemente.
Abilitazione della compressione GZip. Un altro metodo popolare per ridurre le dimensioni dei file e dei dati del sito.
Utilizzare un framework JavaScript. Questo strumento può aiutarti a organizzare il tuo codice JavaScript per renderlo più efficiente. AngularJS e jQuery sono alcuni esempi ben noti.
Utilizzare una CDN. Abbreviazione di Content Delivery Network, questa funzione servirà i tuoi file JavaScript da server vicini al tuo pubblico target, migliorando i tempi di caricamento. Per utilizzare la CDN interna di WP-Hosting, gli utenti devono acquistare un piano di hosting Business o superiore.
2. Utilizzare i Web Worker
I Web Worker sono un servizio che consente l’esecuzione di JavaScript in modo indipendente dal thread principale. Sono utili per eseguire operazioni complesse in background.
Supponiamo che tu abbia un sito Web WordPress pieno di immagini, video e dati. I Web Worker possono scaricare questi pesanti calcoli JavaScript su un thread in background per evitare il congelamento dell’interfaccia.
Per utilizzare i web work, dovrai creare due file JavaScript. Uno è main.js per avviare le attività dello script web worker:
// main.js
if (window.Worker) {
// Create a new worker instance
const myWorker = new Worker('worker-script.js');
// Send a message to the worker
myWorker.postMessage('Hello Worker!');
// Listen for messages from the worker
myWorker.onmessage = function(e) {
console.log('Message received from worker', e.data);
};
} else {
console.log('Your browser does not support Web Workers.');
}
Un altro esempio di worker.js è :
// worker.js
onmessage = function(e) {
console.log('Message received from main script', e.data);
// Perform heavy computation or data processing here
// Then send a message back to the main script
postMessage('Hello Main Script!');
}
Per includere questi script nel tuo sito web, controlla la documentazione specifica della tecnologia o della piattaforma e segui la procedura standard.
Per gli utenti di WordPress, utilizza la funzione wp_enqueue_script per includere script di lavoro web nel file Functions.php del tuo tema.
3. Suddividi i compiti lunghi
Suddividere le lunghe attività JavaScript è un altro modo per prevenire il blocco del thread principale.
Usiamo un esempio di acquirenti online che navigano in un sito di e-commerce. Senza suddividere attività lunghe, il thread principale deve recuperare, elaborare ed eseguire il rendering di grandi quantità di dati e immagini di prodotto contemporaneamente, consumando molto tempo e risorse.
Mentre questo processo avviene, il thread principale è occupato. Ciò fa sì che il sito Web si carichi lentamente e non sia in grado di rispondere alla successiva interazione dell’utente.
La suddivisione di attività lunghe consente al browser Web di gestire blocchi più piccoli alla volta. Di conseguenza, il thread principale è libero di svolgere compiti più essenziali.
Puoi utilizzare due tipi di codice per separare attività lunghe:
setTimeout. Una funzione JavaScript incorporata che pianifica l’esecuzione di un’attività specifica dopo un determinato ritardo in millisecondi. Può rinviare l’esecuzione a un momento successivo, evitando che il thread principale venga bloccato per un periodo prolungato.
requestIdleCallback. Questa API fornisce un approccio più efficiente poiché garantisce che le funzioni vengano eseguite durante i periodi di inattività. Offre anche un parametro di scadenza, che ti consente di controllare quanto tempo può richiedere l’attività senza influenzare processi importanti.
4. Dare priorità alla disponibilità degli input
La disponibilità dell’input si riferisce al momento in cui una pagina Web è pronta per rispondere all’interazione dell’utente. Quando non lo è, di solito significa che il thread principale del browser è occupato a svolgere altre attività.
Ecco come dare priorità alla disponibilità dell’input per migliorare l’INP:
- Ritardo dei JavaScript non fondamentali. Alcuni JavaScript non sono essenziali per il caricamento iniziale della pagina e possono essere eseguiti dopo il contenuto principale. Ciò consente al thread principale di dare priorità alle interazioni dell’utente e migliorare la reattività complessiva della pagina.
- Throttling. Questa tecnica controlla la frequenza di esecuzione di una funzione. Ad esempio, quando gli utenti scorrono verso il basso, quell’evento può attivare lo stesso codice centinaia di volte al secondo. La limitazione gli consente di essere eseguito solo una volta ogni determinato millisecondo circa, indipendentemente da quante volte l’evento viene effettivamente attivato.
- Debouncing. Ciò impedisce che una funzione venga eseguita nuovamente finché non è trascorso un po’ di tempo. Ad esempio, quando gli utenti ridimensionano la finestra del browser, questo evento può attivare ripetutamente lo stesso processo. Il debouncing può ritardarne l’esecuzione finché l’utente non interrompe il ridimensionamento per un periodo di tempo specificato.
- Passive listeners. I listeners di eventi programmano e individuano eventi specifici, come scorrimenti e tocchi(il dito dell’utente che si muove sullo schermo). Renderli passivi dirà al browser di non attendere il completamento dell’esecuzione di una determinata funzione e di continuare con altre attività nel frattempo.
5. Fornisci feedback immediato
Alcune interazioni possono comportare notevoli ritardi nella risposta, come l’invio di un modulo con più input di dati.
È qui che entra in gioco il feedback immediato. Questa tattica fornisce agli utenti un’indicazione visiva che il sito web ha ricevuto e sta elaborando la loro richiesta.
Con un feedback immediato, gli utenti non si chiederanno se il sito web ha registrato il loro input. Può dare l’impressione di prestazioni più veloci, anche se non riduce il tempo di elaborazione effettivo.
Dai un’occhiata ad alcuni esempi di segnali di feedback immediati:
- Indicatori di caricamento. Mostra uno spinner o una barra di avanzamento quando un processo è in corso, soprattutto quando si visualizzano dati o si passa a una nuova pagina.
- Pop-up di riconoscimento. Per azioni come aggiungere un prodotto al carrello, è utile visualizzare un messaggio che conferma che l’azione sia andata a buon fine.
- Convalida del campo modulo. Ad esempio, se un utente ha inserito un indirizzo e-mail formattato in modo errato, mostra immediatamente un messaggio di errore anziché attendere l’invio del modulo.
Cosa significa Interaction to Next Paint (INP) per i proprietari dei siti
L’INP e il posizionamento del sito web avranno una forte correlazione. La mancata ottimizzazione può portare a una scarsa velocità del sito web, a una scarsa esperienza utente e, di conseguenza, a prestazioni del traffico organico.
In effetti, migliorare l’INP comporta vantaggi aziendali significativi. Perché è più probabile che i visitatori rimangano ed esplorino i loro contenuti.
Identificare ciò che rallenta la reattività del tuo sito web è fondamentale per ottimizzare l’INP. Conduci dei test di produzione, esamina il modo in cui il tuo sito web gestisce l’input degli utenti e, se necessario, consulta uno sviluppatore web.
Domande frequenti sull’interazione con Next Paint (INP).
Consulta le risposte alle domande più frequenti sul fattore di ranking di Google INP.
L’INP è una metrica fondamentale dei Web Vitals?
Sì, INP è una metrica Core Web Vitals e sostituirà il FID per misurare la reattività a marzo 2024.
Qual’è un buon punteggio INP?
Un buon punteggio INP è inferiore a 200 ms. Un valore compreso tra 200 e 500 ms è considerato come da migliorare, mentre qualsiasi valore superiore a 500 ms è scarso.
Qual è la differenza tra INP e primo ritardo di ingresso?
Il FID misura il tempo di una pagina web per rispondere al primo input dell’utente, mentre l’INP valuta il tempo di risposta a qualsiasi interazione da parte del visitatore del sito web, non solo la prima. Ciò rende INP una metrica di reattività più completa.
Come identificare i problemi INP sul tuo sito web?
Utilizza PageSpeed Insights per ottenere il punteggio INP del tuo sito web e suggerimenti per migliorarne le prestazioni.
Conclusione
L’abbreviazione di Interaction to Next Paint, INP è una metrica Core Web Vitals di prossima uscita che sostituirà FID. Misura il tempo impiegato da un sito Web per rispondere all’interazione dell’utente. Più basso è il punteggio, più veloce sarà la reattività del tuo sito.
La differenza tra INP e FID è che il primo misura tutti i ritardi di interazione dell’utente in un’intera sessione. La seconda metrica si concentra sullo stesso elemento solo alla prima apertura del sito web.
Utilizza PageSpeed Insights per misurare l’INP del tuo sito web. Se i dati non sono disponibili, puoi anche fare riferimento alla metrica TBT del tuo sito.
L’ottimizzazione per INP prevede diversi metodi, dal rendere più efficiente l’esecuzione di JavaScript e l’utilizzo dei web work alla definizione delle priorità sulla disponibilità dell’input. Indipendentemente dal processo, esegui il backup del tuo sito web per anticipare eventuali errori quando apporti modifiche.
