Analyser les performances runtime (didacticiel)

Les performances d’exécution sont la façon dont votre page web fonctionne lorsqu’elle est en cours d’exécution, par opposition au chargement. Le tutoriel suivant vous explique comment utiliser l’outil DevTools Performance pour analyser les performances d’exécution.

Les compétences que vous apprenez dans ce tutoriel sont utiles pour analyser le chargement, l’interactivité et la stabilité visuelle de votre contenu web, qui sont également des indicateurs clés pour Core Web Vitals. Chacun des Core Web Vitals représente une facette distincte de l’expérience utilisateur, est mesurable sur le terrain et reflète l’expérience réelle d’un résultat critique centré sur l’utilisateur. Vous pouvez voir ces éléments essentiels du Web Vital dans l’outil Performances .

Voir aussi :

• Web Vitals au web.dev.
• Outil Terminologie dans les performances : Analysez les performances de votre site Web.
• Optimiser la vitesse du site Web à l'aide de Lighthouse

Étape 1 : Ouvrez la démo en mode InPrivate et ouvrez DevTools

Dans le tutoriel suivant, vous ouvrez DevTools sur la page web de démonstration « Sluggish Animation » et utilisez l’outil Performance pour trouver un goulot d’étranglement des performances sur la page web.

1. Cliquez avec le bouton droit sur le lien Slent Animation , puis sélectionnez Ouvrir le lien dans la fenêtre InPrivate.

   Vous profilerez cette page Web de démonstration, qui affiche un nombre variable d’icônes se déplaçant de haut en bas. Si vous souhaitez afficher le code source de la démo, consultez MicrosoftEdge / Demos > devtools-performance-get-started.

   Le mode InPrivate garantit que le navigateur s’exécute dans un état propre. Par exemple, si vous avez un grand nombre d’extensions installées, celles-ci peuvent créer du bruit dans vos mesures de performances. Si vous souhaitez plus d’informations, consultez Navigation InPrivate dans Microsoft Edge.

2. Cliquez avec le bouton droit sur la page Web de démonstration, puis sélectionnez Inspecter.

   DevTools s’ouvre :

   

3. Dans le coin supérieur droit de DevTools, cliquez sur le bouton Personnaliser et contrôler DevTools (), puis en regard de l’emplacement du Dock, cliquez sur le bouton Désactiver dans une fenêtre séparée ().

Étape 2 : Limitation du processeur, pour simuler un processeur mobile

Les appareils mobiles ont une puissance processeur bien inférieure à celle des ordinateurs de bureau et des ordinateurs portables. Chaque fois que vous profilez une page web, utilisez la limitation de l’UC pour simuler les performances de votre page web sur les appareils mobiles.

Limitez le processeur de votre ordinateur de bureau pour simuler un processeur mobile, comme suit :

1. Dans DevTools, ouvrez l’outil Performances ().

2. Cliquez sur le bouton Paramètres de capture ( de capture).

   DevTools affiche les paramètres, les menus déroulants et les cases à cocher liés à la capture des métriques de performances.

3. Dans le menu déroulant de limitation de l’UC en haut à gauche, sélectionnez la valeur de ralentissement recommandée, telle que ralentissement 4x - recommandé :

   

   Ou, dans la section Paramètres d’environnement en bas à droite, dans le menu déroulant de limitation du processeur , sélectionnez la valeur de ralentissement recommandée, telle que ralentissement 4x - recommandé. Les deux instances du menu déroulant sont liées.

   Le facteur de limitation recommandé est calculé par DevTools, en fonction de votre ordinateur. Pour vous assurer qu’une page web fonctionne correctement même sur les appareils mobiles bas de gamme, sélectionnez un ralentissement plus important dans la liste déroulante de limitation du processeur , tel qu’un ralentissement 6x.

   DevTools limite votre CPU afin qu’il soit plus lent que d’habitude.

   Une icône d’avertissement de limitation () s’affiche sous l’onglet de l’outil Performances pour vous rappeler que la limitation est activée.

4. Cliquez sur le bouton Paramètres de capture ( de capture).

   Les paramètres, les menus déroulants et les cases à cocher liés à la capture des métriques de performances sont masqués.

