Riduci a icona il lavoro del thread principale

Il processo di rendering del browser è ciò che trasforma il tuo codice in una pagina web con cui gli utenti possono interagire. Per impostazione predefinita, il thread principale del processo di rendering gestisce in genere la maggior parte del codice: analizza l'HTML e crea il DOM, analizza il CSS e applica gli stili specificati e analizza, valuta ed esegue il codice JavaScript.

Anche il thread principale elabora gli eventi utente. Di conseguenza, ogni volta che il thread principale è impegnato a fare qualcos'altro, la tua pagina web potrebbe non rispondere alle interazioni degli utenti, causando un'esperienza negativa.

In che modo il controllo del lavoro del thread principale di Lighthouse non va a buon fine

Lighthouse segnala le pagine che mantengono il thread principale occupato per più di 4 secondi durante il caricamento:

Uno screenshot del controllo del lavoro di Lighthouse Riduci al minimo il lavoro del thread principale

Per aiutarti a identificare le origini del caricamento del thread principale, Lighthouse mostra un'analisi di dove è stato trascorso il tempo di CPU durante il caricamento della pagina da parte del browser.

Come ridurre al minimo il lavoro del thread principale

Le sezioni seguenti sono organizzate in base alle categorie segnalate da Lighthouse. Consulta la sezione L'anatomia di un frame per una panoramica del modo in cui Chromium esegue il rendering delle pagine web.

Consulta Ridurre il lavoro del thread principale per scoprire come utilizzare Chrome DevTools per esaminare esattamente cosa sta facendo il thread principale durante il caricamento della pagina.

Valutazione degli script

Stile e layout

Rendering

Analisi di HTML e CSS

Analisi e compilazione degli script

Garbage collection

Risorse