Analysez la performance de vos animations avec Chrome DevTools

Nous avons passé un temps considérable à apprendre comment optimiser nos animations, mais…

Comment savoir si ça marche ?

Pour le moment, vous avez dû me croire sur parole concernant les propriétés à bannir.

Car toutes vos animations sont probablement parfaitement fluides sur votre machine… (oui oui, je dis "machine" pour "ordinateur" 🤖) mais si vous apprenez à développer, c'est que vous êtes probablement sur un ordinateur puissant, équipé d’une carte graphique moderne (sans vouloir vous juger sans vous connaître). Mais comment savoir si l’animation sera bien fluide sur la tablette bas de gamme achetée en soldes par votre grand-père ?

Heureusement pour nous, Chrome propose toute une suite d’outils intégrés. Vous les avez peut-être déjà utilisés en inspectant le code source d’un site web, ou en ouvrant la console. Mais ce n’est qu'une toute petite partie de l'ensemble de ces outils, aussi appelés DevTools.

DevTools met à notre disposition de nombreux outils. Notamment un qui simule le fonctionnement de nos animations sur un vieux smartphone. Il permet également d'analyser en détail les performances de notre animation, afin d'identifier les problèmes potentiels et de les corriger.

Dans ce chapitre, nous apprendrons à maîtriser l'outil de performance de Chrome DevTools pour que nos animations soient aussi fluides que possible.

Faites apparaître des éléments cachés

Ici, nous avons une petite application. Elle représente une série de cartes, chaque carte munie d’une photo et de quelques blocs de texte. Il y a également un bouton qui révèle une troisième carte cachée :

L’apparition de la carte cachée est constituée de plusieurs transitions : l’apparition de la carte elle-même, et une deuxième transition qui pousse l’autre carte sur la droite.

$easing: cubic-bezier(.49,.18,.23,1);
$width: 33vh;
$height: 72vh;
$margin-right: 4vh;
$wid-marg: $width + $margin-right;
.card {
    width: $width;
    height: $height;
    overflow: hidden;
    &:not(:last-child){
        margin-right: $margin-right;
    }
    &--anim {
        transform: translateX($width-marg);
        transition: transform 700ms $easing;
    }
    &__contents {
        width: $width;
        overflow: hidden;
    &--anim {
            transform: translateX($wid-marg*-1);
            transition: transform 700ms $easing;
        }
    }
}
.btn {
    &--reveal {
        &:hover {
            & + .card {
                &--anim {
                    transform: translateX(0);
                }
                .card__contents--anim {
                    transform: translateX(0);
                }
            }
        }
    }
}

On a aussi ajouté quelques mouvements secondaires (souvenez-vous des 12 principes) avec plusieurs transitions pour révéler les blocs de texte de la carte :

</>
$easing: cubic-bezier(.49,.18,.23,1);
$width: 33vh;
$height: 72vh;
$margin-right: 4vh;
$wid-marg: $width + $margin-right;
.card {
    width: $width;
    height: $height;
    overflow: hidden;
    &:not(:last-child){
        margin-right: $margin-right;
    }
    &--anim {
        transform: translateX($width-marg);
        transition: transform 700ms $easing;
    }   
    &__contents {
        width: $width;
        overflow: hidden;
    &--anim {
            transform: translateX($wid-marg*-1);
            transition: transform 700ms $easing;
        }
    }
    &__block {
    overflow: hidden;
    // une boucle créée avec sass qui itère de 1 à 3, en utilisant l'index
    // comme suffixe pour le nom --anim mod
    // ainsi que comme valeur pour multiplier la valeur de transition delay
    @for $i from 1 through 3 {
        &--anim-#{$i} {
                transform: translateX(-108%);
                transition: transform 500ms $easing 50ms*$i;
            }
        }
        &:not(:first-child) {
            margin-top: 1rem;
        }
    }
}
.btn {
    &--reveal {
        &:hover {
            & + .card {
                &--anim {
                    transform: translateX(0);
                }
                .card__contents--anim {
                    transform: translateX(0);
                }
                .card__block--anim {
                    transform: translateX(0);
                }
            }
        }
    }
}

