Diagnostica manuale delle interazioni lente nel lab

Scopri come importare i dati sul campo nel laboratorio per riprodurre e identificare le cause delle interazioni lente tramite test manuali.

Jeremy Wagner

Data di pubblicazione: 9 maggio 2023

Una parte complessa dell'ottimizzazione di Interaction to Next Paint (INP) è capire cosa causa un INP scarso. Esistono molte potenziali cause, come script di terze parti che pianificano molte attività nel thread principale, dimensioni DOM elevate, callback di eventi costosi e altri fattori.

Migliorare l'INP può essere difficile. Per iniziare, devi sapere quali interazioni tendono a essere responsabili dell'INP di una pagina. Se non sai quali interazioni sul tuo sito web tendono ad essere le più lente dal punto di vista di un utente reale, leggi l'articolo Trovare interazioni lente sul campo. Una volta che hai a disposizione i dati sul campo, puoi testare manualmente queste interazioni specifiche negli strumenti di laboratorio per capire perché sono lente.

Cosa succede se non hai dati sul campo?

Avere dati sul campo è fondamentale, in quanto ti fa risparmiare molto tempo nel tentativo di capire quali interazioni devono essere ottimizzate. Tuttavia, potresti trovarti in una posizione in cui non disponi di dati dei campi. Se la tua situazione corrisponde a questa descrizione, è comunque possibile trovare interazioni da migliorare, anche se richiede un po' più di impegno e un approccio diverso.

Il tempo di blocco totale (TBT) è una metrica di laboratorio che valuta l'adattabilità della pagina durante il caricamento e correla bene con l'INP. Se la tua pagina ha un valore di TBT elevato, potrebbe significare che la pagina potrebbe non essere molto reattiva alle interazioni degli utenti durante il caricamento della pagina.

Per scoprire il TBT della tua pagina, puoi utilizzare Lighthouse. Se il TBT di una pagina è elevato, è possibile che il thread principale sia troppo occupato durante il caricamento della pagina e questo può influire sulla reattività di una pagina in questo momento cruciale del ciclo di vita della pagina.

Per trovare interazioni lente dopo il caricamento della pagina, potresti aver bisogno di altri tipi di dati, ad esempio flussi utente comuni che potresti aver già identificato negli analytics del tuo sito web. Se lavori su un sito web di e-commerce, ad esempio, un flusso utente comune consiste nelle azioni intraprese dagli utenti quando aggiungono articoli a un carrello degli acquisti online e completano il pagamento.

Indipendentemente dal fatto che tu disponga o meno di dati sul campo, il passaggio successivo consiste nel testare e riprodurre manualmente le interazioni lente, perché solo quando riesci a riprodurre un'interazione lenta puoi correggerla.

Riproduci interazioni lente nel lab

Esistono vari modi per riprodurre le interazioni lente nel lab tramite test manuali, ma di seguito è riportato un framework che puoi provare.

Metriche in tempo reale del riquadro Prestazioni di DevTools

Il profiler delle prestazioni di DevTools è l'approccio consigliato per diagnosticare le interazioni che sono note per essere lente, ma può richiedere tempo per identificare le interazioni lente se non sai quali sono le interazioni problematiche.

