Faut-il mettre des animations sur son
site web ?

Un titre qui s'affiche en fondu à l'ouverture de la page, des cartes qui se soulèvent au survol, un compteur qui grimpe jusqu'à 250. Sur une bonne partie des sites vitrines et des boutiques en ligne, quelque chose bouge. Et c'est souvent là que les ennuis commencent.

Bien dosé, le mouvement donne du relief à une page et aide le visiteur à s'y retrouver. Mal dosé, il ralentit l'affichage, fatigue l'œil et finit par coûter des points dans les outils de mesure de Google. Beaucoup de sites qu'on nous confie pour une refonte, de Lille à Marseille, sont dans ce second cas, sans que leur propriétaire le sache : l'effet a été activé en deux clics dans le constructeur de pages, il rend bien sur l'écran du bureau, et personne n'a vérifié ce qu'il donnait sur un smartphone d'entrée de gamme en 4G.

Faut-il animer son site ? Oui, à condition de savoir pourquoi chaque animation est là

Le meilleur test tient en une question : qu'est-ce que ce mouvement apprend à la personne qui regarde la page ? Un bouton qui change de teinte au survol lui dit qu'elle peut cliquer. Un champ de formulaire qui passe au vert confirme que l'adresse e-mail est valide. Dans les deux cas, le mouvement transmet une information plus vite que n'importe quelle phrase.

Les designers d'interface appellent ces petites réactions des micro-interactions. Elles passent presque inaperçues et c'est justement leur intérêt. Le visiteur ne retient pas l'effet, il retient que le site réagit bien.

Une animation qui n'apprend rien, en revanche, entre en concurrence avec le contenu. Quand un titre arrive par la gauche pendant qu'une image pivote et que trois icônes rebondissent, l'œil ne sait plus où se poser. Sur une page dont le but est d'obtenir une demande de devis, c'est de l'attention perdue.

Une transition CSS sur la couleur d'un bouton pèse quelques octets et le navigateur l'exécute sans effort. Ce qui alourdit un site, c'est la manière dont l'animation est construite et tout ce qu'on charge pour la faire tourner.

Premier piège, les propriétés animées. Le navigateur sait déplacer, agrandir ou faire apparaître un élément très efficacement tant qu'on s'en tient à transform et opacity, parce que la carte graphique s'en charge sans recalculer le reste de la page. Dès qu'on anime une largeur, une marge ou une position, il doit refaire la mise en page à chaque image. Sur un ordinateur puissant, ça passe. Sur un téléphone à 200 euros, l'animation saccade et le défilement devient pâteux.

Deuxième piège, les scripts. Bibliothèque d'animation, extension de parallaxe, module de compteur, slider : chacun ajoute son JavaScript, et ce code occupe le processeur au moment précis où le visiteur essaie de cliquer. C'est ce que mesure l'INP (Interaction to Next Paint), l'indicateur de réactivité qui fait partie des Core Web Vitals de Google.

Le troisième piège est moins connu. Quand le grand titre de la page d'accueil démarre invisible pour apparaître en fondu, il n'est considéré comme affiché qu'une fois l'animation lancée. Le LCP (Largest Contentful Paint), qui mesure le temps d'affichage du plus gros élément visible, en prend un coup, surtout si l'effet attend le chargement d'un script. Ce qui compte le plus sur la page doit être visible tout de suite.

Dernier point, une animation qui pousse ses voisins en s'agrandissant provoque des décalages de mise en page, comptabilisés dans le CLS. Le visiteur vise un bouton, le bouton descend de vingt pixels, il clique à côté.

Pas en tant que tels. Aucun critère de classement ne compte les fondus ou les effets de survol. Google regarde la vitesse d'affichage, la stabilité visuelle et la réactivité, mesurées sur de vrais visiteurs à partir des données de Chrome. Une page alourdie par ses effets peut donc perdre du terrain face à un concurrent plus rapide à contenu égal.

