Éviter les problèmes d'animation non composite

Avez-vous déjà cliqué sur un site Web pour constater qu'il bégaie et traîne lorsque vous le faites défiler ?

Frustrant, n'est-ce pas ?

Eh bien, et si nous vous disions que le secret de ces problèmes réside dans ce qu’on appelle les animations non composites ?

Il s'agit d'animations qui ne sont pas traitées efficacement par le navigateur, ce qui impose une charge supplémentaire au processeur principal de l'ordinateur et entraîne des problèmes de performances.

Mais ne vous inquiétez pas, il existe un moyen de résoudre ce problème.

Dans ce blog, nous discuterons des animations non composites et de la manière de les corriger. Nous vous guiderons à travers des étapes simples pour adoucir ces animations saccadées, rendant ainsi votre site Web non seulement plus rapide, mais aussi plus agréable à naviguer pour vos visiteurs.

Commençons.

Qu’est-ce que l’animation non composite ?

L'animation non composite est un type d'animation Web traité principalement par le CPU plutôt que par le GPU (Graphics Processing Unit).

Cette approche de traitement conduit souvent à un rendu moins efficace, ce qui peut entraîner des problèmes de performances tels qu'une fréquence d'images plus lente et un décalage de l'interface utilisateur, en particulier sur les pages Web complexes ou les appareils moins puissants.

La réduction du Cumulative Layout Shift (CLS) promet une augmentation de votre score de performance Lighthouse.

Pourquoi est-il essentiel d’éviter les animations non composites pour les performances Web ?

Éviter les animations non composites est essentiel pour les performances Web pour plusieurs raisons. Premièrement, les animations non composites, traitées par le CPU, peuvent être moins efficaces et plus lentes que les animations traitées par GPU.

Cette inefficacité entraîne souvent une diminution de la fréquence d'images, ce qui donne aux animations un aspect saccadé ou lent, ce qui peut avoir un impact négatif sur l'expérience utilisateur. Les pages Web avec des animations plus fluides semblent plus réactives et sont généralement plus agréables à interagir.

Deuxièmement, les animations gourmandes en CPU peuvent solliciter les ressources du système, en particulier sur les appareils moins puissants comme les smartphones ou les ordinateurs plus anciens. Cette contrainte peut ralentir non seulement les animations elles-mêmes, mais également d'autres processus exécutés sur la page Web.

En conséquence, les performances globales du site Web peuvent être compromises. De plus, les performances d’un site Web compromises peuvent également avoir un impact négatif sur le succès du marketing numérique. Consultez ce blog « L'impact de la vitesse du site Web sur le succès du marketing numérique » pour savoir comment.

Remarque : Voici quelques conseils simples pour accélérer votre site WordPress et obtenir de meilleures performances .

Comment les animations non composites affectent-elles les performances des pages et le rendu du navigateur ?

Les animations non composites peuvent avoir un impact important sur les performances des pages et le rendu du navigateur. Côté performances, ils ont tendance à ralentir un site internet. Cela se produit parce que le processeur principal (CPU) de l'ordinateur est surchargé, essayant de gérer des animations complexes en plus d'autres tâches.

En conséquence, le site Web devient moins réactif aux interactions des utilisateurs comme le clic ou le défilement. Cela est particulièrement visible sur les appareils dotés de moins de puissance de traitement, comme les téléphones mobiles.

Concernant le rendu du navigateur, les animations non composites entraînent souvent des mouvements saccadés et irréguliers à l'écran. Étant donné que le processeur est moins efficace pour dessiner et gérer ces animations que le GPU, les animations peuvent apparaître saccadées et non fluides.

Cela affecte l'attrait visuel et peut rendre le site Web plus lent car le navigateur a du mal à suivre le rendu de ces animations exigeantes. De plus, la charge sur le processeur peut entraîner des temps de chargement plus longs pour la page Web, car le traitement et l'affichage des éléments animés prennent plus de temps.

Comment détecter les animations non composites ?

La détection des animations non composites peut être effectuée à l'aide d'outils d'analyse des performances tels que Google PageSpeed ​​Insights et GTmetrix. Voici les 10 meilleurs outils de test de vitesse WordPress que vous pouvez utiliser pour détecter les animations non composites.