Étape 3 : Remplissez la page web avec un nombre idéal d’icônes

Avant d’enregistrer la performance, remplissez la page web de démonstration avec un nombre idéal d’icônes pour vous aider à comparer le code non optimisé et optimisé.

Pour créer une paire d’enregistrements de performances afin de comparer le code non optimisé et le code optimisé, la page web de démonstration doit d’abord afficher un certain nombre d’icônes animées, en fonction de votre machine. Il doit y avoir suffisamment d’icônes pour que vous puissiez clairement voir une différence de vitesse et de fluidité d’animation lorsque vous alternez entre la sélection du code non optimisé (lent) et du code optimisé .

Pour remplir la page web de démonstration avec un nombre idéal d’icônes :

1. Basculez vers la page web de démonstration d’Animation lente.

   Le bouton d’option Lent est initialement sélectionné, par défaut, de sorte que le code non optimisé soit utilisé.

2. Cliquez sur le bouton Ajouter des éléments plusieurs fois, jusqu’à ce que les icônes bleues commencent à se déplacer très lentement et de manière erratique.

3. Sélectionnez le bouton d’option Optimisé .

   Les icônes se déplacent plus rapidement et plus facilement.

4. Si vous ne voyez pas de différence notable entre l’utilisation du code non optimisé (lent) et optimisé, essayez de cliquer sur le bouton Supprimer les éléments .

   S’il y a trop d’icônes, cela maximise le processeur et vous ne voyez pas de différence majeure dans les résultats pour les deux versions du code.

Étape 4 : Enregistrer les performances du code non optimisé

Lorsque vous exécutez la version optimisée du code de la page web, les icônes bleues se déplacent plus rapidement. Pourquoi ? Les deux versions du code sont censées déplacer les icônes de la même quantité d’espace dans le même laps de temps.

Effectuez un enregistrement dans l’outil Performances pour découvrir comment détecter le goulot d’étranglement des performances dans la version non optimisée (lente) du code :

1. Dans la page Web de démonstration, sélectionnez le bouton d’option Lent .

   Les icônes se déplacent de façon plus lente et erratique. Le code non optimisé est en cours d’exécution et sera profilé, et il existe un nombre idéal d’icônes pour illustrer les performances médiocres et aider à trouver le goulot d’étranglement des performances.

2. Dans la fenêtre DevTools, dans l’outil Performances , cliquez sur le bouton Enregistrer ().

   DevTools capture les métriques de performances lors de l’exécution de la page web :

   

   Le processeur est toujours à niveau. (Ces captures d’écran doivent montrer l’icône d’avertissement de limitation () dans l’onglet de l’outil Performances dans la barre d’activité.)

3. Patientez quelques secondes, puis cliquez sur l’icône Arrêter () ou sur le bouton Arrêter .

   DevTools arrête l’enregistrement, traite les données, puis affiche les résultats dans l’outil Performances :

   

Ces résultats de performance montrent une quantité écrasante de données, mais tout cela aura bientôt plus de sens.

Étape 5 : Analyser les performances du code non optimisé

Une fois que vous disposez d’un enregistrement des performances de la page web, vous pouvez évaluer les performances de la page web et trouver la cause d’éventuels problèmes de performance.

1. Dans la partie supérieure de l’outil Performances , examinez le graphique de l’UC :

   

   Les couleurs du graphique CPU correspondent aux couleurs du panneau Résumé , en bas de l’outil Performances . Le graphique du processeur montre que ces régions constituent une grande surface, ce qui signifie que le processeur a été au maximum pendant l’enregistrement. Chaque fois que le processeur est au maximum pendant de longues périodes, c’est un indicateur que la page web ne fonctionne pas bien.

2. Placez le curseur sur les graphiques CPU ou NET :

   

   DevTools affiche une capture d’écran de la page web à ce moment-là.

3. Déplacez votre souris vers la gauche et la droite pour relire l’enregistrement.

   Cette action est appelée nettoyage et est utile pour analyser manuellement la progression de l’enregistrement des performances.

