Mesure des performances

Si vous êtes en capacité d'écrire du code pour le web, sachez qu'il existe un grand nombre d'API Web destinées à créer vos propres outils de mesure de performances.

Vous pouvez utiliser l'API d'horodatage de navigation pour mesurer les performances web côté client. Cela comprend le volume de temps nécessaire pour décharger la page précédente, le temps que prendra la résolution du nom de domaine, le total du temps passé à exécuter le chargement de la page, et bien plus encore. Vous pouvez utiliser les API pour créer des indicateurs de mesure de tous les évènements liés à la navigation affichés dans le diagramme présenté ci-dessous.

L'API de performances propose un accès aux informations liées aux performances, ce qui comprend l'API de chronologie des performances, l'API d'horodatage de la navigation, l'API d'horodatage du visiteur ainsi que l'API d'horodatage des ressources. Ces interfaces permettent de mesurer précisément le temps que prennent les tâches JavaScript pour se dérouler.

L'objet PerformanceEntry fait partie de la chronologie des performances. Une entrée performance peut directement être créée en utilisant PerformanceMark ou une PerformanceMeasure (par exemple en appelant la méthode mark()) sur un point explicite de l'application. Les entrées de performances peuvent aussi être créées de façon indirecte, par exemple lors du chargement d'une ressource graphique.

L'API PerformanceObserver peut être utilisée pour observer le déroulement d'évènements de mesure des performances et permet de vous notifier de nouvelles entrées de performances lorsqu'elles enregistrent la chronologie des performances dans le navigateur.

Si cet article n'a pas pour but de proposer une documentation complète de ces API, il est bon de savoir qu'elles existent. Vous pouvez vous référer à l'article concernant l'horodatage de navigation pour aller plus loin et découvrir plus d'exemples concernant les API liées à la mesure des performances.

Il y a beaucoup d'outils disponibles pour vous aider à améliorer les performances de vos sites. Ils sont généralement classés dans deux catégories :

• Les outils qui indiquent ou mesurent les performances, tels que PageSpeed Insights ou le moniteur réseau et le moniteur de performances de Firefox. Ces outils vous montrent la vitesse de chargement de votre site ou de votre application. Ils vous indiquent également les points sur lesquels votre application web peut être améliorée.
• Les outils qui corrigent le code de votre application web ou de votre site afin d'améliorer ses performances. Par exemple, certains outils de construction empaquettent le code réparti sur plusieurs fichiers en un seul fichier unique afin de réduire le nombre de requêtes HTTP. Il existe aussi des minificateurs qui suppriment tous les espaces de votre code pour réduire la taille des fichiers.

Sur cette page, ces deux catégories d'outils seront abordées. Par ailleurs, en parlant des mesures de performances, nous aborderons bien entendu les indicateurs que vous allez utiliser pour déterminer si les performances de votre site s'améliorent ou non.

Les outils tels que PageSpeed Insights sont faits pour mesurer les performances des sites. Vous saisissez une URL, puis vous obtenez un rapport de performances en quelques secondes. Le rapport contient les scores obtenus par votre site, que ce soit sur mobile ou sur ordinateur de bureau. C'est un bon point de départ pour savoir d'où vous partez et pour connaître les points d'amélioration.

Au moment de l'écriture de cette page, voici à quoi ressemblait le rapport de performances du site MDN :

Un rapport de performances contient des informations concernant le temps d'attente des visiteurs avant que quelque chose ne s'affiche, le nombre d'octets à télécharger pour afficher la page, et bien plus encore. Cela vous permet également de savoir si les mesures réalisées sont positives ou négatives.

webpagetest.org est un autre exemple d'outil capable de tester automatiquement votre site et d'afficher des indicateurs utiles.

Essayez vos sites favoris sur webpagetest.org et PageSpeed Insights, vous connaîtrez leurs scores de performances.

La plupart des navigateurs ont des outils avec lesquels vous pouvez tester les pages web en cours de chargement pour déterminer leurs performances. Par exemple, le moniteur réseau de Firefox retourne des informations détaillées sur toutes les ressources téléchargées sur le réseau ainsi qu'un graphique montrant la durée de téléchargement de chaque ressource.

Vous pouvez aussi utiliser le moniteur de performances pour mesurer les performances de l'interface de votre application ou de votre site pendant que vous réalisez différentes actions. Cela permet d'identifier les fonctionnalités qui ralentissent le plus votre interface.

Cet article était destiné à proposer une vue d'ensemble rapide des indicateurs de performance web que vous pouvez mesurer sur un site ou une application web. Dans le prochain article, nous verrons comment travailler sur la performance perçue et nous découvrirons des techniques permettant de rendre les éléments les plus longs à charger un peu moins lents pour le visiteur, voire pour les masquer complètement.

page(Doc) not found /fr/docs/Learn/Performance/Perceived_performance