Bonne pratique
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/
Le "Référentiel d'écoconception web (REW)" est publié par GreenIT.fr dans le cadre des travaux du Collectif conception numérique responsable selon les termes de la licence Creative Commons Attribution.
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.
Règle de validation
Le nombre d'animations JS / CSS par page doit être inférieur ou égal à 2
Ressources économisées