Safari réduit les animations sur les sites Internet

Avec Safari, Apple une fonction intéressante mise en place sur le site de la marque : la réduction des animations. Cette fonction sert à deux choses : diminuer les effets qui peuvent gêner une partie de la population (la raison principale) mais aussi, dans certains cas, améliorer les performances d’affichage.

WebKit (et donc Safari) intègre en fait la fonction prefers-reduced-motion : elle permet de proposer une version alternative d’une page avec des animations réduites. L’idée est de réduire les animations qui peuvent rendre une personne malade, comme celles qui souffrent du mal des transports (la cinétose). Apple, qui essaye de proposer des OS et des navigateurs accessibles, prend en charge cette fonction avec macOS Sierra et a même déployé en partie la technologie sur son site Internet.

Activer la fonction

Pour le moment, le réglage dépend de celui de l’OS. Sous macOS, il faut se rendre dans les Préférences Système, puis dans Accessibilité, et enfin dans Affichage. Une case Réduire les animations permet d’activer le tout. Sous iOS, c’est dans Réglages -> Général -> Accessibilité -> Réduire les animations.

Sous macOS

Sous iOS

Sur le site d’Apple

Le sujet chez WebKit donne quelques exemples sur le site d’Apple, comme la page d’iOS 10, celle de macOS ou la page sur les photos avec l’iPhone. Dans le premier cas, les animations des téléphones sont réduites : en temps normal, ils défilent à des vitesses différentes, en réduisant ils ne bougent pas. Sur la page de macOS, c’est encore plus flagrant : du flou et des animations en temps normal, une page beaucoup plus fluide sans les animations. Sur la page des photos, c’est moins flagrant, mais les cases avec les choix bougent moins. D’autres pages un peu lourdes ne bougent pas, comme celle du MacBook.

Avec

Sans

Le souci des performances

L’effet de bord de cette fonction vient des performances améliorées. Que ce soit sur les appareils iOS (par exemple un iPhone 5) ou sur un Mac un peu léger (le mien, de 2012), désactiver les animations améliorent franchement les performances. C’est spécialement visible avec les vidéos, d’ailleurs : l’enregistrement couplés aux animations met mon MacBook Air à genoux.

Espérons que d’autres sites Internet (et surtout d’autres navigateurs) suivront cette voie, même si ça demande évidemment un peu de travail pour les développeurs.