Ces outils analysent divers aspects des performances de votre site Web, notamment la manière dont les animations sont rendues.

Voici comment vous pouvez les utiliser :

Informations Google PageSpeed

• Visitez le site Web PageSpeed ​​Insights , saisissez l'URL de votre page Web et cliquez sur « Analyser ». L'outil évalue votre page à la fois pour les performances sur mobile et sur ordinateur.

• Après l'analyse, PageSpeed ​​Insights fournit un score et un rapport détaillé. Regardez sous la section « Diagnostics » du rapport.
• Recherchez un avertissement indiquant quelque chose comme « Évitez les animations non composées ». Cela indique que votre page comporte des animations qui pourraient être optimisées pour de meilleures performances.

GT Métrix

• Accédez au site Web GTmetrix , saisissez l'URL de votre site et lancez le test. GTmetrix propose une analyse complète des performances de chargement de votre site.

• Une fois l'analyse terminée, vous obtiendrez un rapport détaillé. GTmetrix se concentre davantage sur les mesures de performances générales, il ne peut donc pas signaler directement les animations non composites comme PageSpeed ​​Insights.
• Recherchez les temps de rendu et les mesures de charge du processeur, telles que « Temps de blocage total » ou « Temps d'interactivité ».
• Bien que GTmetrix puisse ne pas mentionner explicitement les animations non composites, des valeurs élevées dans ces domaines pourraient indiquer des processus de rendu inefficaces, qui pourraient être dus à des animations non composites.

De plus, vous pouvez également effectuer des tests de résistance pour déterminer les performances de votre site Web.

Comment les navigateurs gèrent-ils les animations ?

Lorsqu'il s'agit de gérer les animations, les navigateurs utilisent deux parties principales d'un ordinateur : le CPU (Central Processing Unit) et le GPU (Graphics Processing Unit). Les animations simples, comme le changement de couleurs ou de texte, sont généralement gérées par le processeur.

Cependant, pour les animations plus complexes, notamment celles impliquant des mouvements ou des transformations, les navigateurs tentent d'utiliser le GPU. Le GPU est meilleur pour ces tâches car il est conçu pour gérer les graphiques et peut créer des animations fluides et fluides.

Mais si une animation n'est pas configurée correctement, le navigateur peut toujours utiliser le processeur, ce qui rend l'animation moins fluide et ralentit l'ensemble du site Web. Ainsi, les développeurs Web veillent à ce que leurs animations soient compatibles avec le GPU pour obtenir les meilleures performances.

Causes des animations non composites

Pour avancer vers la résolution du problème des animations non composites, il est essentiel d'abord de comprendre leurs causes. Voici quelques raisons courantes :

Animation de propriétés non composites

L'animation de propriétés non composites conduit souvent à des animations non composites. Cela se produit lorsque des propriétés telles que « largeur », « hauteur » ou « marge », qui nécessitent que le navigateur effectue de nombreux recalculs et redessinages, sont utilisées dans les animations.

Ces propriétés ne sont pas gérées efficacement par le GPU, elles sollicitent donc davantage le processeur, rendant les animations moins fluides.

Utiliser JavaScript pour animer

L'utilisation de JavaScript pour animer peut également causer des problèmes. Les animations basées sur JavaScript, surtout lorsqu'elles ne sont pas optimisées, peuvent exiger beaucoup du processeur. Bien que JavaScript offre plus de contrôle sur les animations, il peut entraîner des problèmes de performances si les animations sont complexes ou mal codées efficacement.

Zones peintes complexes

Les zones peintes complexes dans les animations peuvent être un autre coupable. Lorsque vous avez de grandes zones qui doivent être repeintes fréquemment pendant une animation, cela met le système à rude épreuve. Cela est particulièrement vrai pour les graphiques complexes ou les images haute résolution qui changent rapidement.

Graphiques ou médias inefficaces

L’utilisation inefficace des graphiques ou des médias dans les animations est une autre cause fréquente. Les images, vidéos ou graphiques haute résolution qui ne sont pas optimisés pour une utilisation sur le Web peuvent ralentir les animations. Le navigateur a plus de mal à restituer ces éléments lourds, surtout s'ils font partie d'une séquence animée.