Étape 6 : Afficher la superposition des statistiques de rendu de trame

Un autre outil pratique est la superposition Frame Rendering Stats , parfois appelée compteur FPS. La superposition des statistiques de rendu d’images fournit des estimations en temps réel pour les images par seconde (FPS) pendant l’exécution de la page web. La superposition des statistiques de rendu de trame n’est pas nécessaire pour ce tutoriel, mais peut fournir des informations utiles.

1. Dans le coin supérieur droit de DevTools, cliquez sur le bouton Personnaliser et contrôler DevTools (), puis sélectionnez Activer/désactiver le panneau Affichage rapide.

   Vous pouvez également appuyer sur Échap une ou deux fois.

   Le panneau Affichage rapide s’affiche en bas de DevTools.

2. Dans la barre d’outils Affichage rapide , cliquez sur le bouton Plus d’outils (), puis sélectionnez Rendu.

   L’outil Rendu s’ouvre dans le panneau Affichage rapide .

3. Dans l’outil Rendu , cochez la case Statistiques de rendu de l’image :

   

4. Basculez vers la page web de démonstration.

   La superposition des statistiques de rendu de trame s’affiche :

   

   La superposition comprend les sections suivantes :

   • Fréquence d’images
   • Raster GPU
   • Mémoire GPU

   Désactivez la superposition :

5. Basculez vers la fenêtre DevTools.

6. Dans l’outil Rendu , décochez la case Statistiques de rendu de trame .

7. Dans le coin supérieur droit de DevTools, cliquez sur le bouton Personnaliser et contrôler DevTools (), puis sélectionnez Activer/désactiver le panneau Affichage rapide.

   Ou appuyez sur Échap.

   Le panneau Affichage rapide est masqué.

Voir aussi :

• Outil de rendu, pour voir à quoi ressemble une page Web avec différentes options d’affichage ou des défaillances visuelles

Étape 7 : Trouver le goulot d’étranglement des performances

Après avoir vérifié que l’animation ne fonctionne pas bien, l’étape suivante consiste à répondre à la question « pourquoi ? »

1. En bas de l’outil Performances , sélectionnez l’onglet Résumé :

   

   Lorsqu’aucun événement n’est sélectionné, l’onglet Résumé affiche une répartition de l’activité. La page Web a passé la plupart de son temps à s’afficher. Puisque la performance est l’art de faire moins de travail, votre objectif est de réduire le temps passé à faire du travail de rendu.

2. Dans l’outil Performances , cliquez sur la ligne principale pour la développer.

   DevTools affiche un graphique en flammes de l’activité sur le thread principal, au fil du temps :

   

   • L’axe des x représente l’enregistrement, dans le temps. Chaque barre représente un événement. Une barre plus large signifie que l’événement a pris plus de temps.

   • L’axe y représente la pile des appels. Lorsque les événements sont empilés les uns sur les autres, cela signifie que les événements supérieurs ont provoqué les événements inférieurs.

   Il y a beaucoup de données dans l’enregistrement.

3. Dans la zone Vue d’ensemble sous la barre d’outils, cliquez et faites glisser horizontalement pour zoomer sur une partie de l’enregistrement :

   

   La zone Vue d’ensemble inclut les graphiques CPU et NET (indiqués à droite).

   La section principale (sous la vue d’ensemble) et l’onglet Résumé affichent uniquement les informations de la partie sélectionnée de l’enregistrement.

   Une autre façon de modifier la zone sélectionnée consiste à mettre le focus sur la section principale , à cliquer sur l’arrière-plan ou un événement, puis à appuyer sur :

   • W pour effectuer un zoom avant ou S arrière.
   • A pour déplacer la sélection vers la gauche ou D vers la droite.

4. Cliquez sur un événement Animation Frame Fired .

   Lorsqu’un triangle rouge s’affiche en haut à droite d’un événement, c’est un avertissement qu’il peut y avoir un problème lié à l’événement. L’événement Animation Frame Fired se produit chaque fois qu’un rappel requestAnimationFrame() est exécuté.

   Le panneau Résumé affiche des informations sur cet événement :

   

