Analyser les performances du runtime (tutoriel)

Les performances d’exécution sont les performances de votre page web lorsqu’elle est en cours d’exécution, par opposition au chargement. Le tutoriel suivant vous apprend à utiliser l’outil DevTools Performance pour analyser les performances du runtime.

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 principaux éléments vitaux web 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 principaux éléments vitaux web dans l’outil Performances .

Voir aussi :

• Web Vitals web.dev.
• Terminologie de l’outil Performance : analysez les performances de votre site web.
• Optimiser la vitesse du site Web à l'aide de Lighthouse

Étape 1 : Ouvrir la démonstration en mode InPrivate et ouvrir DevTools

Dans le tutoriel suivant, vous ouvrez DevTools sur la page web de démonstration « Animation lente » 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 Animation lente , puis sélectionnez Ouvrir le lien dans la fenêtre InPrivate.

   Vous allez profiler cette page web de démonstration, qui affiche un nombre variable d’icônes se déplaçant vers le haut et vers le bas. Si vous souhaitez afficher le code source de la démonstration, 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 installé un grand nombre d’extensions, ces extensions peuvent créer du bruit dans vos mesures de performances. Si vous souhaitez plus d’informations, consultez Parcourir 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 Emplacement d’ancrage, cliquez sur le bouton Undock into separate window (Undock into).

Étape 2 : Limiter le processeur pour simuler un processeur mobile

Les appareils mobiles ont beaucoup moins de puissance processeur que les ordinateurs de bureau et les ordinateurs portables. Chaque fois que vous profilez une page web, utilisez la limitation du processeur 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 ().

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

3. Dans le menu déroulant Limitation du processeur en haut à gauche, sélectionnez la valeur de ralentissement recommandée, par exemple ralentissement 4x - recommandé :

   

   Ou, dans la section Paramètres d’environnement en bas à droite, dans le menu déroulant limitation du processeur , sélectionnez la valeur de ralentissement recommandée, par exemple 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 machine. Pour vous assurer qu’une page web fonctionne correctement sur les appareils mobiles même inférieurs, sélectionnez un ralentissement plus important dans la liste déroulante de limitation du processeur , par exemple un ralentissement 6x.

   DevTools limite votre processeur 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 ().

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

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

Avant d’enregistrer les performances, remplissez la page web de démonstration avec un nombre idéal d’icônes pour comparer le code non optimisé et le code 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 mobiles, en fonction de votre ordinateur. Il doit y avoir suffisamment d’icônes pour que vous puissiez voir clairement une différence de vitesse et de douceur de l’animation lorsque vous alternez entre la sélection du code non optimisé (lent) et le 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 Sluggish Animation.

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

2. Cliquez plusieurs fois sur le bouton Ajouter des éléments , jusqu’à ce que les icônes bleues commencent à se déplacer très lentement et de façon 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 limite 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 la même durée.