Utilisation excessive des ombres et des filtres

Enfin, l'utilisation excessive d'ombres et de filtres en CSS peut conduire à des animations non composites. Ces effets, bien que visuellement attrayants, nécessitent beaucoup de ressources. Leur application à des éléments en mouvement peut avoir un impact significatif sur les performances, car ils nécessitent que le navigateur effectue de nombreux traitements supplémentaires.

Remarque : Découvrez les autres causes de la lenteur des sites Web .

Comment éviter les animations non composites

Les animations non composites peuvent avoir un impact significatif sur les performances de votre site Web, entraînant une expérience utilisateur lente. La clé pour résoudre ce problème réside dans l’optimisation de la façon dont les animations sont gérées.

Voici l'approche étape par étape pour résoudre ce problème. Avant de passer à la fixation, je vais vous montrer à quoi ressemble le score du site Web avec cette erreur :

• En passant aux diagnostics, nous avons trouvé l’erreur « éviter les animations non composées ».

Voici les étapes à suivre pour résoudre ce problème.

• Accédez à votre tableau de bord WordPress
• Sélectionnez Apparence > Personnaliser
• Vous pouvez trouver un code CSS dans la section « CSS supplémentaire ». Il y a de fortes chances que ce code n'utilise pas d'animations CSS optimisées, ce qui provoque cette erreur.

• Si vous êtes développeur, vous savez déjà que ce code n'est pas optimisé. Et voici les changements qui feraient des merveilles pour votre site Web.

Modification 1 : ajout de la propriété Will-Change

Ce changement consiste à informer le navigateur des modifications d'animation à venir, ce qui peut aider à optimiser les performances de rendu.

 .mon-animation {

    largeur : 100 px ;

    hauteur : 100px ;

    couleur de fond : rouge ;

    position : absolue ;

    volonté-changement : transformation, opacité ; /* Ligne ajoutée */

    animation : complexMove 5s linéaire infini ;

}

/* Le reste des images clés reste inchangé */

Changement 2 : réduire la complexité de l'animation

Ici, la transformation d'échelle à 50 % a été modifiée de scale(2) à scale(1.5). Cela réduit la complexité et l’intensité de l’animation.

 .mon-animation {

    /* ... autres propriétés ... */

    volonté-changement : transformation, opacité ; /* En supposant que le changement 1 soit conservé */

    animation : complexMove 5s linéaire infini ;

}

@keyframes complexeMove {

    /* ... 0% et 100% images clés ... */

    50% {

        transformation : translationX (300 %) rotation (180 deg) échelle (1,5 ); /* Ligne modifiée */

        opacité : 0,5 ;

    }

    /* ... 100% image clé ... */

}

Voici à quoi ressemblerait votre code final :

 .mon-animation {

    largeur : 100 px ;

    hauteur : 100px ;

    couleur de fond : rouge ;

    position : absolue ;

    volonté-changement : transformation, opacité ; /* Informer le navigateur des changements à venir */

    animation : complexMove 5s linéaire infini ;

}

@keyframes complexeMove {

    0 %, 100 % {

        transformer : traduireX(0) rotation(0) échelle(1);

        opacité : 1 ;

    }

    50% {

        transformation : translationX (300 %) rotation (180 deg) échelle (1,5 ); /* Échelle simplifiée pour une complexité réduite */

        opacité : 0,5 ;

    }

}

• Supprimez simplement le code précédent et copiez et collez ce nouveau code dans votre CSS supplémentaire. Cela ne changera pas l'animation, mais supprimera sûrement cette erreur.

• Vous pouvez voir que l'erreur n'existe plus.
• Et la bonne nouvelle est qu’avec le code optimisé, vous pouvez augmenter le score de performances. Nous avons vu au début de cette section que la note de performance était de 77.
• Voici le score de performance amélioré :

Ainsi, quelques conseils généraux que vous devez garder à l’esprit pour résoudre cette erreur sont :

Astuce 1 : Optimisez les animations CSS

Au lieu d'animer des propriétés telles que la hauteur, la largeur ou la gauche, qui peuvent nécessiter beaucoup de ressources, utilisez
transformer
et
opacité . Ces propriétés sont accélérées par GPU et peuvent être gérées plus efficacement par les navigateurs.

