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:
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
- Ottimizzare JavaScript di terze parti
- Eseguire il deprovisioning dei gestori di input
- Utilizza i lavoratori web
Stile e layout
- Ridurre l'ambito e la complessità dei calcoli di stile
- Evita layout complessi e di grandi dimensioni e battiti contro il layout
Rendering
- Utilizza solo le proprietà del compositore e gestisci il numero di livelli
- Semplifica la complessità del colore e riduci le aree di verniciatura