Toutes ces animations sont bien fluides sur notre ordinateur, mais ça ne suffit pas. Nous voulons qu’elles soient fluides sur tous les écrans, y compris sur des supports anciens ou bas de gamme. Au total, l’apparition de la carte est constituée de 5 transitions distinctes. Comment nous assurer qu’elles fonctionneront bien de manière fluide chez tout le monde ?

Vous pouvez laisser un bon d'achat pour commander un appareil moderne sur votre site, mais ça risque peut-être d'être coûteux 🤔

Mais il existe un moyen plus facile et moins onéreux de tester et d'analyser nos animations.

Mesdames et Messieurs, permettez-moi de vous présenter Chrome Devtools ! 🥳

Eh oui, je vous en parlais, c’est ce qui apparaît quand on clique sur “Inspecter” sur une page web. Il fait bien plus que nous aider à comprendre comment une page est organisée.

Au-delà de l’onglet Elements, DevTools comporte toute une série d’autres onglets pour inspecter, déboguer et analyser divers aspects de nos sites. Ici, c'est l’onglet Performance qui va nous intéresser. Il nous permet d’enregistrer et d’analyser comment une page se charge, réagit, et s’anime.

Ça paraît être pas mal pour évaluer la performance de nos animations, non ? Alors ouvrons DevTools et voyons ça !

Ouvrez la boîte à outils DevTools

Avant de commencer l’exploration de l’onglet Performance, nous devons ouvrir DevTools. Vous avez probablement l’habitude de faire un clic droit sur un élément d’une page et de choisir “Inspecter”.

Mais il existe un moyen plus rapide pour le faire. DevTools peut être ouvert par le raccourci clavier Ctrl+Shift+I sous Windows, ou Cmd+Opt+I sur Mac.

Une fois DevTools ouvert, en haut de la fenêtre, on peut trouver une série de boutons qui amènent à différents onglets. Si l’onglet Performance n’est pas visible à droite de l’onglet Éléments, selon la taille de votre fenêtre, vous pouvez l’ouvrir en cliquant sur la double flèche à droite, et en sélectionnant “Performance” dans le menu qui apparaît :

Maintenant que l’onglet Performance est ouvert, nous arrivons sur une fenêtre plutôt spartiate  en apparence. En effet, celle-ci contient juste quelques boutons et des instructions disant que nous pouvons cliquer sur le bouton “Record” pour enregistrer, ou cliquer sur le bouton du dessous pour enregistrer le chargement de la page :

Mais avant de cliquer sur l’un de ces boutons, ajustons un peu notre installation. En haut de la fenêtre se trouve une case “Screenshots”. Si on coche la case, Chrome prendra une capture d’écran de chaque image de l’enregistrement, nous permettant ainsi de visionner le déroulement de l’animation image par image. Cette option n’est pas toujours nécessaire pour analyser les performances d’un site, comme quand il s’agit de performances réseau, mais l’animation est un domaine très visuel, l’option screenshot peut donc s'avérer particulièrement utile. Nous allons donc cocher cette case Screenshots :

Nous voilà presque prêts à commencer l’enregistrement. Mais avant, il nous reste une dernière chose à faire. Rappelez-vous que nous voulons voir nos animations telles qu’elles apparaissent sur des appareils plus lents. Or, si on enregistre maintenant, on verra seulement l’animation s’exécuter sur notre ordinateur. Pour remédier à cela, l’onglet Performance nous permet de brider la vitesse de notre processeur.

