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.

Data di pubblicazione: 9 maggio 2023

Una parte complessa dell'ottimizzazione dell'Interaction to Next Paint (INP) è capire cosa causa un INP basso. 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 non avere dati sul campo. 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 il TBT della tua pagina è elevato, è un potenziale segnale che la pagina potrebbe non essere molto reattiva alle interazioni degli utenti durante il caricamento.

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. Ad esempio, se lavori su un sito web di e-commerce, un flusso utente comune è costituito dalle azioni che gli utenti eseguono quando aggiungono articoli a un carrello degli acquisti online e pagano.

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.

Riprodurre interazioni lente in laboratorio

Esistono diversi modi per riprodurre interazioni lente in laboratorio 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 note per essere lente, ma può richiedere del tempo identificare le interazioni lente quando non sai quali sono quelle problematiche.

Tuttavia, la prima volta che apri 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 visualizzare 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 in alto a sinistra del riquadro per avviare il rilevamento.
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 a strisce dell'interazione rappresenta il tempo di 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 trattini sinistro e destro.
3. Il ritardo nella presentazione, visualizzato dal whisker a destra.

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 visualizzazione. 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'attività 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, pertanto il ritardo di inserimento viene esteso. 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 delle prestazioni oppure collegare un dispositivo Android di fascia medio-bassa e utilizzare il debug remoto.
2. Se l'attività che esegue i callback degli eventi è lunga, cerca le voci di gestore degli eventi, ad esempio voci con nomi come Evento: clic, nello stack di chiamate che hanno un triangolo rosso nell'angolo in alto a destra della voce.

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

1. Fai il minor lavoro possibile. Tutto ciò che accade in un richiamo di evento costoso è 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 utilizzare le funzionalità del framework per risolvere il problema. Ad esempio, la funzionalità di memorizzazione nella cache di React può saltare il lavoro di rendering non necessario per un componente quando i relativi prop non sono cambiati.
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 dell'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 identificare i ritardi nella presentazione

I ritardi di input e le durate di elaborazione lunghi non sono le uniche cause di un INP scadente. A volte gli aggiornamenti di rendering che si verificano in risposta anche a piccole quantità di codice di callback degli eventi 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 spesso in attività come il ricalcolo dello stile, il layout, la pittura e la composizione e sono rappresentati da blocchi viola e verdi nel grafico a forma di fiamma del profiler. Il ritardo totale di visualizzazione è rappresentato dal whisker destro dell'interazione nel canale Interazioni.

Tra tutte le possibili cause di latenza di interazione elevata, i ritardi di visualizzazione possono essere i più difficili da risolvere e risolvere. Un rendering eccessivo può essere causato da uno dei seguenti fattori:

• 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.
• Adattamento dinamico del contenuto forzato. 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 i ricollegamenti forzati, consulta 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 fotogramma successivo se il lavoro al loro interno è costoso. Come per i callback degli eventi, rimanda qualsiasi 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? Esistono alcuni motivi per cui questo potrebbe accadere, ma uno dei motivi principali è che le circostanze durante il test delle 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 per la risoluzione dei problemi relativi a INP di scarsa qualità, puoi individuare in modo affidabile la causa del problema e trovare più rapidamente la soluzione corretta. Per esaminare:

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

L'ultimo è il più importante. Come la maggior parte delle altre attività che svolgi per migliorare le prestazioni delle pagine, la risoluzione dei problemi e il miglioramento dell'INP sono un processo ciclico. Dopo aver corretto un'interazione lenta, passa alla successiva e ripeti l'operazione finché non inizi a vedere risultati.