Il existe un risque plus discret. Certains effets chargent le texte en JavaScript ou le cachent dans des onglets et carrousels animés. Google sait lire ce contenu dans la plupart des cas, mais un texte présent dès le départ dans le code HTML reste toujours mieux servi. Avec les réponses générées par l'IA, comme l'AI Mode de Google en France, qui compose ses réponses à partir du contenu des pages, mieux vaut que ce contenu soit lisible sans détour.

Notre page consacrée au référencement naturel détaille la façon dont nous travaillons la vitesse et la structure d'un site.

Les micro-interactions

Ce sont les plus rentables. Survol d'un bouton ou d'une carte, validation d'un champ, ajout au panier, ouverture d'un accordéon : quelques lignes de CSS, une durée de 150 à 300 millisecondes, et l'interface paraît soignée. Sur une boutique en ligne, elles rassurent au moment où le visiteur se demande si son clic a bien été pris en compte.

Les apparitions au défilement

Le « scroll reveal » fait apparaître les blocs au fur et à mesure que l'on descend dans la page. Il donne du rythme aux pages longues si l'effet reste court, une demi-seconde au plus, avec un déplacement de quelques pixels plutôt qu'une entrée spectaculaire depuis le bord de l'écran. Il ne doit jamais toucher ce qui est visible à l'ouverture de la page, pour les raisons de LCP vues plus haut.

Les animations pilotées par le scroll

C'est l'une des avancées les plus utiles du CSS. Les scroll-driven animations du CSS lient une animation à la progression du défilement sans une ligne de JavaScript : barre de lecture, illustration qui se construit étape par étape, chronologie qui se dessine à mesure qu'on avance. Le navigateur gère tout lui-même, ce qui les rend bien plus légères que les anciennes solutions en script. Leur prise en charge varie selon les navigateurs et leurs versions, il faut donc prévoir une version statique propre en repli.

Elles servent surtout à raconter. Les étapes d'un chantier pour un artisan, le parcours d'un client, l'avant/après d'une rénovation : le défilement devient le fil du récit.

Le SVG animé

Un logo qui se trace au chargement, une icône qui s'anime au survol, une ligne qui relie deux sections. Le SVG permet tout cela pour un poids minuscule et une netteté parfaite sur n'importe quel écran. Pour ces usages, il remplace avantageusement les GIF et les petites vidéos, bien plus lourds et souvent flous.

Les compteurs

Voir un chiffre grimper jusqu'à sa valeur finale attire l'œil, encore faut-il que le chiffre mérite qu'on s'y arrête. Un nombre de projets livrés ou d'années d'expérience, oui. Un taux de satisfaction sorti de nulle part, beaucoup moins : les visiteurs repèrent vite une statistique décorative. Un ou deux compteurs par page suffisent.

Le mouvement dans l'en-tête

La grande zone d'accueil en haut de page, qu'on appelle hero section, n'a pas besoin d'une vidéo plein écran de 15 Mo pour paraître moderne. Un dégradé qui évolue lentement, une forme qui flotte ou une légère profondeur qui suit la souris sur ordinateur donnent une impression de vie pour une fraction du poids. Le message principal doit rester lisible dès la première seconde.

3D en temps réel (WebGL), vidéo d'arrière-plan, parallaxe sur plusieurs couches, transitions entre pages façon application mobile : ces techniques ont leur place chez un architecte, un designer, une marque de luxe ou un fabricant qui veut faire tourner son produit à 360 degrés. Elles demandent un vrai travail d'optimisation, des versions allégées pour le mobile et le budget qui va avec.

Pour un cabinet d'avocats, un plombier ou un restaurant, elles rapportent rarement un client de plus. Un restaurant gagnera davantage à soigner ses photos, sa carte en ligne et sa fiche Google Business Profile qu'à installer une vidéo en fond d'écran.

Ce qu'on évite

Les animations en boucle sans raison arrivent en tête : bouton qui pulse en permanence, texte qui clignote, bandeau qui défile. Au bout de quelques secondes, l'œil s'en lasse et le message prend des airs de publicité. Même chose pour tout ce qui surgit sans avoir été demandé. Un chatbot IA dont la fenêtre s'ouvre toute seule au bout de trois secondes agace plus qu'il ne rend service.

