Éviter les animations JavaScript / CSS

Ce que dit le référentiel

Les animations JavaScript/CSS peuvent être très coûteuses en termes de cycles CPU et de consommation mémoire. Elles déclenchent toutes une action de type (re)paint/(re)flow très coûteuse en ressources. Il faut donc éviter au maximum les animations, et ne les utiliser que lorsqu’elles sont indispensables.

Si vous ne pouvez pas vous passer d’une animation, limitez-vous aux propriétés CSS opacity et transform, et aux fonctions associées translate, rotate, scale de transform. Ces deux propriétés sont automatiquement optimisées par le navigateur, et l’animation peut être prise en charge par le processeur graphique (GPU). Le site www.csstriggers.com liste les actions sur le DOM déclenchées par une animation.

Pour que le navigateur puisse réduire au minimum les ressources consommées par l’animation, vous pouvez le prévenir qu’une animation va avoir lieu grâce à l'instruction will-change.

Pour en savoir plus : https://web.dev/animations-guide/

Notre avis

Dans une démarche d'éco-conception, nous nous concentrons sur la réduction des animations en faisant appel au sélecteur prefers-reduced-motion pour respecter les préférences de l'utilisateur. Cette approche optimise l'expérience utilisateur tout en diminuant l’utilisation des ressources système inutiles.

Si des animations sont indispensables, nous privilégions l'utilisation des propriétés opacity et transform ainsi que leurs fonctions associées comme translate, rotate et scale, optimisées par le GPU. Cela permet de minimiser l’impact environnemental tout en assurant des performances de navigation fluides.