Mon site d'agence, mon site pour les avocats et ce blog s'animent quand on fait défiler la page : des titres qui apparaissent mot par mot, des blocs qui glissent, des triangles en fond. C'est agréable à regarder. Mais une animation n'est jamais gratuite. Voici ce qu'elles coûtent, et les règles que je me suis fixées.

Comment ces animations sont faites

• Sur mon site d'agence, j'utilise GSAP, une bibliothèque d'animation très répandue, avec son module qui déclenche les effets au défilement. Mes propres réglages tiennent dans un fichier d'environ 9 Ko.
• Sur ce blog, je n'utilise aucune bibliothèque : les effets passent par ce que le navigateur sait déjà faire. Le code tient en quelques kilo-octets, dans le pied de page du blog.

Je raconte comment j'ai ajouté ce code dans Systeme.io dans mon article sur la personnalisation du blog.

Ce que ça coûte

• Du poids en plus. Une bibliothèque d'animation, ce sont des fichiers supplémentaires à télécharger avant que la page soit complète, surtout sur téléphone.
• Du travail pour le téléphone. Une animation qui tourne en continu, comme des particules en fond, sollicite le processeur tant que la page est ouverte.
• Un risque pour la lecture. Si le texte n'apparaît qu'une fois l'animation lancée, un script qui plante peut laisser la page vide.

Mes trois règles

1. Le texte doit exister sans animation

Tout le contenu est écrit dans la page, en clair. L'animation ne fait que le faire apparaître joliment. Sur ce blog, les effets sont même ajoutés après coup : si le script ne se charge pas, le visiteur voit simplement la page, immobile mais complète. Google lit le même texte.

2. Respecter ceux qui ne veulent pas d'animations

Les téléphones et les ordinateurs ont un réglage « réduire les animations », utile notamment aux personnes sujettes au mal des transports. Mon site d'agence et ce blog le lisent : si le visiteur l'a activé, aucune animation ne se lance.

3. Faire apparaître le texte une seule fois

Un titre ou un paragraphe apparaît en glissant quand on arrive dessus, puis il reste immobile. On peut lire sans que rien ne bouge sous les yeux.

Je fais une exception que je surveille : les triangles en fond de ce blog bougent en continu. C'est le choix le plus coûteux pour un téléphone, et le premier que je retirerai si les chiffres de vitesse sont mauvais.

Un piège découvert en testant

Quand je vérifiais mes pages dans un onglet caché, les animations restaient figées et le texte semblait invisible. Ce n'était pas une panne : un navigateur met en pause les animations d'un onglet qu'on ne regarde pas. Un visiteur réel, lui, voit la page normalement. Mais c'est un bon rappel : une page qui dépend de son animation pour afficher son texte est fragile.

Est-ce que ça vaut le coup ?

Je n'ai pas encore de chiffres pour le dire. Je regarderai si les visiteurs restent plus longtemps sur les pages animées que sur les autres, dès que j'aurai assez de visites pour comparer. En attendant, je garde les animations parce qu'elles donnent une identité à mes sites, et je les garde légères.

Si vous voulez un site animé sans sacrifier la vitesse ni le référencement, c'est un équilibre que je cherche pour chaque projet, comme je l'explique sur ma page création de site.

Tarmou