Les animations lentes viennent ensuite. Une seconde d'attente avant que le texte apparaisse, répétée à chaque section, et le visiteur qui cherchait juste un numéro de téléphone repart.

Restent les grands mouvements imposés, zooms plein écran ou parallaxe très marquée, qui posent un vrai problème d'accessibilité.

Accessibilité : laisser le choix au visiteur

Chez certaines personnes, notamment celles qui souffrent de troubles de l'oreille interne, les grands mouvements à l'écran provoquent vertiges et nausées. iOS, Android, macOS et Windows proposent tous un réglage pour réduire les animations, et le navigateur transmet cette préférence au site grâce à la requête média prefers-reduced-motion.

Quelques lignes de CSS suffisent alors à couper ou adoucir les effets pour ceux qui l'ont demandé, en les gardant pour les autres. C'est un réglage à prévoir dès la conception du site. Les règles d'accessibilité WCAG vont dans le même sens : un contenu qui bouge automatiquement plus de cinq secondes doit pouvoir être mis en pause, et rien ne doit clignoter plus de trois fois par seconde.

Combien d'animations, et pour quel métier ?

Il n'y a pas de quota. Un cabinet d'avocats ou un expert-comptable visera la sobriété, avec des apparitions discrètes et des survols soignés. Un artisan peut s'en servir pour montrer ses chantiers étape par étape. Une boutique en ligne misera sur les micro-interactions autour des fiches produits et du panier. Une marque haut de gamme pourra se permettre une mise en scène plus travaillée, à condition d'en assumer le coût en optimisation.

Pour chaque effet, on revient à la question du début. S'il n'apprend rien au visiteur et n'est là que parce que « ça fait moderne », on peut le supprimer sans regret. Le site y gagne presque toujours en élégance.

Animer sans ralentir son site

Sur WordPress, Elementor et Divi permettent d'ajouter une animation d'entrée à n'importe quel bloc en deux clics. Cette facilité explique pourquoi tant de sites en accumulent. Chaque effet activé charge sa part de code, et une page où chaque section glisse ou rebondit finit par peser lourd pour un bénéfice nul.

Quelques habitudes évitent la plupart des problèmes. Partir du CSS natif (transitions, keyframes, animations liées au scroll) avant d'envisager une bibliothèque JavaScript, et n'en charger qu'une seule quand elle se justifie. Animer transform et opacity, rarement autre chose. Laisser tranquille tout ce qui s'affiche avant le premier défilement. Tester sur un vrai téléphone et pas seulement dans le mode mobile du navigateur, puis repasser la page dans PageSpeed Insights pour vérifier que les Core Web Vitals n'ont pas bougé.

Sur une landing page, où chaque distraction se paie en demandes de contact perdues, ces règles s'appliquent avec encore plus de rigueur.

Alors, on anime ou pas ?

Oui, avec retenue. Un site totalement figé peut paraître austère, et quelques mouvements bien placés suffisent à lui donner de la finesse. Micro-interactions, apparitions courtes au défilement, SVG et animations CSS liées au scroll couvrent l'essentiel des besoins d'un site vitrine pour un coût en performance quasi nul. La 3D, la vidéo et la parallaxe se décident au cas par cas, quand elles servent vraiment le propos.

La bonne animation est souvent celle que personne ne remarque, mais qui a mené le visiteur jusqu'au formulaire de contact sans qu'il y pense.

C'est ce dosage que nous cherchons à chaque création ou refonte de site internet chez MPC Web : un site qui a de l'allure, qui s'affiche vite sur mobile et qui transforme ses visiteurs en contacts. Nous accompagnons des entreprises partout en France, à distance comme sur place. Si votre site vous semble lent ou trop chargé, nous pouvons l'analyser et vous dire quelles animations garder.

Interlocuteur unique, réactivité garantie, expertise locale : c'est la promesse MPC Web.