API Performance
L'API Performance est un ensemble de standards utilisés pour mesurer les performances des applications web.
Concepts et utilisation
Si on veut s'assurer que les applications web sont rapides, il est important de mesurer et d'analyser différentes métriques relatives aux performances. L'API Performance fournit des métriques natives et l'outillage pour ajouter des mesures spécifiques à la frise chronologique des performances du navigateur. La frise chronologique des performances contient des horodatages à haute précision et peut être affichée dans les outils de développement. Les données correspondantes peuvent aussi être envoyées à des outils d'analyse externes pour enregistrer l'évolution des performances sur le temps.
Chaque métrique de performance est représentée par un objet PerformanceEntry. Une entrée de performance possède un nom (name), une durée (duration), un horodatage de début (startTime) et un type (type). Toutes les métriques de performance étendent l'interface PerformanceEntry en la spécialisant.
La plupart des entrées de performance sont enregistrées sans que vous ayez à faire quoi que ce soit. Elles sont disponibles via la méthode Performance.getEntries() ou (encore mieux) grâce aux instances de PerformanceObserver. On a par exemple les entrées natives PerformanceEventTiming qui sont enregistrées pour les évènements dont la durée dépasse un seuil donné. L'API Performance permet aussi de définir et d'enregistrer des évènements sur mesure à l'aide des interfaces PerformanceMark et PerformanceMeasure.
L'interface Performance est disponible sur chaque contexte global à l'aide de self.performance (en-US) et permet d'ajouter des entrées de performance spécifiques, de récupérer ou de purger les entrées de performance.
L'interface PerformanceObserver permet d'écouter les évènements liés à l'enregistrement des différents types d'entrée de performance.
Pour plus d'informations sur les concepts de cette API, voir la section sur les guides de l'API Performance ci-après.
Référence
L'API Performance définit les interfaces suivantes :
EventCounts(en-US)-
Une carte de correspondance en lecture seule, renvoyée par la propriété
performance.eventCounts(en-US), qui contient le nombre d'évènements émis, répartis par type d'évènement. LargestContentfulPaint(en-US)-
Mesure la durée de rendu du plus grand bloc de texte ou de la plus grande image visible au sein de la zone d'affichage (viewport) écoulée depuis le début du chargement de la page.
LayoutShift(en-US)-
Fournit des indications sur la stabilité de la disposition d'une page selon les mouvements des éléments de la page.
LayoutShiftAttribution(en-US)-
Fournit des informations de débogage pour les éléments qui subissent un décalage sur la page.
Performance-
L'interface principale permettant d'accéder aux mesures de performance. Elle est disponible dans les contextes des fenêtres et des workers via
self.performance(en-US). PerformanceElementTiming-
Mesure les horodatages pour le rendu d'éléments spécifiques.
PerformanceEntry-
Une entrée de la frise chronologique des performances qui encapsule une seule métrique de performance. Toutes les métriques de performance héritent de cette interface.
PerformanceEventTiming-
Mesure la latence des évènements (et permet entre autres de mesurer le first input delay (ou FID) qui correspond à la durée entre l'interaction de la personne avec l'application et le moment où le navigateur peut réagir).
PerformanceLongTaskTiming-
Détecte les tâches longues qui monopolisent le rendu et empêchent l'exécution d'autres tâches.
PerformanceMark-
Un marqueur spécifique pour votre entrée sur mesure dans la frise chronologique des performances.
PerformanceMeasure-
Permet une mesure spécifique entre deux entrées de performance.
-
Mesure les évènements de navigation dans le document, par exemple la durée nécessaire au chargement du document.
PerformanceObserver-
Écoute les nouvelles entrées de performance lorsqu'elles sont enregistrées sur la frise chronologique des performances du navigateur.
PerformanceObserverEntryList-
Énumère les entrées observées pour un observateur de performance (
PerformanceObserver) donné. PerformancePaintTiming-
Mesure les opérations de rendu qui ont lieu pendant la construction de la page web.
PerformanceResourceTiming-
Mesure les métriques liées aux chargements réseau comme les horodatages de début et de fin pour les redirections, les récupérations de ressources, les requêtes DNS, les appels réseau, etc.
PerformanceServerTiming-
Expose les métriques du serveur qui sont envoyées dans la réponse via l'en-tête
Server-Timing(en-US). TaskAttributionTiming(en-US)-
Identifie le type de tâche et le conteneur responsable de la tâche longue.
VisibilityStateEntry(en-US)-
Le chronométrage relatif au changement d'état de visibilité de la page (par exemple quand un onglet passe du premier plan à l'arrière-plan et vice versa).
Guides
Les guides qui suivent vous permettront de comprendre les concepts fondamentaux de l'API Performance tout en fournissant un aperçu de son potentiel :
- Les données de performance (en-US)
-
Collecter, récupérer et manipuler les données de performance.
- Chronométrage haute précision (en-US)
-
Mesurer à l'aide d'horodatage haute précision et d'horloges monotones.
- Chronométrage pour la récupération des ressources (en-US)
-
Mesurer les performances réseau pour la récupération des ressources telles que les images, les fichiers CSS ou JavaScript.
-
Mesurer les performances relatives à la navigation dans un document.
- Chronométrage applicatif (en-US)
-
Mesurer et enregistrer les données de performance spécifiques à votre application.
- Chronométrage côté serveur (en-US)
-
Récupérer les métriques côté serveur.