Indice dei contenuti dell'articolo:
Google ha appena annunciato che Interaction to Next Paint, o INP, sostituirà First Input Delay nei Core Web Vitals. Cosa significa questo per i siti WordPress, ma anche i siti in generale e cosa puoi fare ora per assicurarti di essere pronto per il cambiamento?
Questo articolo ti darà una panoramica di tutto ciò che devi sapere su questa nuova ed importantissima metrica.
Cos’è Interaction to Next Paint (INP)?
Interaction to Next Paint, spesso abbreviato come INP, rappresenta un passo avanti nell’evoluzione delle metriche di performance del web. È una metrica relativamente nuova che mira a fornire una misurazione più accurata e utile dell’esperienza dell’utente durante l’interazione con una pagina web.
Nel suo nucleo, l’INP si concentra sul tempo che il browser impiega per “dipingere” o rendere il prossimo frame dopo che un utente ha interagito con la pagina. In termini pratici, ciò significa che misura il lasso di tempo tra il momento in cui un utente, ad esempio, clicca su un pulsante e il momento in cui vede un cambiamento visibile sullo schermo come risultato di quel clic.
Potrebbe sembrare una misura semplice, ma in realtà fornisce un’indicazione molto significativa dell’esperienza dell’utente. Immagina, ad esempio, di fare clic su un pulsante su un sito web. Ti aspetteresti un qualche tipo di feedback immediato per confermare che il tuo clic ha avuto un effetto – forse il pulsante cambia colore o appare un messaggio. Ma se non vedi alcuna risposta visiva, potresti iniziare a chiederti se il tuo clic è stato registrato. Dopo un po’, potresti addirittura iniziare a sentirti frustrato. Ecco perché l’INP è così importante: misura quanto tempo passa prima che tu veda un feedback visivo dopo un’interazione, il che può essere un indicatore chiave della qualità dell’esperienza dell’utente sul tuo sito web.
Inoltre, l’INP è particolarmente utile perché tiene conto dell’intero ciclo di vita della pagina, non solo del primo input. Questo lo rende una misura più rappresentativa dell’esperienza dell’utente rispetto ad alcune altre metriche, poiché riflette il fatto che gli utenti interagiscono con una pagina in modi diversi e in momenti diversi durante la loro visita. Pertanto, ottimizzare per un INP basso può aiutare a garantire che il tuo sito web offra un’esperienza utente coerente e reattiva da inizio a fine.
Come si confronta INP con FID?
L’Interaction to Next Paint, o INP, è una metrica di performance del web che offre una prospettiva unica e preziosa sull’esperienza dell’utente durante l’interazione con una pagina web. Al cuore del suo calcolo, l’INP tiene in considerazione una quantità di tempo di elaborazione più ampia rispetto ad altre metriche quando misura la reattività di una pagina dopo un’interazione dell’utente. Questo significa che è in grado di fornire una rappresentazione più accurata e completa di come un utente vive un ritardo nell’interattività su un sito web.
Prendiamo, per esempio, una metrica correlata chiamata First Input Delay, o FID. Il FID misura il tempo che intercorre tra il momento in cui un utente interagisce con un elemento della pagina (come fare clic su un pulsante o su un link, o toccare un elemento su un dispositivo touch) e il momento in cui il browser è in grado di rispondere a quell’interazione. È una misura utile, ma è limitata perché si concentra solo sulla prima interazione dell’utente con la pagina.
L’INP va oltre. Non solo misura il tempo che il browser impiega per rispondere a un’interazione dell’utente, ma estende questa misura per includere il tempo che impiega il browser per “dipingere” o rendere il prossimo frame dopo quell’interazione. Questo potrebbe essere, per esempio, il tempo necessario per visualizzare una risposta visiva a un clic o a un tap dell’utente.
Inoltre, un vantaggio importante dell’INP rispetto al FID è che l’INP viene misurato per l’intera durata di una sessione dell’utente, non solo per la prima interazione. Questo significa che l’INP può fornire una panoramica più completa e accurata dell’esperienza dell’utente durante l’intera visita a una pagina, piuttosto che limitarsi a un singolo punto nel tempo. Questo è un aspetto positivo perché riflette la realtà che l’esperienza dell’utente su un sito web è dinamica e può cambiare nel corso del tempo. Pertanto, ottimizzare per un INP basso può contribuire a migliorare l’esperienza dell’utente nel suo insieme, piuttosto che solo in un singolo momento.
Dalla documentazione di Google raggiungibile a https://web.dev/inp/
I dati di utilizzo di Chrome mostrano che il 90% del tempo di un utente su una pagina viene trascorso dopo il suo caricamento, quindi, una misurazione accurata della reattività durante il ciclo di vita della pagina è importante. Questo è ciò che valuta la metrica INP.
INP segnala il peggior tempo o quasi.
Sia FID che INP possono essere misurati solo con utenti reali. Il tempo totale di blocco (TBT) è una metrica di laboratorio che si può tracciare quando si eseguono test individuali che possono correlarsi sia con FID che con INP, ma solo per eventi che possono verificarsi durante il caricamento della pagina.
Qual è un buon valore INP ?
Assegnare etichette come “buono” o “scarso” a una metrica di reattività è difficile. Da un lato, vuoi incoraggiare pratiche di sviluppo che diano priorità a una buona reattività. Dall’altro lato, devi tenere conto del fatto che esiste una notevole variabilità nelle capacità dei dispositivi che le persone utilizzano per stabilire aspettative di sviluppo realizzabili.
Per garantire che stai fornendo esperienze utente con una buona reattività, una buona soglia da misurare è il 75esimo percentile dei caricamenti di pagine registrati sul campo, suddivisi tra dispositivi mobili e desktop:
- Un INP al di sotto o a 200 millisecondi significa che la tua pagina ha una buona reattività.
- Un INP superiore a 200 millisecondi e al di sotto o a 500 millisecondi significa che la reattività della tua pagina ha bisogno di miglioramenti.
- Un INP superiore a 500 millisecondi significa che la tua pagina ha una scarsa reattività.
Cosa causa una scarsa performance di INP?
L’esecuzione di JavaScript che svolge compiti di lunga durata sul thread principale è la causa principale dei problemi legati all’INP, o Interaction to Next Paint. Per comprendere meglio, il thread principale è il cuore pulsante dell’elaborazione del browser. Quando esegue un task JavaScript, non può contemporaneamente rispondere agli input dell’utente. Quindi, se un task JavaScript è particolarmente lungo, può ritardare la risposta del browser agli input dell’utente, compromettendo la reattività del sito. Questo può causare ritardi nell’INP, poiché l’INP misura il tempo necessario per visualizzare un cambiamento sullo schermo in risposta a un input dell’utente.
A complicare ulteriormente le cose, anche gli aggiornamenti di rendering di grandi dimensioni possono avere un impatto sull’INP. Quando il browser deve elaborare un grande aggiornamento di rendering – che potrebbe coinvolgere cambiamenti su larga scala nella visualizzazione di una pagina – questo può richiedere tempo e risorse, allungando ulteriormente il tempo di INP.
Quando si tratta di siti WordPress, questi problemi sono spesso causati da plugin WordPress o script di terze parti. Questi possono aggiungere complessità e carichi di lavoro aggiuntivi al thread principale, causando un aumento dell’INP.
Inoltre, l’uso di un framework JavaScript come Vue o React per renderizzare l’interfaccia utente del sito può contribuire a un INP più elevato. Questi framework sono potenti strumenti per la creazione di interfacce utente ricche e dinamiche, ma possono anche comportare un notevole carico di lavoro per il browser, specialmente se utilizzati in modo non ottimale.
Infine, un altro possibile colpevole è il codice JavaScript inefficiente all’interno del tema WordPress stesso. Se il codice JavaScript del tema non è stato scritto o ottimizzato in modo efficiente, può causare ritardi e problemi di performance che possono influenzare l’INP. Pertanto, è sempre consigliabile esaminare e ottimizzare il codice del tema per garantire le migliori prestazioni possibili.
Come misuro e miglioro l’INP?
Come menzionato in precedenza, INP è solo una metrica di campo. Questo significa che viene misurato solo per gli utenti che interagiscono con il tuo sito. Non puoi eseguire Lighthouse o WebPageTest al caricamento della pagina per testare questa metrica. Invece, dobbiamo guardare i dati reali degli utenti, come nel Chrome User Experience Report, o CrUX.
Puoi utilizzare il tool gratuito TREO sitespeed per guardare i dati CrUX per il tuo intero dominio. Puoi anche eseguire PageSpeed Insights sulle pagine più popolari e talvolta ottenere dati INP a livello di pagina se quella pagina riceve abbastanza traffico.
Il debugging e la correzione di INP saranno più difficili rispetto all’ottimizzazione per Largest Contentful Paint e Cumulative Layout Shift. Tuttavia, un passo che puoi fare ora per facilitare quel compito è pulire il tuo sito.
Abbiamo lavorato con diversi commercianti WordPress per ottimizzare i loro siti web. Abbiamo anche analizzato molti altri oltre ad analizzare i siti WordPress in tutto il web attraverso CrUX e HTTPArchive. Uno dei problemi più comuni che vediamo è l’eccessivo carico degli script di terze parti. Questo spesso deriva dai plugin WordPress che sono state installati. Alcune di queste non sono più utilizzate, e alcune di queste potreste aver pensato di aver rimosso ma il codice è ancora lì.
Come si trovano alcuni dei peggiori colpevoli?
Identificare i responsabili di un INP (Interaction to Next Paint) elevato può richiedere un’analisi approfondita del comportamento del tuo sito web, dal caricamento del JavaScript fino all’esecuzione e al rendering delle pagine. Ecco alcuni passaggi chiave da seguire:
- Utilizzare gli strumenti di sviluppo del browser: Strumenti come l’analizzatore di prestazioni di Chrome possono aiutare a individuare le attività JavaScript di lunga durata che potrebbero causare problemi di INP. Questo strumento fornisce un tracciato dettagliato del tempo di elaborazione per ogni attività JavaScript durante una sessione, consentendoti di identificare qualsiasi attività che richiede più tempo del previsto.
- Analizzare l’uso del JavaScript: Un elevato INP può essere causato da script JavaScript pesanti o inefficienti. Questo potrebbe includere l’uso eccessivo di script di terze parti, script che richiedono molta elaborazione o script che bloccano il rendering della pagina. Uno strumento come Lighthouse può fornire informazioni dettagliate sull’uso del JavaScript sul tuo sito e suggerire modi per ottimizzarlo.
- Monitorare l’attività del thread principale: Un elevato INP può essere causato da attività che bloccano il thread principale, come l’elaborazione JavaScript di lunga durata o grandi aggiornamenti di rendering. Strumenti come Lighthouse e l’analizzatore di prestazioni di Chrome possono fornire informazioni dettagliate sulle attività del thread principale.
- Analizzare l’uso delle risorse: Un elevato INP può essere causato anche da un utilizzo inefficace delle risorse, come il caricamento eccessivo di risorse o l’utilizzo di risorse di grandi dimensioni. Strumenti come Lighthouse e PageSpeed Insights possono fornire un’analisi dettagliata dell’uso delle risorse e suggerire modi per ottimizzarlo.
- Analizzare l’uso della rete: Un elevato INP può essere causato da problemi di rete, come la latenza elevata o il caricamento lento delle risorse. Strumenti come il pannello Network degli strumenti di sviluppo di Chrome possono fornire un’analisi dettagliata dell’attività di rete e aiutare a identificare eventuali problemi.
Debugging INP
Il debugging di Interaction to Next Paint (INP) rappresenta una sfida maggiore rispetto al First Input Delay (FID) poiché INP riguarda l’intero ciclo di interazione dell’utente con il sito, e non solo il primo input. In altre parole, mentre FID si focalizza sul ritardo tra il primo input dell’utente (come un clic o un tocco) e la risposta del browser, INP misura il tempo tra un input dell’utente e il momento in cui il browser visualizza il cambiamento relativo a quell’input. Questo significa che l’INP tiene conto di tutte le interazioni dell’utente durante la sessione, rendendolo un indicatore più complesso e completo dell’esperienza dell’utente.
Affrontare il debugging di INP richiede una comprensione dettagliata del funzionamento del browser e delle prestazioni del JavaScript. Gli strumenti di sviluppo di Chrome, in particolare l’analizzatore di prestazioni, possono fornire informazioni preziose sull’andamento di INP durante una sessione. Questi strumenti possono aiutare a identificare lunghe attività di scripting o grandi aggiornamenti del rendering che potrebbero influenzare negativamente l’INP.
Il team di Chrome ha rilasciato un set completo di documentazione per assistere nello sviluppo e nell’ottimizzazione di INP. Questi articoli coprono vari aspetti della metrica INP, incluso come viene calcolato, come può essere monitorato e misurato, e come si confronta con altre metriche dei Core Web Vitals. La documentazione fornisce anche consigli pratici su come ottimizzare l’INP, come minimizzare il tempo di elaborazione del JavaScript, gestire in modo efficiente le risorse e ottimizzare il rendering del browser.
È importante notare che l’ottimizzazione di INP dovrebbe andare di pari passo con l’ottimizzazione di altre metriche di prestazione. L’obiettivo dovrebbe essere quello di fornire un’esperienza utente fluida e reattiva, e l’ottimizzazione dell’INP può essere un elemento chiave per raggiungere questo obiettivo.
Conclusioni
INP che sostituisce FID nei Core Web Vitals è una grande notizia. Centrerà meglio l’esperienza dell’utente in relazione alla reattività e all’interattività nelle metriche. L’esperienza dell’utente è la chiave per conversioni più alte, e questo cambiamento allineerà anche i ranking dei motori di ricerca con quella esperienza dell’utente.
Inizia ora a ottimizzare per Interaction to Next Paint. Sia per prepararti per il cambio sia per migliorare l’esperienza dei clienti che visitano il tuo sito oggi. Nei prossimi mesi, pubblicheremo ulteriori contenuti di apprendimento per aiutare i commercianti, gli sviluppatori di temi e gli sviluppatori di app nell’ecosistema WordPress ad aiutare con le tue specifiche esigenze.
