Aggiornamento del 7 Aprile 2024:
Google pubblica un video che spiega come ottimizzare INP
Google ha messo a disposizione un tutorial video che guida nello scoprire e risolvere le problematiche legate a Interaction to Next Paint (INP) nei siti web. Questa iniziativa arriva in un momento cruciale, visto che l’INP ha preso il posto del First Input Delay (FID) tra i Core Web Vitals, indicando una svolta importante nel modo in cui Google interpreta l’esperienza degli utenti online.
Il video qui sopra suggerisce di analizzare le performance INP del proprio sito utilizzando strumenti affidabili come PageSpeed Insights e il rapporto sull’esperienza utente di Chrome. Si sottolinea l’importanza di mirare a un livello di performance ‘buono’, che corrisponde al 75° percentile dei tempi di caricamento delle pagine.
Breve introduzione sul Chrome User Experience Report:
Immagina di avere una specie di grande diario online in cui milioni di persone annotano com’è stata la loro esperienza navigando su vari siti web da dispositivi diversi, come computer o smartphone. Questo diario racconta storie su quanto velocemente si caricano le pagine, se ci sono intoppi mentre si naviga, e quanto piacevolmente si interagisce con i siti. Bene, il Chrome’s User Experience Report è proprio questo: una vasta raccolta di esperienze di navigazione reali degli utenti Chrome da tutto il mondo. PageSpeed Insights (PSI) è uno strumento che utilizza i dati di CrUX per fornire analisi delle prestazioni di una pagina web, sia in mobilità che su desktop.
Torniamo a noi.
Per elevare i punteggi INP, gli sviluppatori devono identificare e correggere vari problemi, come script JavaScript che impiegano troppo tempo, eccessivo carico sul thread principale, o strutture DOM troppo complesse.
Guida passo passo del tutorial Google
Il tutorial fa luce su come utilizzare gli strumenti di sviluppo di Chrome (Chrome DevTools) per trovare i difetti legati all’INP.
Ecco i passaggi chiave illustrati:
- Apertura di Chrome DevTools: si inizia aprendo il pannello DevTools nel browser. Questo può essere fatto cliccando col tasto destro su una pagina e selezionando “Ispeziona”, oppure usando le scorciatoie da tastiera Ctrl+Shift+I (Windows) o Cmd+Opzione+I (Mac).
- Simulazione di un dispositivo mobile più lento: dentro DevTools, attiva l’emulazione mobile cliccando sull’icona corrispondente, poi vai alla scheda “Rete” e scegli “Mobile di livello intermedio” per simulare una connessione più lenta.
- Registrazione delle interazioni utente: spostati sulla scheda “Prestazioni”, avvia la registrazione e naviga nel sito come farebbe un utente, interagendo con elementi che scatenano azioni. Concludi la registrazione per passare all’analisi.
- Analisi delle prestazioni: dopo la registrazione, esamina il grafico delle prestazioni e identifica le attività che rallentano le interazioni.
L’introduzione di INP nei Core Web Vital ha significative implicazioni per la SEO. Google evidenzia l’importanza di adeguarsi a questo cambiamento per migliorare l’esperienza utente. I consulenti SEO devono quindi restare aggiornati sugli strumenti e sulle pratiche migliori per mantenere i siti competitivi.
Questo approccio garantisce non solo una migliore posizione nei risultati di ricerca ma anche un’esperienza utente di qualità superiore.
INP: una panoramica
Next Paint (INP) è una metrica del Core Web Vital. Ha sostituito il First Input Delay (FID) nel marzo 2024. INP valuta la reattività utilizzando dati dall’API Event Timing. Se un’interazione rende una pagina non reattiva, l’esperienza utente risulterà pessima. INP osserva la latenza di tutte le interazioni fatte da un utente con la pagina. Fornisce un unico valore al di sotto del quale si trovano tutte (o quasi tutte) le interazioni. Un basso INP indica che la pagina ha risposto rapidamente a tutte, o alla grande maggioranza, delle interazioni dell’utente.
Dati di utilizzo di Chrome mostrano che il 90% del tempo che un utente sta su una pagina è dopo il caricamento della stessa. Quindi, una misurazione accurata della reattività durante il ciclo di vita della pagina è importante. Questo è ciò che valuta la metrica INP.
Una buona reattività significa che una pagina risponde rapidamente alle interazioni. Quando una pagina risponde a un’interazione, il risultato è un feedback visivo. Questo è presentato dal browser nel prossimo frame. Il feedback visivo indica se, per esempio, un articolo aggiunto a un carrello di acquisto online viene effettivamente aggiunto, se si è aperto un menu di navigazione, se un modulo di iscrizione alla newsletter funziona senza problemi, se il login è autenticato dal server, e così via.
Alcune interazioni richiederanno naturalmente più tempo di altre. Ma per interazioni particolarmente complesse, è importante fornire rapidamente un feedback visivo iniziale. Questo segnala all’utente che qualcosa sta accadendo. Pertanto, l’intento di INP non è misurare tutti gli effetti finali dell’interazione, ma il tempo in cui è bloccata la prossima paint. Ritardando il feedback visivo, potresti dare agli utenti l’impressione che la pagina non stia rispondendo alle loro azioni.
L’obiettivo di INP è assicurare che il tempo dall’inizio di un’interazione utente fino al paint del prossimo frame sia il più breve possibile. Questo vale per tutte o la maggior parte delle interazioni fatte dall’utente.
In questo video pubblicato da Google (clicca per vederlo), l’esempio a destra fornisce un immediato feedback visivo che un accordion si sta aprendo. Dimostra anche come una scarsa reattività può causare molteplici risposte involontarie. A sinistra, azioni lunghe bloccano l’apertura dell’accordion. Questo porta l’utente a cliccare più volte o abbandonare la pagina, pensando che qualcosa sia rotto.
Cos’è INP?
INP è una metrica che valuta la reattività complessiva di una pagina alle interazioni dell’utente. Osserva la latenza di tutti i clic, tap e interazioni da tastiera che si verificano durante la visita di un utente a una pagina. Il valore finale di INP è l’interazione più lunga osservata, ignorando gli outlier.
Come viene calcolato INP?
Un’interazione è un gruppo di gestori di eventi che si attivano durante lo stesso gesto logico dell’utente. Ad esempio, le interazioni “tap” su un dispositivo touch includono eventi multipli, come pointerup, pointerdown e click. Un’interazione può essere guidata da JavaScript, CSS, controlli integrati nel browser (come gli elementi del modulo), o una combinazione di questi.
La latenza di un’interazione consiste nella singola durata più lunga di un gruppo di gestori di eventi che guidano l’interazione. Va dal momento in cui l’utente inizia l’interazione al momento in cui il prossimo frame viene presentato con un feedback visivo.
Qual è un buon punteggio INP?
È difficile etichettare una metrica di reattività come “buona” o “scarsa”. Da un lato, vuoi incoraggiare pratiche di sviluppo che diano priorità a una buona reattività. Dall’altro, devi tenere conto del fatto che c’è una notevole variabilità nelle capacità dei dispositivi che le persone utilizzano per stabilire aspettative di sviluppo raggiungibili.
Per garantire che tu stia offrendo un’esperienza utente con una buona reattività, una buona soglia da misurare è il 75° percentile dei caricamenti di pagina registrati sul campo, segmentati tra dispositivi mobile e desktop:
- Un INP inferiore o uguale a 200 millisecondi significa che la tua pagina ha una buona reattività.
- Un INP superiore a 200 millisecondi e inferiore o uguale a 500 millisecondi significa che la reattività della tua pagina ha bisogno di miglioramento.
- Un INP superiore a 500 millisecondi significa che la tua pagina ha una scarsa reattività.
Per quanto riguarda INP, vengono osservati solo i seguenti tipi di interazione:
- Fare clic con un mouse.
- Toccare su un dispositivo con un touchscreen.
- Premere un tasto su una tastiera fisica o su schermo.
Muovere il mouse e scorrere non influisce su INP. Tuttavia, lo scorrimento con la tastiera (barra spaziatrice, pag su, pag giù, ecc.) coinvolge un tasto, che può innescare altri eventi misurati da INP. Qualsiasi scorrimento risultante non viene considerato nel calcolo di INP.
Le interazioni possono consistere in due parti, ciascuna con più eventi. Ad esempio, un clic di tastiera consiste negli eventi “keydown”, “keypress” e “keyup”. Le interazioni di tocco contengono eventi “pointerup” e “pointerdown”. L’evento con la durata più lunga all’interno dell’interazione viene scelto come latenza dell’interazione.
Una rappresentazione di un’interazione più complessa contiene due interazioni. Il primo è un evento “mousedown”, che produce un frame prima che il pulsante del mouse venga rilasciato. La prima parte dell’interazione riceve un input quando l’utente fa clic su un pulsante del mouse. Tuttavia, prima che rilascia il pulsante del mouse, viene presentato un frame. Quando l’utente rilascia il pulsante del mouse, è necessario eseguire un’altra serie di gestori di eventi prima che venga presentato il prossimo frame.
INP viene calcolato quando l’utente lascia la pagina, creando un singolo valore che rappresenta l’interattività complessiva della pagina durante l’intero ciclo di vita della pagina stessa. Un basso INP significa che una pagina risponde in modo affidabile all’input dell’utente.
Perché INP è diverso da First Input Delay (FID)?
INP considera tutte le interazioni della pagina, First Input Delay (FID) tiene conto solo della prima interazione. Misura solo il ritardo dell’input della prima interazione, non il tempo necessario per eseguire gli handler di eventi, o il ritardo nella presentazione del prossimo frame.
Come ottimizzare INP?
Prima di poter risolvere interazioni lente, avrai bisogno di dati che ti dicono se l’INP del tuo sito è scadente o necessita di miglioramento. Una volta ottenute queste informazioni, puoi iniziare a diagnosticare le interazioni lente e lavorare verso una soluzione.
Se non ti affidi a un fornitore RUM (ad esempio Pingdom) per ottenere dati sul campo, la guida Google consiglia di utilizzare il Chrome User Experience Report (CrUX) tramite PageSpeed Insights per colmare le lacune. CrUX è il dataset ufficiale del programma Core Web Vitals e fornisce un riassunto ad alto livello delle metriche per milioni di siti web, incluso INP. Tuttavia, CrUX spesso non fornisce i dati contestuali che otterresti da un fornitore RUM per aiutarti ad analizzare i problemi. Per questo motivo, consigliamo ancora ai siti di utilizzare un fornitore RUM quando possibile.
Ci sono alcune strategie per individuare interazioni lente. Tali strategie includono il seguire flussi utente comuni e testare le interazioni lungo il percorso, oltre che interagire con la pagina durante il caricamento, quando il thread principale è spesso più occupato, per evidenziare interazioni lente durante quella parte cruciale dell’esperienza utente.
Una volta identificata un’interazione lenta, il passo successivo è ottimizzarla. Le interazioni possono essere suddivise in tre fasi:
- Il ritardo di input, che inizia quando l’utente avvia un’interazione con la pagina, e termina quando i callback dell’evento per l’interazione iniziano a funzionare.
- Il tempo di elaborazione, che consiste nel tempo necessario per eseguire i callback degli eventi fino al completamento.
- Il ritardo di presentazione, che è il tempo necessario al browser per presentare il frame successivo che contiene il risultato visivo dell’interazione.
La somma di queste tre fasi è la latenza totale dell’interazione. Ogni singola fase di un’interazione contribuisce con una certa quantità di tempo alla latenza totale dell’interazione, quindi è importante sapere come ottimizzare ogni parte dell’interazione in modo che funzioni tutto correttamente.
Quando ottimizzi le interazioni, è importante capire che ogni contesto di navigazione avrà il suo thread principale. Questo significa che la pagina principale avrà un thread principale, ma ogni elemento <iframe> sulla pagina avrà il suo thread principale. L’INP verrà riportato a livello di pagina, includendo eventuali interazioni lente sulla pagina o qualsiasi iframe all’interno di quella pagina. Assicurati di capire in quale frame avviene un’interazione, per capire quale thread principale guardare. Tuttavia, anche con più thread principali, i dispositivi con risorse limitate possono risentire di un impatto su questi thread apparentemente indipendenti.
Quando un utente interagisce con una pagina, la prima parte di quell’interazione è il ritardo di input. A seconda dell’altra attività sulla pagina, i ritardi di input possono essere notevoli. Questo potrebbe essere dovuto all’attività sul thread principale (forse a causa del caricamento, dell’analisi e della compilazione degli script), alla gestione del fetch, alle funzioni del timer, o anche ad altre interazioni che avvengono in rapida successione e si sovrappongono l’una all’altra.
Un aspetto cruciale dell’interattività nella vita di una pagina si verifica all’avvio. Mentre una pagina si carica, essa renderizza inizialmente, ma ricorda che una pagina renderizzata non significa che sia completamente caricata. A seconda delle risorse necessarie per la piena funzionalità, gli utenti potrebbero tentare di interagire con la pagina ancora in caricamento.
Un fattore che può prolungare il ritardo di input durante il caricamento è la valutazione degli script. Dopo aver recuperato un file JavaScript dalla rete, il browser deve ancora lavorare per farlo funzionare; questo lavoro include la verifica della validità della sintassi, la compilazione in bytecode e infine l’esecuzione.
A seconda delle dimensioni di uno script, questo lavoro può introdurre compiti lunghi sul thread principale, ritardando la risposta del browser ad altre interazioni. Per mantenere la tua pagina reattiva durante il caricamento, devi capire come ridurre questi compiti lunghi in modo che la pagina rimanga pronta.
Le ottimizzazioni si possono ovviamente eseguire dopo aver fatto una diagnostica.
Il ritardo di input è solo la prima parte di ciò che misura INP. Devi anche assicurarti che le callback degli eventi che si attivano in risposta a un’interazione utente possano completarsi il più velocemente possibile.
Ciò che puoi fare è suddividere il lavoro nelle callback degli eventi in compiti separati. Questo impedisce che il lavoro collettivo diventi un compito lungo che blocca il thread principale, permettendo ad altre interazioni di avviarsi prima.
L’uso di setTimeout è un modo per suddividere i compiti, perché la callback passata ad esso funziona in un nuovo compito.
Il ritardo di presentazione di un’interazione va da quando terminano i callback dell’evento, fino al momento in cui il browser è in grado di disegnare il frame successivo con le modifiche visive risultanti.
Quando il DOM di una pagina è piccolo, il lavoro di rendering di solito termina rapidamente. Tuttavia, quando i DOM diventano molto grandi, il lavoro di rendering tende a aumentare con l’aumentare delle dimensioni del DOM. La relazione tra il lavoro di rendering e le dimensioni del DOM non è lineare, ma i DOM grandi richiedono più lavoro per il rendering rispetto ai DOM piccoli. Un DOM grande è problematico in due casi:
- Durante il rendering iniziale della pagina, dove un DOM grande richiede molto lavoro per rendere lo stato iniziale della pagina.
- In risposta a un’interazione dell’utente, dove un DOM grande può rendere gli aggiornamenti del rendering molto complicati, aumentando quindi il tempo necessario per il browser per presentare il frame successivo.
Ricorda che ci sono casi in cui le dimensioni grandi del DOM non possono essere ridotte significativamente. Anche se esistono approcci che puoi adottare per ridurre le dimensioni del DOM, queste tecniche possono avere un effetto limitato.
Un modo per limitare la quantità di lavoro di rendering sia durante il caricamento della pagina che in risposta alle interazioni degli utenti è fare affidamento sulla proprietà CSS content-visibility, che equivale sostanzialmente a rendere più lenti gli elementi man mano che si avvicinano al viewport. Anche se content-visibility può richiedere un po’ di pratica per essere utilizzato efficacemente, vale la pena investigarlo se il risultato è un minor tempo di rendering che può migliorare l’INP della tua pagina.
Quando il server invia l’HTML, arriva nel browser come un flusso. Il flusso indica che la risposta HTML dal server sta arrivando a pezzi. Il browser gestisce un flusso analizzando incrementalmente i pezzi di quel flusso man mano che arrivano, e lavorandoli bit per bit.
Per ottimizzare al meglio la velocità del sito e quindi INP affidati alla nostra consulenza SEO. In questo caso studio mostriamo come abbiamo migliorato la velocità di un sito.
Questo articolo è stato redatto attraverso questa fonte: https://web.dev/inp/.
