Impara a diagnosticare il lavoro costoso che impedisce l'interazione dell'utente.
Le attività lunghe possono mantenere impegnato il thread principale, ritardando l'interazione dell'utente. Ora Chrome DevTools può visualizzare le attività lunghe, semplificando la visualizzazione delle attività da ottimizzare.
Se utilizzi Lighthouse per controllare le pagine, forse conosci già Tempo all'interattività, una metrica che rappresenta i casi in cui gli utenti possono interagire con la pagina e ricevere una risposta. Sapevi, però, che le Attività lunghe (JavaScript) possono contribuire notevolmente a un TTI scadente?
Che cosa sono le attività lunghe?
Un'attività lunga è un codice JavaScript che monopolizza il thread principale per periodi di tempo prolungati, causando il blocco dell'interfaccia utente.
Durante il caricamento di una pagina web, Tasks lungo può collegare il thread principale e fare in modo che la pagina non risponda all'input dell'utente anche se sembra pronta. I clic e i tocchi spesso non funzionano perché i listener di eventi, i gestori di clic e così via non sono ancora stati associati.
Le attività lunghe che consumano molta CPU si verificano a causa di operazioni complesse che richiedono più di 50 ms. Perché 50 ms? Il modello RAIL suggerisce di elaborare gli eventi di input utente in 50 ms per garantire una risposta visibile entro 100 ms. In caso contrario, la connessione tra l'azione e la reazione si interrompe.
Nella pagina sono presenti attività lunghe che potrebbero ritardare l'interattività?
Finora hai dovuto cercare manualmente "blocchi gialli lunghi" di script lunghi più di 50 ms in Chrome DevTools o utilizzare l'API Long Tasks per capire quali attività ritardavano l'interattività. Potrebbe essere un po' ingombrante.
Per facilitare il flusso di lavoro per il controllo delle prestazioni, DevTools ora visualizza le attività lunghe. Le attività (in grigio) sono contrassegnate da un contrassegno rosso se si tratta di attività lunghe.
- Registra una traccia nel riquadro Rendimento del caricamento di una pagina web.
- Cerca un contrassegno rosso nella visualizzazione del thread principale. Ora dovresti vedere che le attività sono in grigio ("Attività").
- Passa il mouse sopra una barra per conoscere la durata dell'attività e se è stata considerata "lunga".
Qual è la causa delle mie attività lunghe?
Per scoprire la causa di un'attività lunga, seleziona la barra Attività grigia. Nel riquadro a scomparsa sotto, seleziona Dal basso verso l'alto e Raggruppa per attività. In questo modo puoi vedere quali attività hanno contribuito maggiormente (in totale) al completamento dell'attività. Di seguito sembra essere un insieme costoso di query DOM.
Quali sono i modi più comuni per ottimizzare le attività lunghe?
Script di grandi dimensioni sono spesso una delle cause principali delle attività lunghe, quindi considera la possibilità di suddividerli. Tieni d'occhio anche gli script di terze parti, in quanto le loro attività lunghe possono ritardare la visualizzazione dei contenuti principali dall'interattività.
Suddividi tutto il tuo lavoro in piccoli blocchi (che vengono eseguiti in meno di 50 ms) ed esegui questi blocchi nel posto giusto e al momento giusto; il posto giusto può persino essere fuori dal thread principale, in un worker. Un'ottima lettura su questo argomento è Idle Across Urgent di Phil Walton. Consulta anche l'articolo su come ottimizzare le attività lunghe per conoscere le strategie generali per la gestione e la suddivisione delle attività lunghe.
Mantieni le tue pagine adattabili. Ridurre al minimo le attività lunghe è un ottimo modo per garantire agli utenti un'esperienza piacevole quando visitano il tuo sito. Per saperne di più sulle attività lunghe, consulta le metriche sul rendimento incentrate sull'utente.