5. Cliquez sur le lien Révéler .

   DevTools met en surbrillance l’événement qui a initié l’événement Animation Frame Tied .

6. Cliquez sur le lien app.js:125 .

   La ligne de code source appropriée s’affiche dans l’outil Sources .

7. Zoomez sur l’événement Animation Frame Fired et ses événements enfants à l’aide de la molette de la souris ou du trackpad.

   Ou appuyez sur W.

   Vous pouvez désormais voir les événements qui se produisent lorsqu’une seule image de l’animation est rendue. La fonction de mise à jour est appelée, qui, à son tour, appelle la fonction updateSlow , qui déclenche de nombreux événements de recalcul de style et de disposition :

   

8. Cliquez sur l’un des événements de disposition violets.

   DevTools fournit plus d’informations sur l’événement dans le panneau Résumé . Il existe un avertissement concernant les « redistributions forcées » (re-disposition).

9. Dans le panneau Résumé , cliquez sur le lien app.js:104 sous Disposition forcée.

   DevTools vous amène à la ligne de code qui a forcé la disposition dans l’outil Sources :

   

Le problème avec le code non optimisé est que, dans chaque image d’animation, il modifie le style de chaque icône, puis interroge la position de chaque icône sur la page Web. Étant donné que les styles ont changé, le navigateur ne sait pas si la position de chaque icône a changé. Il doit donc re-disposer l’icône afin de calculer la nouvelle position.

Voir aussi :

• Éviter les dispositions synchrones forcées Dans Évitez les grandes mises en page complexes et la mise en page à web.dev.

Étape 8 : Enregistrer les performances du code optimisé

Vous avez enregistré les performances du code non optimisé ci-dessus.

Enregistrez les performances du code optimisé comme suit :

1. Cliquez sur Optimisé sur la page web de démonstration pour activer le code optimisé.

2. Dans la fenêtre DevTools, dans l’outil Performances , cliquez sur le bouton Enregistrer ().

   DevTools capture les métriques de performances lors de l’exécution de la page web.

3. Patientez quelques secondes, puis cliquez sur l’icône d’arrêt () ou sur le bouton d’arrêt .

   DevTools arrête l’enregistrement, traite les données, puis affiche les résultats dans l’outil Performances .

Étape 9 : Analyser les performances du code optimisé

• À l’aide des flux de travail et des outils que vous venez d’apprendre, analysez les résultats dans les performances, comme à l’étape 5 : analyser les performances du code non optimisé, ci-dessus.

  De l’amélioration de la fréquence d’images à la réduction des événements dans le graphique en flammes dans la section principale , la version optimisée de l’application fait beaucoup moins de travail, ce qui se traduit par de meilleures performances.

Étape 10 : Analyser le code non optimisé

Comparez cet extrait de code JavaScript de la version non optimisée de l’application :

// Read the current position.
const currentPos = element.offsetTop;
// Read the direction.
const direction = element.dataset.dir;
// Calculate the next position.
let nextPos = direction === 'up' ? currentPos - SPEED : currentPos + SPEED;

// If the new position is out of bounds, reset it.
if (nextPos < 0) {
  nextPos = 0;
} else if (nextPos > canvas.offsetHeight) {
  nextPos = canvas.offsetHeight;
}

// Set the new position on the element.
element.style.top = `${nextPos}px`;

// Switch the direction if needed.
if (element.offsetTop === 0) {
  element.dataset.dir = 'down';
} else if (element.offsetTop === canvas.offsetHeight) {
  element.dataset.dir = 'up';
}

L’extrait de code ci-dessus s’exécute sur chaque image de la boucle de rendu du navigateur, pour chaque icône bleue de la page web. La element variable fait référence à une seule icône bleue.

Dans cette version non optimisée, nous créons une nextPos variable définie sur la position actuelle de l’icône, à laquelle nous ajoutons une certaine distance. La position actuelle de l’icône est lue à l’aide element.offsetTopde .

Après nous être assuré que l’icône est toujours dans les limites de la page web, nous définissons sa nouvelle position en utilisant element.style.top, qui définit des styles en ligne sur l’élément.

Enfin, nous avons relu element.offsetTop , pour ajuster la direction de l’icône.