Tuttavia, quando apri per la prima volta il riquadro Rendimento, viene visualizzata una visualizzazione delle metriche in tempo reale. Questo strumento può essere utilizzato per provare rapidamente una serie di interazioni al fine di individuare quelle problematiche, prima di passare al profiler delle prestazioni più dettagliato. Man mano che interagisci, i dati di diagnostica vengono visualizzati nel log Interazioni (con l'interazione INP evidenziata). Queste interazioni possono essere espanse per ottenere le suddivisioni delle fasi:

Sebbene l'estensione Web Vitals aiuti a identificare le interazioni lente e fornisca alcuni dettagli per aiutarti a eseguire il debug dell'INP, potrebbe comunque essere necessario utilizzare il profiler delle prestazioni per diagnosticare le interazioni lente, in quanto fornisce i dati dettagliati necessari per navigare nel codice di produzione del tuo sito web e trovare le cause delle interazioni lente.

Registrare una traccia

Il profilatore delle prestazioni di Chrome è lo strumento consigliato per diagnosticare e risolvere i problemi di interazioni lente. Per eseguire il profiling di un'interazione nel profiler delle prestazioni di Chrome:

1. Apri la pagina che vuoi testare.
2. Apri Chrome DevTools e vai al riquadro Rendimento.
3. Fai clic sul pulsante Registra nella parte superiore sinistra del riquadro per iniziare il tracciamento.
4. Esegui le interazioni di cui vuoi risolvere i problemi.
5. Fai di nuovo clic sul pulsante Registra per interrompere il rilevamento.

Quando il profiler viene compilato, la prima cosa da controllare è il riepilogo delle attività nella parte superiore del profiler. Il riepilogo delle attività mostra barre rosse in alto dove si sono verificate attività lunghe durante la registrazione. In questo modo puoi aumentare rapidamente lo zoom sulle aree problematiche.

Puoi concentrarti rapidamente sulle aree problematiche trascinando e selezionando una regione nel riepilogo delle attività. Se vuoi, puoi utilizzare la funzionalità dei breadcrumb nel profiler per restringere la sequenza temporale e ignorare le attività non correlate.

Una volta individuato il punto in cui si è verificata l'interazione, il monitoraggio Interazioni ti aiuta ad allineare l'interazione e l'attività che si è verificata nel monitoraggio del thread principale sottostante:

Puoi visualizzare ulteriori dettagli sulla parte dell'interazione più lunga passando il mouse sopra l'interazione nel canale Interazioni:

La parte dell'interazione a righe rappresenta la quantità di tempo dell'interazione che ha superato i 200 millisecondi, ovvero il limite superiore della soglia "buona" per l'INP di una pagina. Le parti dell'interazione elencate sono:

1. Il ritardo di input, visualizzato dal whisker sinistro.
2. La durata dell'elaborazione: visualizzata dal blocco solido tra i baffi sinistro e destro.
3. Il ritardo nella presentazione, visualizzato dal baffo destro.

A questo punto, è necessario approfondire i problemi che causano l'interazione lenta, come spiegato più avanti in questa guida.

Come identificare la parte di un'interazione che è lenta

Le interazioni sono costituite da tre parti: il ritardo di inserimento, la durata dell'elaborazione e il ritardo di presentazione. Il modo in cui ottimizzi un'interazione per ridurre l'INP di una pagina dipende dalla parte che richiede più tempo.

Come identificare ritardi di input lunghi

I ritardi di input possono causare una latenza di interazione elevata. Il ritardo di input è la prima parte di un'interazione. Si tratta del periodo di tempo che intercorre tra il momento in cui l'azione dell'utente viene ricevuta per la prima volta dal sistema operativo e il momento in cui il browser è in grado di iniziare a elaborare il primo callback del gestore eventi dell'interazione.

Per identificare i ritardi di input nel profiler delle prestazioni di Chrome, puoi individuare l'interazione nel canale Interazioni. La lunghezza del whisker sinistro indica la parte del ritardo di inserimento dell'interazione e il valore esatto è disponibile in una descrizione comando passando il mouse sopra l'interazione nel profiler del rendimento.

I ritardi di input non possono mai essere nulli, ma puoi avere un certo controllo sulla loro durata. L'importante è capire se nel thread principale è in esecuzione un lavoro che impedisce l'esecuzione dei callback non appena dovrebbero.

Nella figura precedente, un'attività di uno script di terze parti è in esecuzione mentre l'utente tenta di interagire con la pagina e, di conseguenza, il ritardo di inserimento si prolunga. Il ritardo di inserimento prolungato influisce sulla latenza dell'interazione e potrebbe quindi influire sull'INP della pagina.

Come identificare durate di elaborazione lunghe

I callback degli eventi vengono eseguiti immediatamente dopo il ritardo di inserimento e il tempo necessario per il completamento è noto come durata dell'elaborazione. Se i callback degli eventi vengono eseguiti per troppo tempo, il browser ritarda la presentazione del frame successivo e può aumentare notevolmente la latenza totale di un'interazione. Tempi di elaborazione lunghi possono essere il risultato di JavaScript proprietario o di terze parti con un costo computazionale elevato e, in alcuni casi, di entrambi. Nel profiler del rendimento, è rappresentata dalla parte solida dell'interazione nel canale Interazioni.

Per trovare i richiami di eventi costosi, puoi osservare quanto segue in una traccia per un'interazione specifica:

1. Determina se l'attività associata ai callback degli eventi è un'attività lunga. Per rilevare in modo più affidabile le attività lunghe in un ambiente di laboratorio, potrebbe essere necessario attivare la limitazione della CPU nel riquadro Rendimento oppure collegare un dispositivo Android di fascia medio-bassa e utilizzare il debug remoto.
2. Se l'attività che esegue i callback degli eventi è di lunga durata, cerca le voci di gestore degli eventi, ad esempio voci con nomi come Evento: clic, nello stack chiamate che hanno un triangolo rosso nell'angolo in alto a destra della voce.

Per ridurre la durata di elaborazione di un'interazione, puoi provare una delle seguenti strategie:

1. Riduci al minimo il lavoro possibile. Tutto ciò che accade in un costoso evento richiamato è strettamente necessario? In caso contrario, valuta la possibilità di rimuoverlo del tutto, se possibile, o di posticipare la sua esecuzione, se non puoi. Puoi anche sfruttare le funzionalità del framework per semplificare l'esperienza. Ad esempio, la funzionalità di memorizzazione di React può saltare il lavoro di rendering non necessario per un componente se le sue proposte non sono state modificate.
2. Rimandare il lavoro di rendering nel callback dell'evento a un momento successivo. Le attività lunghe possono essere suddivise rinunciando al thread principale. Ogni volta che cedi il controllo al thread principale, termini l'esecuzione dell'attività corrente e suddividi il resto del lavoro in un'attività separata. In questo modo, il renderer ha la possibilità di elaborare gli aggiornamenti all'interfaccia utente eseguiti in precedenza nel callback dell'evento. Se utilizzi React, la funzionalità di transizione può farlo per te.

Queste strategie dovrebbero aiutarti a ottimizzare i callback degli eventi in modo che l'esecuzione richieda meno tempo.

Come individuare i ritardi nelle presentazioni

I lunghi ritardi negli input e le durate di elaborazione non sono le uniche cause di un INP basso. A volte gli aggiornamenti del rendering che si verificano in risposta a anche piccole quantità di codice di callback dell'evento possono essere costosi. Il tempo necessario al browser per eseguire il rendering degli aggiornamenti visivi dell'interfaccia utente in modo da riflettere il risultato di un'interazione è noto come ritardo di visualizzazione.

Il lavoro di rendering consiste più spesso in attività come il ricalcolo dello stile, il layout, la colorazione e l'elemento composito e sono rappresentati da blocchi viola e verdi nel grafico a fiamme del profiler. Il ritardo totale di visualizzazione è rappresentato dal whisker destro dell'interazione nel canale Interazioni.

Tra tutte le possibili cause di un'elevata latenza di interazione, i ritardi nella presentazione possono essere i più difficili da risolvere. Un rendering eccessivo può essere causato da uno dei seguenti motivi:

• Dimensioni DOM elevate. Il lavoro di rendering necessario per aggiornare la presentazione di una pagina aumenta spesso con le dimensioni del DOM della pagina. Per ulteriori informazioni, leggi l'articolo In che modo le dimensioni del DOM influiscono sull'interattività e cosa puoi fare in merito.
• Adattamenti forzati dei flussi. Questo accade quando applichi modifiche allo stile degli elementi in JavaScript e poi esegui immediatamente una query sui risultati di questo lavoro. Di conseguenza, il browser deve eseguire il lavoro di layout prima di fare qualsiasi altra cosa, in modo da poter restituire gli stili aggiornati. Per ulteriori informazioni e suggerimenti su come evitare l'adattamento dinamico del contenuto forzato, leggi l'articolo Evitare layout grandi e complessi e il thrashing del layout.
• Lavoro eccessivo o non necessario nei callback di requestAnimationFrame. I callback requestAnimationFrame() vengono eseguiti durante la fase di rendering del loop di eventi e devono essere completati prima che il frame successivo possa essere visualizzato. Se utilizzi requestAnimationFrame() per eseguire operazioni che non richiedono modifiche all'interfaccia utente, tieni presente che potresti ritardare il frame successivo.
• ResizeObserver. Questi callback vengono eseguiti prima del rendering e possono ritardare la presentazione del frame successivo se il lavoro al loro interno è costoso. Come per i callback degli eventi, riassegna la logica non necessaria per il frame successivo.

Cosa succede se non riesci a riprodurre un'interazione lenta?

Cosa succede se i dati sul campo suggeriscono che una determinata interazione è lenta, ma non riesci a riprodurre manualmente il problema nel lab? Ciò potrebbe verificarsi per alcuni motivi, ma uno dei motivi importanti è che le circostanze in cui si verificano le interazioni dipendono dall'hardware e dalla connessione di rete. Potresti utilizzare un dispositivo veloce con una connessione veloce, ma questo non significa che lo stesso valga per i tuoi utenti. Se questo è il tuo caso, puoi provare una delle tre opzioni seguenti:

1. Se hai un dispositivo Android fisico, utilizza il debug remoto per aprire un'istanza di Chrome DevTools sulla macchina host e prova a riprodurre le interazioni lente. I dispositivi mobili spesso non sono veloci come i laptop o i computer, pertanto le interazioni lente possono essere osservate più facilmente su questi dispositivi.
2. Se non hai un dispositivo fisico, attiva la funzionalità di throttling della CPU in Chrome DevTools.
3. Potrebbe essere che tu aspetti il caricamento di una pagina prima di interagire con essa, ma i tuoi utenti no. Se hai una rete veloce, simula condizioni di rete più lente attivando la limitazione della larghezza di banda della rete, poi interagisci con la pagina non appena viene visualizzata. Devi farlo perché il thread principale è spesso più impegnato durante l'avvio e i test eseguiti in questo periodo di tempo possono rivelare cosa stanno riscontrando i tuoi utenti.

La risoluzione dei problemi relativi all'INP è un processo iterativo

Scoprire cosa causa la latenza di interazione elevata che contribuisce a un INP scadente richiede molto lavoro, ma se riesci a individuare le cause, hai fatto metà del lavoro. Seguendo un approccio metodico alla risoluzione dei problemi INP di scarsa qualità, puoi individuare in modo affidabile la causa di un problema e arrivare più rapidamente alla soluzione giusta. Da esaminare:

• Fai affidamento sui dati sul campo per trovare interazioni lente.
• Testa manualmente le interazioni con i campi problematici nel lab per verificare se sono riproducibili.
• Identifica se la causa è dovuta a un ritardo di input lungo, a callback di eventi costosi o a un lavoro di rendering costoso.
• Ripeti.

L'ultimo è il più importante. Come la maggior parte degli altri lavori che svolgi per migliorare le prestazioni delle pagine, risolvere i problemi e migliorare INP è un processo ciclico. Dopo aver corretto un'interazione lenta, passa alla successiva e ripeti l'operazione finché non inizi a vedere risultati.