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.

![Diagramme UML des interfaces de l'API Performance](/fr/docs/Web/API/Performance_API/diagram.svg)

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.

`PerformanceNavigationTiming`

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.

Chronométrage de la navigation (en-US)

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.

Spécifications
--------------

| Specification |
| --- |
| Element Timing API  |
| Event Timing API  |
| High Resolution Time  |
| Largest Contentful Paint  |
| Layout Instability  |
| Long Tasks API  |
| Navigation Timing Level 2  |
| Paint Timing  |
| Performance Timeline  |
| Resource Timing  |
| Server Timing  |
| User Timing  |

Voir aussi
----------

* La gestion des performances sur le Web
* Apprendre : les performances sur le Web