Le processus de rendu du navigateur transforme votre code en une page Web avec laquelle vos utilisateurs peuvent interagir. Par défaut, le thread principal du processus de moteur de rendu gère généralement la plupart des codes : il analyse le code HTML et compile le DOM, analyse le CSS et applique les styles spécifiés, puis analyse, évalue et exécute le code JavaScript.
Le thread principal traite également les événements utilisateur. Par conséquent, chaque fois que le thread principal est occupé à effectuer une autre opération, votre page Web peut ne pas répondre aux interactions utilisateur, ce qui nuit à l'expérience.
Échec de l'audit du fonctionnement du thread principal Lighthouse
Lighthouse signale les pages qui maintiennent le thread principal occupé pendant plus de quatre secondes lors du chargement:
Pour vous aider à identifier les sources du chargement du thread principal, Lighthouse indique où le temps CPU a été passé pendant que le navigateur charge votre page.
Réduire le fonctionnement du thread principal
Les sections ci-dessous sont organisées en fonction des catégories signalées par Lighthouse. Consultez Anatomie d'un frame pour découvrir comment Chromium affiche les pages Web.
Pour découvrir comment utiliser les outils pour les développeurs Chrome afin d'examiner exactement ce que fait votre thread principal lors du chargement de la page, consultez Réduire le thread principal.
Évaluation de script
Style et mise en page
- Réduisez la portée et la complexité des calculs de style
- Éviter les mises en page volumineuses et complexes, et le thrashing de la mise en page
Affichage
- Respecter les propriétés du compositeur uniquement et gérer le nombre de calques
- Peinture plus complexe et moins étendue
Analyser du code HTML et CSS
- Extraire les fichiers CSS critiques
- Réduire la taille des ressources CSS
- Différer les fichiers CSS non critiques