Voici l'exemple de code avant et après optimisation :

Avant l'optimisation :

 .animate-gauche {

    position : relative ;

    animation : moveLeft 2s linéaire infini ;

}

@keyframes moveLeft {

    de { gauche : 0 ; }

    à { gauche : 100 px ; }

}

Après optimisation :

 .animate-gauche {

    position : relative ;

    animation : moveLeft 2s linéaire infini ;

}

@keyframes moveLeft {

    de { transformer : translateX(0); }

    à { transformer : translateX(100px); }

}

Astuce 2 : exploiter la puissance de la propriété CSS « Will-Change »

Utilisez la propriété will-change pour informer le navigateur des éléments qui changeront dans un avenir proche. Cela permet au navigateur de se préparer et d'optimiser le changement.

Voici comment utiliser la propriété will-change ;

• Insérez la ligne suivante dans votre code ;

 volonté-changement : transformation, opacité ; /* Ligne ajoutée */

Astuce 3 : déchargement des animations sur le GPU

Le déchargement des animations sur le GPU (Graphics Processing Unit) est une technique permettant d'optimiser les animations Web, les rendant plus fluides et moins gourmandes en CPU (Central Processing Unit).

Cette approche est particulièrement efficace pour résoudre les problèmes d'animation non composite, car elle exploite la capacité du GPU à gérer les tâches graphiques plus efficacement.

Vous pouvez décharger des animations sur le GPU à l'aide des propriétés Transform et Opacity pour les animations, car elles sont plus efficaces que les propriétés d'animation telles que la largeur, la hauteur, le haut ou la gauche.

Vous pouvez utiliser les propriétés de transformation et d'opacité au lieu de gauche et droite. Voici un exemple :

Code non optimisé :

 @keyframes moveLeft {

    de { gauche : 0 ; }

    à { gauche : 100 px ; }

}

Code optimisé :

 @keyframes moveLeft {

    de { transformer : translateX(0); }

    à { transformer : translateX(100px); }

}

Astuce 4 : Utiliser des bibliothèques et des outils efficaces

L'intégration de bibliothèques efficaces telles que GreenSock Animation Platform (GSAP) ou Velocity.js peut être très efficace pour résoudre les erreurs d'animation non composites.

Ces bibliothèques sont optimisées pour les performances, offrant des animations plus fluides et plus efficaces que les CSS ou JavaScript standards.

Pour incorporer la bibliothèque GSAP, suivez ces étapes :

• Localisez le lien CDN pour GSAP.
• Ouvrez votre fichier HTML à l'endroit où vous souhaitez utiliser GSAP.
• Vous devez placer le lien CDN dans une balise <script>. Cette balise devrait idéalement être placée près de la fin de votre section <body>.

 <!DOCTYPEhtml>

<html>

<tête>

    <title>Votre page Web</title>

    <!-- Autres éléments de tête -->

</tête>

<corps>

    <!-- Votre contenu HTML va ici -->

    <!-- Script GSAP CDN à la fin du corps -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>

</corps>

</html>

Comment l'hébergement Cloudways peut compléter vos animations optimisées

Cloudways Hosting améliore les sites Web avec des animations optimisées en offrant des vitesses rapides et une disponibilité élevée des principaux fournisseurs de cloud tels que DigitalOcean, AWS et Google Cloud. Ses solutions de mise en cache avancées, notamment Memcached, Varnish et Redis, garantissent un chargement rapide des animations. La pile optimisée de la plateforme, ainsi que le CDN Enterprise de Cloudflare, améliorent encore les performances d'animation, en particulier pendant les pics de trafic. Associé à des fonctionnalités de sécurité robustes, Cloudways fournit un environnement d'hébergement idéal et rentable pour les sites Web riches en animations.

Résumé

Et c'est tout. Nous avons exploré des stratégies clés pour éviter les animations non composites, en nous concentrant sur les meilleures pratiques en matière d'animation Web.

Nous avons également discuté des causes de l'apparition d'animations non composites et de leur impact sur les performances Web et le rendu du navigateur.

Si vous avez des questions sur ce sujet, n'hésitez pas à nous contacter.