Una 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 di pagina, Tasks lungo può collegare il thread principale e fare in modo che la pagina non risponda all'input dell'utente, anche se sembra pronta. Spesso i clic e i tocchi non funzionano perché funzionalità interattive come i listener di eventi e i gestori di clic non sono ancora state associate agli elementi dell'interfaccia utente. Per questo motivo, Tasks lunghi può aumentare notevolmente il tuo Tempo all'interattività.
Ora Chrome DevTools può visualizzare le attività lunghe, in modo da vedere più facilmente le attività da ottimizzare.
Cosa viene considerata come attività lunga?
Le attività lunghe che consumano molta CPU sono causate da un lavoro complesso che richiede più di 50 ms. Il modello RAIL suggerisce di elaborare gli eventi di input utente in 50 ms per garantire una risposta visibile entro 100 ms e preservare la connessione tra azione e reazione.
Punto chiave: sebbene il modello RAIL suggerisca di fornire una risposta visiva all'input dell'utente entro 100 ms, le soglie della metrica Interaction to Next Paint (INP) consentono fino a 200 ms per creare aspettative più realizzabili, in particolare per i dispositivi più lenti.
Nella pagina sono presenti attività lunghe che potrebbero ritardare l'interattività?
Finora, hai dovuto cercare manualmente "blocchi gialli lunghi" di script di oltre 50 ms in Chrome DevTools o utilizzare l'API Long Tasks per capire quali attività ritardavano l'interattività.
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.
Per utilizzare il nuovo strumento di visualizzazione:
- Registra una traccia nel riquadro Rendimento del caricamento di una pagina web.
- Cerca un contrassegno rosso nella visualizzazione del thread principale. Dovresti vedere le attività ora contrassegnate in grigio con l'etichetta Attività.
- Tieni il puntatore sopra una barra grigia. Vedrai una finestra di dialogo che mostra la durata dell'attività e se è considerata un'attività 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à. Nell'esempio seguente, la causa del ritardo appare come un costoso insieme 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. Valuta la possibilità di suddividerli. Inoltre, tieni d'occhio gli script di terze parti, che possono anche contenere attività lunghe che ritardano la creazione di contenuti principali interattivi.
Suddividi tutto il tuo lavoro in blocchi che vengono eseguiti in meno di 50 ms ed esegui questi blocchi nel posto giusto e al momento giusto. La posizione giusta per alcuni di loro potrebbe essere fuori dal thread principale, in un service worker. Per indicazioni sulla suddivisione di attività lunghe, consulta Ottimizzare le attività lunghe e Inattivo fino al momento urgente di Phil Walton.
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 Metriche sulle prestazioni incentrate sull'utente.