Votre site a mieux à faire que vous faire attendre. Découvrir PageSpeed.fr
Code et rendu

RequestAnimationFrame organise le rythme, pas le coût du calcul

Synchroniser un dessin avec le navigateur ne rend pas un traitement lourd gratuit.

Adapter le mouvement au temps écoulé

Une animation ne devrait pas supposer que tous les écrans ont la même cadence. Utiliser le temps permet de conserver une vitesse cohérente lorsque la fréquence d’affichage varie. Vérifiez aussi la reprise après une pause ou un onglet resté en arrière-plan.

Garder la fonction courte

La fonction appelée à chaque image doit effectuer un travail limité. Des recherches répétées dans un grand document ou des recalculs de géométrie peuvent réduire la fluidité malgré un bon mécanisme de planification. Préparez les données qui peuvent l’être et évitez les opérations sans rapport avec le dessin.

Arrêter quand le mouvement n’est plus utile

Un composant masqué ou retiré ne doit pas continuer sa boucle par habitude. Prévoyez son nettoyage et une variante sans mouvement lorsque nécessaire. Comparez la réactivité des autres contrôles pendant l’animation, car une cadence visuellement acceptable peut encore monopoliser des ressources utiles à une interaction.

Pour aller à la source

Besoin d’aide pour votre site ? Retrouvez les conseils d’installation et de compatibilité dans notre centre d’aide.
Votre prochaine étape

Et si votre site
passait la seconde ?

Essayez, comparez, gardez la main. Vous pouvez désactiver ou supprimer l’extension à tout moment pour retrouver le fonctionnement habituel de votre site.

Accélérer mon siteMesurer mon site