Certaines animations sur les pages Web peuvent être entièrement gérées à l'étape du compositeur du pipeline de rendu.
Les animations non composées nécessitent plus de travail et peuvent sembler lentes (non fluides) sur les téléphones bas de gamme ou lorsque des tâches gourmandes en performances s'exécutent sur le thread principal.
Les animations non composées peuvent également augmenter la valeur de la métrique Cumulative Layout Shift (CLS) de votre page, car elles entraînent un mouvement réel des éléments que l'algorithme CLS mesure, ce qui peut entraîner des décalages sur d'autres éléments. Les animations composées ne provoquent pas de déplacement d'autres éléments et sont donc exclues du CLS. En réduisant le CLS, vous améliorerez votre score de performances Lighthouse.
Contexte
Les algorithmes du navigateur permettant de convertir le code HTML, CSS et JavaScript en pixels sont collectivement appelés pipeline de rendu.
Vous n'avez pas besoin de comprendre la signification de chaque étape du pipeline de rendu. L'essentiel à comprendre pour le moment est qu'à chaque étape du pipeline de rendu, le navigateur utilise le résultat de l'opération précédente pour créer de nouvelles données. Par exemple, si votre code déclenche la mise en page, les étapes de peinture et de composition doivent être exécutées à nouveau. Une animation non composite est une animation qui déclenche l'une des étapes précédentes du pipeline de rendu (Style, Mise en page ou Peinture). Les animations non composées sont moins performantes, car elles obligent le navigateur à effectuer plus de travail.
Pour en savoir plus sur le pipeline de rendu, consultez les ressources suivantes:
- Présentation des navigateurs Web modernes (partie 3)
- Simplifier la complexité de la peinture et réduire les zones de peinture
- S'en tenir aux propriétés réservées au moteur de composition et gérer le nombre de calques
Comment Lighthouse détecte-t-il les animations non composées ?
Lorsqu'une animation ne peut pas être composée, Chrome signale les raisons d'échec à la trace DevTools, que Lighthouse lit. Lighthouse liste les nœuds DOM dont les animations n'ont pas été composées, ainsi que la ou les raisons de l'échec de chaque animation.
Assurer la composition des animations
Consultez S'en tenir aux propriétés réservées au moteur de composition et gérer le nombre de calques et Animations hautes performances.
Ressources
- Code source de l'audit Éviter les animations non composées
- S'en tenir aux propriétés réservées au moteur de composition et gérer le nombre de calques
- Animations hautes performances
- Simplifier la complexité de la peinture et réduire les zones de peinture
- Présentation des navigateurs Web modernes (partie 3)