Les animations non composées peuvent sembler irrégulières (et non fluides) sur les téléphones bas de gamme ou lorsque des tâches exigeantes en performances sont exécutées sur le thread principal. Les animations saccadées peuvent augmenter la valeur Cumulative Layout Shift (CLS) de votre page. Réduire le CLS améliorera 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 pipelines de rendu.
Ce n'est pas grave si vous ne comprenez pas ce que signifie chaque étape du pipeline de rendu. À l'heure actuelle, il est essentiel de comprendre qu'à chaque étape du pipeline de rendu, le navigateur utilise le résultat de l'opération précédente pour créer des données. Par exemple, si votre code déclenche une opération qui déclenche la mise en page, les étapes Paint et Composite doivent s'exécuter à nouveau. Une animation non composée est une animation qui déclenche l'une des étapes précédentes du pipeline de rendu (Style, Mise en page ou Paint). Les animations non composées sont moins performantes, car elles obligent le navigateur à effectuer plus de travail.
Consultez les ressources suivantes pour en savoir plus sur le pipeline de rendu:
- Au sommaire des navigateurs Web modernes (partie 3)
- Peinture plus complexe et moins étendue
- Conserver les propriétés réservées au compositeur 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 motifs de l'échec à la trace des outils de développement, qui est lue par Lighthouse. Lighthouse répertorie les nœuds DOM qui ont des animations non composées, ainsi que le ou les motifs de défaillance de chaque animation.
Comment s'assurer que les animations sont composées
Consultez Respecter les propriétés réservées au compositeur et gérer le nombre de calques et Animations hautes performances.