Comment l'animation affecte les éléments essentiels du Web (LCP, INP et CLS)
Comment les animations et les temps d'exécution des animations affectent LCP, INP et CLS, et des moyens pratiques de conserver un mouvement riche sans nuire à Core Web Vitals.
À retenir
L'animation peut nuire aux trois Core Web Vitals : des fichiers d'animation et des environnements d'exécution lourds peuvent retarder le LCP, l'animation pilotée par JavaScript peut bloquer le thread principal et aggraver l'INP, et l'animation des propriétés de mise en page ou le chargement d'animations sans espace réservé provoquent le CLS. Gardez le contenu du héros indépendant de l'animation, chargez les environnements d'exécution en dessous de la ligne de flottaison, animez la transformation et l'opacité et réservez de l'espace pour chaque élément animé.
Les trois métriques et leurs cibles
Les Core Web Vitals de Google, documentés sur web.dev, mesurent le chargement (Largest Contentful Paint, bon à 2,5 secondes ou moins), la réactivité (Interaction avec Next Paint, bon à 200 millisecondes ou moins) et la stabilité visuelle (Cumulative Layout Shift, bon à 0,1 ou moins), mesurés au 75e centile des chargements réels de pages.
LCP : ne pas faire attendre le héros pour l'animation
Si l'élément le plus grand à l'écran est une animation qui nécessite d'abord un runtime et un fichier à charger, LCP attend les deux. Créez d'abord une image statique ou un texte réel, puis améliorez-la et chargez les environnements d'exécution d'animation uniquement pour le contenu proche ou inférieur à la ligne de flottaison lorsque cela est nécessaire.
INP : garder le thread principal libre
INP mesure la rapidité avec laquelle la page répond aux tapotements et aux clics. Web.dev explique que les tâches longues sur le thread principal retardent la réponse à l'entrée. Une animation qui exécute un JavaScript complexe sur chaque image, ou plusieurs animations commençant en même temps, peut provoquer exactement cela. Préférez les transitions CSS sur la transformation et l'opacité pour des effets simples, mettez en pause les animations hors écran et évitez de démarrer un travail fastidieux en réponse à une interaction.
CLS : réserver de l'espace et animer la transformation
Web.dev recommande d'utiliser la propriété de transformation CSS pour animer sans déclencher de changements de disposition : redimensionnez au lieu de modifier la largeur et la hauteur, traduisez au lieu de changer en haut ou à gauche. Donnez à chaque élément animé, y compris les animations basées sur le canevas, des dimensions fixes avant son chargement, afin que la page ne saute pas lorsqu'elle apparaît.
Durées d'exécution du canevas
Les environnements d'exécution basés sur canevas tels que le moteur de rendu de canevas de Lottie, Rive et ExodeUI dessinent en dehors du DOM, ce qui évite le travail de mise en page par image mais ajoute un environnement d'exécution à télécharger et à exécuter. Mesurez le compromis pour votre page : chargez paresseux le moteur d'exécution, dimensionnez le canevas dans CSS à l'avance et testez sur des téléphones de milieu de gamme.
Principes clés à retenir
- Cibles : LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1 au 75e percentile
- Ne faites pas dépendre l'élément LCP d'un runtime d'animation
- Gardez le fil principal libre pendant les interactions
- Animer la transformation et l'opacité ; réserver de l'espace pour les éléments animés
- Temps d'exécution à chargement différé et tests sur les téléphones de milieu de gamme
Questions fréquentes
Sources
- Web Vitals — web.dev
- Interaction to Next Paint (INP) — web.dev
- Cumulative Layout Shift (CLS) — web.dev