Diagnostica manuale delle interazioni lente nel lab

Scopri come portare i dati sul campo nel lab per riprodurre e identificare le cause delle interazioni lente attraverso test manuali.

Una parte difficile dell'ottimizzazione dell'interazioni con Next Paint (INP) è capire ciò che causa un INP scarso. Le cause potenziali sono molte, ad esempio script di terze parti che pianificano molte attività sul thread principale, dimensioni del DOM di grandi dimensioni, costose callback degli eventi e altri colpevoli.

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 a essere le più lente dal punto di vista di un utente reale, consulta l'articolo Trovare le interazioni lente sul campo. Una volta che hai a disposizione i dati sul campo, puoi testare le interazioni specifiche manualmente negli strumenti del lab per capire perché sono lente.

Che cosa succede se non disponi di dati dei campi?

Avere dati sul campo è fondamentale perché ti permette di risparmiare molto tempo cercando di capire quali interazioni devono essere ottimizzate. Tuttavia, potresti trovarti in una posizione in cui non disponi di dati dei campi. Se questo descrive la tua situazione, puoi comunque individuare interazioni da migliorare, anche se questo richiede un po' più di impegno e un approccio diverso.

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

Per determinare il TBT della pagina, puoi utilizzare Lighthouse. Se il valore 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 durante quel momento cruciale del ciclo di vita della pagina.

Per individuare interazioni lente dopo il caricamento della pagina, potrebbero essere necessari altri tipi di dati, ad esempio i flussi di utenti comuni che potresti già avere identificato nell'analisi del tuo sito web. Se lavori su un sito web di e-commerce, ad esempio, un flusso di utenti comune consiste nelle azioni intraprese dagli utenti quando aggiungono articoli al 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 sei in grado di riprodurre un'interazione lenta che puoi risolvere.

Riprodurre le 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.

Registra una traccia

Il profiler delle prestazioni di Chrome è lo strumento consigliato per diagnosticare e risolvere i problemi relativi alle interazioni lente. Per profilare un'interazione nel profiler del rendimento di Chrome, segui questi passaggi:

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 tracciamento.

Quando il profiler viene compilato, il primo posto da esaminare deve essere il riepilogo delle attività nella parte superiore del profiler. Il riepilogo delle attività mostra le barre rosse nella parte superiore in cui sono presenti attività lunghe nella 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à. Facoltativamente, puoi utilizzare la funzionalità dei breadcrumb nel profiler per restringere la sequenza temporale e ignorare le attività non correlate.

Una volta selezionato il punto in cui si è verificata l'interazione, la traccia Interazioni ti consente di allineare l'interazione e l'attività che si è verificata nella traccia del thread principale sottostante:

Per ulteriori dettagli sulla parte dell'interazione più lunga, passa il mouse sopra l'iterazione nel monitoraggio delle interazioni:

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

1. Il ritardo dell'input, visualizzato dal baffo 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.

Da qui, il tuo compito è analizzare più a fondo i problemi che causano l'interazione lenta, che verrà illustrato più avanti in questa guida.

L'estensione di Chrome Web Vitals

Il profiler delle prestazioni è l'approccio consigliato per diagnosticare le interazioni note per essere lente, ma può richiedere tempo per identificare le interazioni lente se non sai quali sono le interazioni problematiche. Un approccio da prendere in considerazione è l'utilizzo dell'estensione di Chrome Web Vitals. Questa estensione può essere utilizzata per provare rapidamente una serie di interazioni al fine di trovare quelle problematiche, prima di passare al profiler del rendimento.

Una volta installata, l'estensione Web Vitals visualizza i dati di interazione nella console DevTools se segui questi passaggi:

1. In Chrome, fai clic sull'icona delle estensioni a destra della barra degli indirizzi.
2. Individua l'estensione Web Vitals nel menu a discesa.
3. Fai clic sull'icona a destra per aprire le impostazioni dell'estensione.
4. Fai clic su Opzioni.
5. Attiva la casella di controllo Logging della console nella schermata visualizzata, quindi fai clic su Salva.

Dopo aver seguito questi passaggi, apri la console in Chrome DevTools e inizia a testare le interazioni sospette su una pagina. Mentre interagisci, nella console verranno visualizzati i dati diagnostici:

Anche se l'estensione Web Vitals aiuta a identificare le interazioni lente e fornisce alcuni dettagli per aiutarti a eseguire il debug di 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 per trovare le cause delle interazioni lente.

Come identificare la parte di un'interazione lenta

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

Come identificare lunghi ritardi nell'input

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

L'identificazione dei ritardi negli input nel profiler delle prestazioni di Chrome può essere eseguita individuando l'interazione nel monitoraggio delle interazioni. La lunghezza del baffo sinistro indica la parte del ritardo di input dell'interazione, mentre il valore esatto è disponibile in una descrizione comando passando il mouse sopra l'interazione nel profiler delle prestazioni.

I ritardi di input non possono mai essere zero, ma hai un certo controllo sulla durata del ritardo di input. La chiave è capire se sul thread principale è in esecuzione del lavoro che impedisce ai callback di eseguire il prima possibile.

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

Come identificare le lunghe durate di elaborazione

