Interaction to Next Paint - Ritardo di Presentazione

Problemi di Interaction to Next Paint (INP) causati dal ritardo di presentazione

Nella nostra precedente serie di articoli abbiamo parlato dell'Interaction to Next Paint e di come identificare i problemi di Interaction to Next Paint. Se desideri approfondire le basi, questo è un ottimo punto di partenza!

In questo articolo mi concentrerò sul 'ritardo di presentazione'. Come questo influisce sull' Interaction to Next Paint e poi spiegherò come ottimizzare il ritardo di presentazione per migliorare l'Interaction to Next Paint!

In breve: l'Interaction to Next Paint (INP) misura quanto tempo impiega un utente per vedere un cambiamento visivo sulla pagina dopo aver interagito con essa. L'INP può essere scomposto in 3 componenti: 'ritardo di input', 'tempo di elaborazione' e 'ritardo di presentazione'. Ritardo di presentazione è il principale contributore al totale dell'INP, rappresentando circa il 42% del ritardo di input in media.  Ciò significa che ottimizzare la presentazione e semplificare l'HTML può avere un impatto significativo sul punteggio INP del tuo sito web.

Ritardo di Presentazione: Hai mai cliccato un pulsante e ti sei chiesto perché ci voleva una frazione di secondo di troppo per vedere il risultato? Questa è l'Interaction to Next Paint (INP) in azione. Il ritardo di presentazione è l'ultimo passaggio nel processo di interazione, che si attiva dopo che il tuo click è stato elaborato ma prima che tu veda qualsiasi cambiamento visivo. 

Comprendere il Ritardo di Presentazione

La presentazione è la fase finale di un'interazione, il ritardo di presentazione rappresenta il tempo necessario al browser per renderizzare gli aggiornamenti visivi che seguono l'interazione. Il ritardo di presentazione inizia quando i gestori di eventi dell'interazione hanno terminato l'esecuzione e termina quando il frame successivo (contenente i cambiamenti visivi) viene dipinto. Il ritardo di presentazione può essere influenzato da vari fattori, tra cui la complessità del layout, la dimensione del DOM e la quantità di lavoro di rendering richiesto.

L'Interaction to Next Paint (INP) può essere scomposto in 3 sotto-parti: 'Ritardo di Input', 'Tempo di Elaborazione' e 'Ritardo di Presentazione'

Il Ritardo di Presentazione e l'INP

La presentazione è l'ultima fase dell'INP. In media il ritardo di presentazione rappresenta circa il 42% del tempo totale dell'INP.

Con CoreDash raccogliamo milioni di dati sui Core Web Vitals ogni ora. Sulla base di questi dati il tempo del Ritardo di Presentazione rappresenta il 42% dell'Interaction to Next Paint. 

Ritardo di presentazione: Immagina di navigare con il telefono su un sito e-commerce alla ricerca di un nuovo paio di scarpe. Tocchi l'immagine di un prodotto per vedere più dettagli. Tuttavia, il tuo telefono è un po' datato e fatica a tenere il passo. In questa situazione, potresti riscontrare un valore scarso della metrica Interaction to Next Paint (INP). Ecco cosa succede: Tocchi l'immagine (Interazione). Il telefono impiega del tempo per elaborare la richiesta e aggiornare il display (Tempo di Elaborazione). Il sito web deve recuperare le informazioni aggiuntive sul prodotto e renderizzare la nuova pagina con l'immagine più grande e i dettagli (Questo può essere più lento a causa di fattori come una connessione internet lenta o una pagina prodotto complessa con molti elementi). Infine, ci vuole un tempo notevole prima che i nuovi dettagli del prodotto e l'immagine appaiano sul tuo schermo (Ritardo di Presentazione). Questo ritardo nell'INP può essere frustrante per gli utenti ed è per questo che è importante correggerlo.

Ridurre il Ritardo di Presentazione

Ridurre al minimo il ritardo di presentazione è spesso necessario per superare la metrica Interaction to Next Paint (INP) e mantenere la tua pagina reattiva. Una strategia efficace è ridurre al minimo la dimensione del Document Object Model (DOM). Un DOM più piccolo generalmente porta a tempi di rendering più rapidi, poiché il browser ha meno contenuto da elaborare e aggiornare. Gli sviluppatori dovrebbero cercare di mantenere il DOM piccolo e semplice, utilizzando tecniche come il lazy loading dei contenuti fuori schermo con la proprietà content-visibility. Inoltre, è importante prestare attenzione alla quantità di lavoro di layout attivato da un'interazione. Un lavoro di layout eccessivo può aumentare significativamente il ritardo di presentazione, portando a una user experience meno reattiva.

Il rendering lato client dell'HTML può anche influire sul ritardo di presentazione, in particolare nelle Single Page Applications (SPA). Quando l'HTML viene creato dinamicamente lato client utilizzando JavaScript, può generare task lunghi che bloccano il thread principale, potenzialmente ritardando la presentazione del frame successivo. Gli sviluppatori dovrebbero considerare attentamente le implicazioni sulle prestazioni del rendering lato client e cercare di ridurre al minimo la quantità di HTML generato dinamicamente.

Identificare Ritardi di Presentazione Lunghi

Per identificare ritardi di presentazione lunghi puoi utilizzare il profiler delle prestazioni di Chrome. Apri devtools (Ctrl-shift-i), naviga alla scheda performance, premi registra e interagisci con la pagina.,

Ora puoi analizzare la timeline di un'interazione e visualizzare le diverse fasi, incluso il ritardo di presentazione. Esaminando gli aggiornamenti di rendering che si verificano dopo che i gestori di eventi hanno terminato, puoi individuare eventuali colli di bottiglia che contribuiscono a un lungo ritardo di presentazione. 

Identificare il ritardo di presentazione con i dati RUM

Maggiori approfondimenti sulle cause del ritardo di presentazione con i Long Animation Frames

L'API Long Animation Frames (LoAF) fornisce approfondimenti dettagliati sulle cause dei ritardi di rendering, inclusi quelli che si verificano durante le interazioni degli utenti. Questa API espone i tempi e altri dati che possono aiutare gli sviluppatori a individuare le cause specifiche delle interazioni lente e a ottimizzare il loro codice di conseguenza. Strumenti RUM come CoreDash forniscono supporto per LoAF e offrono approfondimenti aggiuntivi sui long animation frames, come i dati di attribuzione degli script. Questi strumenti possono aiutare gli sviluppatori a capire quali script contribuiscono ai ritardi di rendering e a ottimizzare il loro codebase per una migliore reattività.