Un'attività lunga è un codice JavaScript che monopolizza il thread principale per periodi di tempo prolungati, provocando il "blocco" dell'interfaccia utente.
Durante il caricamento di una pagina, le attività lunghe possono bloccare il thread principale e impedire alla pagina di rispondere all'input dell'utente, anche se sembra essere pronta. Spesso i clic e i tocchi non funzionano perché le funzionalità interattive come gli ascoltatori di eventi e i gestori dei clic non sono ancora stati collegati agli elementi dell'interfaccia utente. Per questo motivo, le attività lunghe possono aumentare notevolmente il tempo di risposta.
Ora Chrome DevTools può visualizzare le attività lunghe, semplificando la visualizzazione delle attività che richiedono l'ottimizzazione.
Che cosa viene considerato un'attività lunga?
Le attività lunghe che richiedono molta CPU sono causate da operazioni complesse che richiedono più di 50 ms. Il modello RAIL suggerisce di elaborare gli eventi di input dell'utente in 50 ms per garantire una risposta visibile entro 100 ms e preservare la connessione tra azione e reazione.
Punto chiave: mentre il modello RAIL suggerisce 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 impostare aspettative più realistiche, soprattutto per i dispositivi più lenti.
Nella mia pagina sono presenti attività lunghe che potrebbero ritardare l'interattività?
Fino a ora, dovevi cercare manualmente "blocchi gialli lunghi" di script di durata superiore a 50 ms in DevTools di Chrome o utilizzare l'API Long Tasks per capire quali attività stavano ritardando l'interattività.
Per semplificare il flusso di lavoro di controllo del rendimento, DevTools ora visualizza le attività lunghe. Le attività (mostrate in grigio) sono contrassegnate da indicatori rossi se sono attività lunghe.
Per utilizzare il nuovo strumento di visualizzazione:
- Registra una traccia nel pannello Rendimento del caricamento di una pagina web.
- Cerca un indicatore rosso nella visualizzazione del thread principale. Ora dovresti vedere le attività contrassegnate in grigio e etichettate come Attività.
- Tieni il cursore sopra una barra grigia. Viene visualizzata una finestra di dialogo che mostra la durata dell'attività e se è considerata un'attività lunga.
Che cosa causa le attività lunghe?
Per scoprire la causa di un'attività lunga, seleziona la barra Attività grigia. Nel riquadro di scorrimento 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à in così tanto tempo. Nell'esempio seguente, la causa del ritardo sembra essere un insieme di query DOM oneroso.
Quali sono i modi comuni per ottimizzare le attività lunghe?
Gli script di grandi dimensioni sono spesso una delle principali cause di attività lunghe. Valuta la possibilità di suddividerli. Tieni d'occhio anche gli script di terze parti, che possono contenere anche attività lunghe che ritardano l'interattività dei contenuti principali.
Suddividi tutto il lavoro in blocchi che vengono eseguiti in meno di 50 ms ed esegui questi blocchi nel luogo e nel momento giusti. Il posto giusto per alcuni potrebbe essere al di fuori del thread principale, in un worker di servizio. Per indicazioni su come suddividere le attività lunghe, consulta Ottimizzare le attività lunghe e Idle Until Urgent di Phil Walton.
Mantieni le pagine adattabili. Ridurre al minimo le attività lunghe è un ottimo modo per garantire ai tuoi utenti un'esperienza piacevole quando visitano il tuo sito. Per ulteriori informazioni sulle attività lunghe, consulta le Metriche sul rendimento incentrate sull'utente.