I callback di eventi vengono eseguiti immediatamente dopo il ritardo di input e il tempo necessario per il completamento è noto come durata dell'elaborazione. Se i callback di eventi vengono eseguiti troppo a lungo, ritardano la presentazione del frame successivo da parte del browser e possono aumentare significativamente la latenza totale di un'interazione. Le lunghe tempi di elaborazione possono essere il risultato di JavaScript proprietario o di terze parti, costoso dal punto di vista del calcolo, e, in alcuni casi, entrambi. Nel profiler del rendimento, questo è rappresentato dalla parte solida dell'interazione nel monitoraggio delle interazioni.

Puoi trovare callback di eventi costosi osservando quanto segue in una traccia di un'interazione specifica:

1. Determina se l'attività associata ai callback di eventi è un'attività lunga. Per rivelare in modo più affidabile le attività lunghe in un lab, potresti dover attivare la limitazione della CPU nel riquadro delle prestazioni o connettere un dispositivo Android di livello medio-basso e usare il debug remoto.
2. Se l'attività che esegue i callback di eventi è lunga, cerca le voci del gestore di eventi, ad esempio le voci con nomi come Event: click, nello stack di chiamate che presentano 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, ti consigliamo di rimuovere completamente il codice, se possibile, o di rinviarne l'esecuzione a un momento successivo, se non è possibile. 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. Rinvia il lavoro non di visualizzazione nel callback dell'evento a un momento successivo. Le attività lunghe possono essere suddivise restituendo al thread principale. Ogni volta che passi al thread principale, termini l'esecuzione dell'attività corrente e suddividerai il resto del lavoro in un'attività separata. Ciò consente al renderer di elaborare gli aggiornamenti all'interfaccia utente che sono stati eseguiti in precedenza nel callback dell'evento. Se usi React, la funzionalità di transizione può farlo per te.

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

Come individuare i ritardi nelle presentazioni

I lunghi ritardi nell'input e le durate di elaborazione non sono le uniche cause di un INP scadente. 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 impiegato dal browser per visualizzare gli aggiornamenti visivi dell'interfaccia utente per riflettere il risultato di un'interazione è noto come ritardo nella presentazione.

di Gemini Advanced.

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 della presentazione è rappresentato dal baffo destro dell'interazione nella traccia delle interazioni.

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

• Dimensioni DOM di grandi dimensioni. Il lavoro di rendering necessario per aggiornare la presentazione di una pagina aumenta spesso insieme alle dimensioni del DOM della pagina. Per ulteriori informazioni, leggi l'articolo In che modo le dimensioni del DOM di grandi dimensioni influiscono sull'interattività e cosa puoi fare al riguardo.
• Adattamenti forzati dei flussi. Questo accade quando applichi modifiche di stile a elementi in JavaScript e poi esegui una query sui risultati di quel lavoro. Il risultato è che il browser deve eseguire il lavoro di layout prima di qualsiasi altra cosa, in modo che il browser possa restituire gli stili aggiornati. Per ulteriori informazioni e suggerimenti su come evitare l'adattamento dinamico del contenuto in modo forzato, leggi l'articolo Evitare layout grandi e complessi e il thrashing del layout.
• Lavoro eccessivo o non necessario nei callback requestAnimationFrame. I callback requestAnimationFrame() vengono eseguiti durante la fase di rendering del loop di eventi e devono essere completati prima che possa essere presentato il frame successivo. Se utilizzi requestAnimationFrame() per svolgere operazioni che non prevedono 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 di eventi, posticipa qualsiasi logica non necessaria per il frame successivo.

di Gemini Advanced.

Che cosa succede se non riesci a riprodurre un'interazione lenta?

Che cosa succede se i dati sul campo indicano che una particolare interazione è lenta, ma non riesci a riprodurre manualmente il problema nel lab? Ciò potrebbe essere dovuto a un paio di motivi.

Innanzitutto, le circostanze in cui verifichi le interazioni dipendono dall'hardware e dalla connessione di rete. È possibile che tu stia utilizzando un dispositivo veloce con una connessione veloce, ma questo non significa che i tuoi utenti lo siano. Se questo è il tuo caso, puoi provare una delle tre seguenti soluzioni:

1. Se hai un dispositivo Android fisico, utilizza il debug remoto per aprire un'istanza di Chrome DevTools sul computer host e prova a riprodurre le interazioni lente sul computer. I dispositivi mobili spesso non sono veloci come i laptop o i computer desktop, pertanto le interazioni lente possono essere più facilmente osservate su questi dispositivi.
2. Se non hai un dispositivo fisico, attiva la funzionalità di limitazione della CPU in Chrome DevTools.

Un'altra causa potrebbe essere che sei in attesa del caricamento di una pagina prima di interagire con la pagina, ma gli utenti non lo fanno. Se utilizzi una rete veloce, simula condizioni di rete più lente attivando la limitazione della rete, quindi interagisci con la pagina non appena viene visualizzata. Dovresti farlo perché il thread principale è spesso più impegnativo durante l'avvio e i test effettuati in questo periodo di tempo potrebbero rivelare cosa stanno riscontrando gli utenti.

La risoluzione dei problemi relativi a INP è un processo iterativo

Scoprire cosa sta causando un'elevata latenza di interazione che contribuisce a un INP scarso richiede molto lavoro, ma se riesci a individuarne le cause, sei a metà strada. 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. Per la revisione:

• Fai affidamento sui dati sul campo per trovare interazioni lente.
• Devi testare manualmente le interazioni problematiche sui campi nel laboratorio per vedere se sono riproducibili.
• Identifica se la causa è un lungo ritardo di input, costosi callback di eventi o 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. Se correggi un'interazione lenta, passa alla successiva e ripeti l'operazione finché non inizi a visualizzare i risultati.