Prenez un enregistrement dans l’outil Performance pour apprendre à 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 Lente .

   Les icônes se déplacent plus lentement et de manière 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 Performance , 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 limité. (Ces captures d’écran doivent afficher l’icône d’avertissement de limitation () sous l’onglet de l’outil Performances de 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 Performance :

   

Ces résultats de performances affichent une quantité écrasante de données, mais ils seront tous plus logiques sous peu.

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

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

1. En haut de l’outil Performances , examinez le graphique du processeur :

   

   Les couleurs du graphique processeur 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 zone, ce qui signifie que le processeur a été maximal pendant l’enregistrement. Chaque fois que le processeur est maximal pendant de longues périodes, cela indique que la page web ne fonctionne pas correctement.

2. Pointez sur les graphiques PROCESSEUR ou NET :

   

   DevTools montre une capture d’écran de la page web à ce stade.

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

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

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

Un autre outil pratique est la superposition de statistiques de rendu d’image, parfois appelée compteur FPS. La superposition Des statistiques de rendu d’images fournit des estimations en temps réel des 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 didacticiel, 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 Basculer l’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 Autres outils (), puis sélectionnez Rendu.

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

3. Dans l’outil Rendu , cochez la case Frame Rendering Stats (Statistiques du rendu de trame ) :

   

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

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

   

   La superposition comporte 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 Frame Rendering Stats (Statistiques de rendu des images).

7. Dans le coin supérieur droit de DevTools, cliquez sur le bouton Personnaliser et contrôler DevTools (), puis sélectionnez Basculer l’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 : Rechercher le goulot d’étranglement des performances

Une fois que vous avez vérifié que l’animation ne fonctionne pas correctement, 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 majeure partie du temps au rendu. Étant donné que la performance est l’art de faire moins de travail, votre objectif est de réduire le temps consacré au travail de rendu.

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

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

   

   • L’axe x représente l’enregistrement, au fil du 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 effectuer un zoom sur une partie de l’enregistrement :

   

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

   La section Main (sous vue d’ensemble) et l’onglet Résumé affichent uniquement les informations relatives à 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 Main , à cliquer sur l’arrière-plan ou sur un événement, puis à appuyer sur :

   • W pour effectuer un zoom avant ou S pour effectuer un zoom arrière.
   • A pour déplacer la sélection vers la gauche ou D pour déplacer la sélection 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, il s’agit d’un avertissement indiquant 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 évidence l’événement qui a initié l’événement Animation Frame Fired .

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

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

7. Effectuez un zoom avant sur l’événement Animation Frame Fired et ses événements enfants, à l’aide de la roulette de la souris ou du pavé tactile.

   Ou appuyez sur W.

   Vous pouvez maintenant voir les événements qui se produisent lorsqu’une seule image de l’animation est affichée. La fonction update est appelée, qui, à son tour, appelle la fonction updateSlow , qui déclenche de nombreux événements Recalculate Style et Layout :

   

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

   DevTools fournit plus d’informations sur l’événement dans le panneau Résumé . Il y a un avertissement concernant les « reflows forcés » (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 change 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 chaque position d’icône a changé. Il doit donc re-mettre en page l’icône afin de calculer la nouvelle position.

Voir aussi :

• Éviter les dispositions synchrones forcées dans Éviter les grandes dispositions complexes et les mises en page à web.dev.

Étape 8 : Enregistrer les performances du code optimisé

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

Enregistrez les performances du code optimisées, 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 Performance , 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 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 Performance .

Étape 9 : Analyser les performances du code optimisé

• À l’aide des workflows 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 la fréquence d’images améliorée à la réduction des événements dans le graphique à flammes dans la section Main , 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 de JavaScript à partir 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 distance. La position actuelle de l’icône est lue à l’aide de element.offsetTop.

Après nous être assurés que l’icône se trouve toujours dans les limites de la page web, nous définissons sa nouvelle position à l’aide element.style.topde , qui définit les styles inline sur l’élément.

Enfin, nous lisons element.offsetTop à nouveau, pour ajuster la direction de l’icône.

Étape 11 : Analyser le code optimisé

Le code optimisé utilise une séquence d’actions différente 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 inline de l’élément est plus rapide, car la lecture element.offsetTop force le moteur du navigateur à savoir où se trouvent tous les éléments sur la page web, ce qui nécessite que le moteur recalcule les styles et la disposition.

Nous ajustons ensuite la direction de l’icône, mais cette fois, nous ne lisons element.offsetTop plus comme 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 au lieu 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 disposition de la page web. Lors de l’utilisation de la transform propriété , le navigateur considère chaque icône comme une couche individuelle, puis affiche ces couches dans les positions correctes en recréant l’image finale.

Voir aussi :

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

Étape 12 : Réinitialiser les paramètres DevTools

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

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

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

3. Dans le menu déroulant Limitation du processeur en haut à gauche, sélectionnez Aucune limitation.

   DevTools arrête de limiter le 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 Emplacement d’ancrage, cliquez sur le bouton Dock to right ().

Étapes suivantes

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

Si vous avez des questions sur 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).

Vous pouvez également déposer un problème sur le dépôt 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 du runtime. Cet article s’est concentré sur un goulot d’étranglement d’animation particulier pour vous donner une présentation ciblée de l’outil Performance , mais il ne s’agit que de l’un des nombreux goulots d’étranglement que vous pouvez rencontrer.

Cette œuvre est concédée sous licence creative commons attribution 4.0 international.