Étape 11 : Analyser le code optimisé

Le code optimisé utilise une séquence différente d’actions pour effectuer moins de travail. Voici le même extrait de code JavaScript de la version optimisée de l’application :

// Read the current position.
const currentPos = parseFloat(element.style.transform.match(/[0-9.]+/)[0]);
// Read the direction.
const direction = element.dataset.dir;
// Calculate the next position.
let nextPos = direction === 'up' ? currentPos - (SPEED * 100 / canvasHeight) : currentPos + (SPEED * 100 / canvasHeight);

// If the new position is out of bounds, reset it, and switch the direction.
if (nextPos < 0) {
  nextPos = 0;
  element.dataset.dir = 'down';
} else if (nextPos > 100) {
  nextPos = 100;
  element.dataset.dir = 'up';
}

// Set the new position on the element.
element.style.transform = `translateY(${nextPos}vh)`;

Dans la version optimisée, nous définissons d’abord la valeur de la nextPos variable en lisant element.style.transform au lieu d’utiliser element.offsetTop. L’utilisation du style en ligne de l’élément est plus rapide, car la lecture element.offsetTop oblige le moteur du navigateur à savoir où se trouvent tous les éléments sur la page Web, ce qui oblige le moteur à recalculer les styles et la mise en page.

Nous ajustons ensuite la direction de l’icône, mais cette fois nous ne relisons element.offsetTop pas comme fait dans la version non optimisée.

Enfin, nous définissons la nouvelle position de l’icône, mais cette fois nous utilisons element.style.transform à la place de element.style.top. L’utilisation element.style.transform est plus rapide, car la propriété CSS transform peut être appliquée par le moteur de rendu du navigateur sans avoir à recalculer la mise en page de la page web. Lors de l’utilisation de la transform propriété, le navigateur considère chaque icône comme un calque individuel, puis affiche ces calques dans les positions correctes en recomposant l’image finale.

Voir aussi :

• Évitez les propriétés qui déclenchent la disposition ou le peindre dans Comment créer des animations CSS hautes performances au web.dev.
• Opacité de transition dans l’opacité au niveau de MDN.

Étape 12 : réinitialiser les paramètres de DevTools

1. Basculez vers la fenêtre DevTools non ancrée.

2. Dans l’outil Performances, cliquez sur le bouton Paramètres de capture ( de capture).

   DevTools affiche les paramètres, les menus déroulants et les cases à cocher liés à la capture des métriques de performances.

3. Dans le menu déroulant de limitation de l’UC en haut à gauche, sélectionnez Aucune limitation.

   DevTools arrête la limitation du processeur. L’icône d’avertissement est supprimée de l’onglet de l’outil Performances .

4. Dans le coin supérieur droit de DevTools, cliquez sur le bouton Personnaliser et contrôler DevTools (), puis en regard de l’emplacement du Dock, cliquez sur le bouton Dock à droite ().

Étapes suivantes

Pour vous familiariser avec l’outil Performances , entraînez-vous à profiler vos pages web et à analyser les résultats.

Si vous avez des questions concernant vos résultats, dans la barre d’activité, sélectionnez Aide () >Commentaires. Vous pouvez également appuyer sur Alt+Maj+I (Windows, Linux) ou Option+Maj+I (macOS).

Ou, déposer un problème sur le référentiel MicrosoftEdge/DevTools.

Dans vos commentaires, incluez des captures d’écran ou des liens vers des pages web reproductibles, si possible.

Il existe de nombreuses façons d’améliorer les performances d’exécution. Cet article s’est concentré sur un goulot d’étranglement d’animation particulier pour vous donner une vue d’ensemble de l’outil Performances , mais ce n’est qu’un des nombreux goulots d’étranglement que vous pouvez rencontrer.

Remarque

Certaines parties de cette page sont des modifications fondées sur le travail créé et partagé par Google et utilisées conformément aux conditions décrites dans la licence internationale 4,0 d’attribution créative. La page originale se trouve ici et est écrite par Kayce Basques.

Ce travail est sous licence Creative Commons Attribution 4.0 International.