En cliquant sur la roue de paramétrages dans le coin en haut à droite, quatre options apparaissent, dont l’option “CPU throttling”. Simulons l’appareil le plus lent possible en choisissant 6X, qui limite notre processeur à une vitesse six fois plus lente que ses capacités (n'oubliez surtout pas de décocher cette case quand vous aurez terminé, sinon votre navigateur pourrait très rapidement vous rendre complètement fou 😂) :

Observez les performances dans le détail

Nous voilà fin prêts à commencer l’inspection de nos animations ! Les performances de la page ne nous préoccupent pas pour l’instant, donc nous pouvons immédiatement appuyer sur le bouton Record. Quand on clique sur ce bouton Record, une fenêtre de dialogue apparaît pour nous informer que l’enregistrement du site a commencé. Nous pouvons donc maintenant interagir avec notre bouton pour lancer les transitions. Une fois que les animations sont terminées, on peut cliquer sur le bouton “Stop” dans la fenêtre de progression :

Et c’est tout ! DevTools prend un instant pour traiter les données recueillies, puis les affiche dans l’onglet Performance.

Décomposons maintenant tout cela étape par étape.

Tout en haut, on trouve l’avancement de l’enregistrement, en millisecondes. Sur cette ligne, des graphiques verts suivent les FPS de notre site ; les plateaux correspondent aux événements d’animation que nous allons détailler dans un instant. Et juste sous cette ligne d’avancement se trouve une succession des images que DevTools a enregistrées.

Quand on passe la souris sur un des aperçus, il s’agrandit et nous montre exactement à quoi ressemblait le site à ce moment précis :

Regardons notre animation de plus près en zoomant sur une des zones vertes. Pour cela, cliquez puis faites glisser votre souris sur la zone qui vous intéresse, ou bien utilisez la molette de la souris :

Maintenant que nous sommes entrés dans les détails de la partie animation de l’enregistrement, concentrons-nous sur les cases vertes plus bas. Elles correspondent aux images de notre animation. En passant la souris dessus, nous pouvons voir le temps de calcul de chaque image, et le nombre de FPS :

On peut constater des changements assez faibles entre chaque image, ce qui est normal, mais globalement, chaque image est proche de notre objectif de 60 FPS : c'est parfait ! Nous pouvons donc affirmer avec certitude que nos transitions seront bien fluides, même sur un appareil six fois plus lent que notre ordinateur.

Passez vos images au crible

Allons voir ce qui se passe lorsque le navigateur calcule une image dans une animation. Pour cela, choisissez une image et zoomez au maximum.

Maintenant que nous avons isolé une image dans l’animation, intéressons-nous à la section “Main” de l’onglet Performance. Cette section permet de voir tous les calculs qui ont transformé notre code en une page web animée. Les calculs sont répartis en catégories identifiées par des codes couleurs.

Les blocs violets représentent les calculs de base qui permettent l’affichage d’une page web, comme l’analyse du CSS et le calcul des styles.

Les blocs jaunes indiquent des calculs de l'étape layout, mais… hourra, il n’y en a pas ici ! Qu'est-ce que je vous avais dit ? 😏 Grâce à la propriété  transform, nous avons évité tout calcul de layout, bien trop gourmand en calcul, ce qui aurait dégradé notre FPS.

Mais si notre image ne comporte pas de calculs de layout, elle comprend bien une case verte, qui représente un calcul de paint ou de composition. En passant la souris dessus, nous voyons qu’il s’agit bien d’un calcul de composition. Notre animation n’a pas non plus besoin de calculs de paint :

Plus besoin de me croire sur parole maintenant : vous le constatez par vous-même ! La propriété transform nous permet de créer des animations abouties en évitant des calculs complexes pour notre navigateur. Et moins de calculs signifie plus d’images par seconde, donc une meilleure fluidité ! 🚀

En résumé

• Chrome DevTools est l'outil de prédilection des développeurs. Il permet d'inspecter le code source d'une page, d'analyser les performances de notre page, de brider la performance de notre machine pour simuler un appareil plus lent. Pour cette dernière option, activez l’option “CPU throttling” ;

• l'outil Performance permet d'analyser les performances d’une page, notamment le taux d’images par seconde d’une animation ;

• on peut utiliser l’onglet Performance pour analyser nos animations, ce qui permet de repérer les problèmes dans notre code qui pourraient causer des problèmes de fluidité sur certains supports ;

• zoomer sur une image précise d’une animation permet de détailler les calculs effectués par le navigateur, que nous avions vus dans le chapitre sur le fonctionnement du navigateur.

Dans le chapitre suivant, nous aborderons enfin l'autre propriété dont nous disposons pour assurer un FPS optimal : opacity. Nous apprendrons à maîtriser cette propriété pour créer des animations en couleur sans déclencher de calcul de type paint dans le navigateur. Alors, à tout de suite !