Présentation de l’outil Performance

Les performances d’exécution sont les performances de votre page 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 :

• Optimiser la vitesse du site Web à l'aide de Lighthouse

Prise en main

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

1. Ouvrez la page de démonstration Animation lente dans votre fenêtre ou onglet InPrivate. Pour ce faire, cliquez avec le bouton droit sur le lien, puis sélectionnez Ouvrir le lien dans la fenêtre InPrivate. Vous allez profiler cette page, qui montre un nombre variable d’icônes se déplaçant vers le haut et vers le bas. Pour plus d’informations sur InPrivate, consultez Parcourir InPrivate dans Microsoft Edge

   Code source : MicrosoftEdge / Demos > devtools-performance-get-started.

2. Appuyez sur Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS) pour ouvrir DevTools :

   

Pour le reste des captures d’écran, DevTools est affiché dans une fenêtre distincte.

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, utilisez la limitation du processeur pour simuler les performances de votre page sur les appareils mobiles.

1. Dans DevTools, ouvrez l’outil Performance .

2. Cliquez sur Paramètres de capture (). DevTools révèle les paramètres liés à la façon dont il capture les métriques de performances.

3. Pour PROCESSEUR, sélectionnez Ralentissement 4x. DevTools limite votre processeur afin qu’il soit 4 fois plus lent que d’habitude.

   

   Si vous souhaitez vous assurer que les pages fonctionnent bien sur les appareils mobiles bas de bout en bout, définissez le processeur sur ralentissement 6x.

Configurer la démonstration

La section suivante vous permet de personnaliser la démonstration pour vous assurer que votre expérience est relativement cohérente avec les captures d’écran et les descriptions.

1. Cliquez sur le bouton Ajouter des éléments jusqu’à ce que les icônes bleues se déplacent sensiblement plus lentement qu’auparavant. Sur un ordinateur haut de gamme, vous pouvez cliquer dessus environ 20 fois.

2. Cliquez sur Optimisé. Les icônes bleues doivent se déplacer plus rapidement et plus facilement.

3. Pour mieux afficher une différence entre les versions optimisées et non optimisées, cliquez plusieurs fois sur le bouton Supprimer les éléments , puis réessayez. Si vous ajoutez trop d’icônes bleues, vous pouvez utiliser le processeur au maximum et vous risquez de ne pas observer une différence majeure dans les résultats pour les deux versions.

4. Cliquez sur Lent. Les icônes bleues se déplacent plus lentement et avec plus de lenteur à nouveau.

Enregistrer les performances du runtime

Lorsque vous avez exécuté la version optimisée de la page, les icônes bleues se déplacent plus rapidement. Pourquoi ? Les deux versions sont censées déplacer les icônes de la même quantité d’espace dans le même laps de temps. Prenez un enregistrement dans l’outil Performance pour découvrir comment détecter le goulot d’étranglement des performances dans la version non optimisée.

1. Dans DevTools, cliquez sur Enregistrer (). DevTools capture les métriques de performances lors de l’exécution de la page.

   

2. Attendez quelques secondes.

3. Cliquez sur 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.

Analyser les résultats

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

1. Le graphique processeur s’affiche en haut. 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 mis au maximum pendant de longues périodes, cela indique que la page ne fonctionne pas correctement.

   

2. Pointez sur les graphiques PROCESSEUR ou NET . DevTools montre une capture d’écran de la page à ce moment-là. Déplacez votre souris vers la gauche et la droite pour relire l’enregistrement. L’action est appelée nettoyage, et elle est utile pour analyser manuellement la progression de l’enregistrement des performances.

   

Bonus : Ouvrir la superposition Des statistiques de rendu d’image

Un autre outil pratique est la superposition De statistiques de rendu d’images, qui fournit des estimations en temps réel pour FPS à mesure que la page s’exécute. La superposition des statistiques de rendu de trame n’est pas nécessaire pour ce didacticiel, mais peut fournir des informations utiles.

1. Dans DevTools, appuyez sur Ctrl+Maj+P (Windows, Linux) ou Cmd+Maj+P (macOS) pour ouvrir le menu Commandes.

2. Commencez à taper Rendering dans le menu Commandes , puis cliquez sur Afficher le rendu.

3. Dans l’outil Rendu , activez Les statistiques de rendu des images. Une nouvelle superposition s’affiche en haut à gauche de votre page web.

   

4. Lorsque vous avez terminé d’examiner les données FPS, décochez la case Frame Rendering Stats pour masquer la superposition.

Rechercher le goulot d’étranglement

Une fois que vous avez vérifié que l’animation ne fonctionne pas correctement, l’étape suivante consiste à répondre à la question « pourquoi ? »

1. Lorsqu’aucun événement n’est sélectionné, le panneau Résumé affiche une répartition de l’activité. La page a passé la plupart 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. Développez la section Main . DevTools vous montre un graphique de flamme de l’activité sur le thread main, 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.

   

3. Il y a beaucoup de données dans l’enregistrement. Pour effectuer un zoom sur une partie de l’enregistrement, cliquez et faites glisser dans la zone Vue d’ensemble vers le haut de l’outil Performances . La zone Vue d’ensemble inclut les graphiques PROCESSEUR et NET (indiqués à droite). La section Principale et le panneau 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, S pour effectuer un zoom arrière.
   • A pour déplacer la sélection vers la gauche, 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 cadre d’animation, il change le style de chaque icône, puis interroge la position de chaque icône sur la page. É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.

Analyser la version optimisée

À l’aide des flux de travail et des outils que vous venez d’apprendre, cliquez sur Optimisé sur la page web de démonstration pour activer le code optimisé, effectuer un autre enregistrement des performances, puis analyser les résultats. 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.

Version non optimisée

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. 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, 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.

Version optimisée

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 de navigateur à savoir où se trouvent tous les éléments sur la page, 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 mise en page. 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.

Pour en savoir plus, consultez Utiliser les modifications de transformation et d’opacité pour les animations.

Étapes suivantes

Pour vous familiariser avec l’outil Performance , entraînez-vous à profiler vos pages 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 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.