Performance web

La performance web désigne les mesures objectives et l'expérience utilisateur perçue en termes de temps de chargement et d'exécution. La performance web correspond au temps nécessaire à un site pour se charger, devenir interactif et réactif, ainsi qu'à la fluidité du contenu lors des interactions de l'utilisateur·ice. La performance concerne des questions telles que : le défilement est-il fluide ? Les boutons sont-ils réactifs ? Les fenêtres contextuelles se chargent-elles rapidement et s'animent-elles de manière fluide ? Les mesures objectives comprennent le temps de chargement, le nombre d'images par seconde et le temps nécessaire pour devenir interactif, et l'expérience subjective signifie le temps que le chargement du contenu semble prendre.

Plus un site met du temps à répondre, plus les utilisateur·ice·s l'abandonnent. Il est important de minimiser les temps de chargement et de réponse et d'ajouter des fonctionnalités supplémentaires pour masquer la latence en rendant l'expérience aussi disponible et interactive que possible, dès que possible, tout en chargeant de manière asynchrone les parties de l'expérience qui prennent plus de temps.

Il existe des outils, des API et des bonnes pratiques qui nous aident à mesurer et à améliorer la performance web. Nous les couvrons dans les pages suivantes.

Guides sur la performance web

Les Guides sur la performance sont des ressources qui décrivent le fonctionnement des navigateurs, ce qui affecte la performance, et comment mesurer, optimiser et surveiller la performance à travers divers aspects de votre application.

Les fondamentaux de la performance: La performance signifie l'efficacité. Dans le contexte des applications web ouvertes, ce document explique en général ce qu'est la performance, comment la plateforme du navigateur aide à l'améliorer, et quels outils et processus vous pouvez utiliser pour la tester et l'améliorer.
Remplir la page : comment fonctionnent les navigateurs: Les utilisateur·ice·s veulent des expériences web avec un contenu qui se charge rapidement et avec lequel il est agréable d'interagir. Par conséquent, un·e développeur·euse doit s'efforcer d'atteindre ces deux objectifs. Pour comprendre comment améliorer la performance et la performance perçue, il est utile de comprendre comment fonctionne le navigateur.
Comprendre la latence: La latence est le temps nécessaire à un paquet de données pour voyager de la source à une destination. En termes d'optimisation de la performance, il est important d'optimiser pour réduire les causes de latence et de tester la performance du site en simulant une latence élevée afin d'optimiser pour les utilisateur·ice·s ayant des connexions lentes ou peu fiables.
Recommandations sur les mesures de performance web : combien de temps est trop long ?: Il n'existe pas de règles claires définissant ce qui constitue un rythme lent lors du chargement des pages, mais il existe des directives spécifiques pour indiquer que le contenu se charge (1 seconde), l'inactivité (50ms), l'animation (16,7ms) et la réponse aux actions de l'utilisateur·ice (50 à 200ms).
Utiliser dns-prefetch: DNS-prefetch tente de résoudre les noms de domaine avant la demande des ressources. Il peut s'agir d'un fichier chargé plus tard ou d'une cible de lien qu'un·e utilisateur·ice essaie de suivre.
Chronométrage de la navigation et des ressources: Le chronométrage de la navigation fournit des métriques qui mesurent les évènements de navigation du document dans un navigateur. Le chronométrage des ressources fournit des mesures détaillées du temps réseau concernant le chargement des ressources d'une application. Les deux fournissent les mêmes propriétés en lecture seule, mais le chronométrage de la navigation mesure les temps du document principal tandis que le chronométrage des ressources fournit les temps de toutes les ressources appelées par ce document principal et des ressources demandées par ces ressources.
Optimiser les performances au démarrage: L'amélioration des performances au démarrage constitue souvent l'une des optimisations les plus utiles. Une bonne expérience utilisateur consiste notamment à garantir le chargement rapide de l'application. Cet article fournit des conseils de performance pour écrire de nouvelles applications et porter des applications vers le web depuis d'autres plateformes.
Chemin critique du rendu: Le chemin critique du rendu est la suite d'étapes que le navigateur suit pour convertir le HTML, le CSS et JavaScript en pixels à l'écran. L'optimisation du chemin critique du rendu améliore les performances du rendu. Le chemin critique du rendu inclut le modèle objet de document (DOM), le modèle objet CSS (CSSOM), l'arbre de rendu et la mise en page.
Chargement à la demande: Le chargement à la demande est une stratégie qui consiste à identifier les ressources comme non bloquantes (non critiques) et à les charger uniquement lorsque cela est nécessaire. Cette méthode raccourcit le chemin critique du rendu, ce qui réduit les temps de chargement des pages.
Chargement spéculatif: Le chargement spéculatif désigne la pratique qui consiste à effectuer des actions de navigation (comme la récupération DNS, la récupération de ressources ou le rendu de documents) avant la visite effective des pages associées, en fonction de prédictions sur les pages que l'utilisateur·ice est le plus susceptible de consulter ensuite.
Budgets de performance: Un budget de performance est une limite qui empêche les régressions. Il peut s'appliquer à un fichier, à un type de fichier, à tous les fichiers chargés par une page, à une métrique précise (par exemple le temps jusqu'à l'interactivité), à une métrique personnalisée (par exemple le temps jusqu'à l'élément principal) ou à un seuil sur une période donnée.
Surveillance des performances : surveillance réelle ou synthétique: La surveillance synthétique et la surveillance réelle des utilisateur·ice·s sont deux approches pour surveiller les performances web et obtenir des informations à leur sujet. Elles offrent des points de vue différents sur les performances, ainsi que des avantages, des cas d'utilisation appropriés et des limites. La surveillance réelle convient généralement mieux à la compréhension des tendances à long terme, tandis que la surveillance synthétique convient particulièrement aux tests de régression et à l'atténuation des problèmes de performance à court terme pendant le développement. Cet article définit et compare ces deux approches de surveillance des performances.
Performances des animations CSS et JavaScript: Les animations sont essentielles à une expérience utilisateur agréable dans de nombreuses applications. Il existe de nombreuses façons de mettre en œuvre des animations web, comme les transition/animation CSS ou les animations fondées sur JavaScript (avec requestAnimationFrame()). Cet article analyse les différences de performance entre les animations fondées sur CSS et celles fondées sur JavaScript.
Performances des animations et fréquence d'images: Vous pouvez réaliser des animations web avec SVG, JavaScript, notamment avec <canvas> et WebGL, avec animation CSS, avec <video>, avec des GIF animés, voire avec des PNG animés et d'autres types d'images. Le coût en performance de l'animation d'une propriété CSS peut varier d'une propriété à l'autre, et l'animation de propriétés CSS coûteuses peut provoquer des saccades lorsque le navigateur peine à atteindre une fréquence d'images fluide.

Tutoriels pour les débutants

La zone d'apprentissage des performances web de MDN contient des tutoriels modernes et à jour qui couvrent les notions essentielles des performances. Commencez ici si vous débutez dans ce domaine :

Le « pourquoi » des performances web: Cet article explique pourquoi les performances web sont importantes pour l'accessibilité, l'expérience utilisateur·ice et les objectifs de votre entreprise.
Que sont les performances web ?: Vous savez que les performances web sont importantes, mais quels facteurs les influencent et comment les mesurer ? Cet article présente les composants des performances, du chargement et du rendu d'une page web, notamment la façon dont votre contenu arrive dans le navigateur de vos utilisateur·ice·s pour être affiché, aux groupes de personnes à prendre en compte lors de l'étude des performances.
Comment les utilisateur·ice·s perçoivent-ils les performances ?: La vitesse à laquelle les utilisateur·ice·s perçoivent votre site est plus importante que sa vitesse en millisecondes. Cette perception dépend du temps de chargement réel de la page, de l'inactivité, de la réactivité aux interactions et de la fluidité du défilement et des autres animations. Cet article présente différentes métriques de chargement, d'animation et de réactivité, ainsi que des bonnes pratiques pour améliorer la perception des utilisateur·ice·s, même lorsque les temps réels ne changent pas.
Mesurer les performances: Maintenant que vous comprenez quelques métriques de performance, cet article approfondit les outils, les métriques et les API de performance, ainsi que leur intégration au flux de développement web.
Multimédia : images: L'optimisation des médias constitue souvent le gain le plus facile en matière de performances web. Il est possible de servir différents fichiers multimédias selon les capacités, la taille et la densité de pixels de chaque agent utilisateur. Cet article explique l'impact des images sur les performances et les méthodes permettant de réduire le nombre d'octets envoyés par image.
Multimédia : vidéo: L'optimisation des médias constitue souvent le gain le plus facile en matière de performances web. Cet article explique l'impact des contenus vidéo sur les performances et présente notamment des conseils comme la suppression des pistes audio des vidéos d'arrière-plan.
Optimisation des performances JavaScript: Utilisé correctement, JavaScript permet de créer des expériences web interactives et immersives, mais il peut aussi nuire fortement au temps de téléchargement, au temps de rendu, aux performances dans l'application, à l'autonomie de la batterie et à l'expérience utilisateur. Cet article présente des bonnes pratiques JavaScript à prendre en compte pour garantir les meilleures performances possibles, même avec des contenus complexes.
Optimisation des performances HTML: Certains attributs et l'ordre des sources dans votre balisage peuvent affecter les performances de votre site. En réduisant le nombre de nœuds DOM et en veillant à utiliser le meilleur ordre et les meilleurs attributs pour inclure des contenus comme les styles, les scripts, les médias et les scripts tiers, vous améliorez considérablement l'expérience utilisateur. Cet article examine en détail comment utiliser HTML pour garantir les meilleures performances.
Optimisation des performances CSS: Le CSS constitue peut-être une priorité d'optimisation moins importante pour améliorer les performances, mais certaines fonctionnalités CSS les affectent davantage que d'autres. Cet article examine des propriétés CSS qui influencent les performances et propose des façons de gérer les styles afin d'éviter de les dégrader.
L'intérêt commercial des performances web: Un·e développeur·euse peut faire beaucoup de choses pour améliorer les performances, mais quelle vitesse suffit ? Comment convaincre la direction de l'importance de ces efforts ? Une fois le site optimisé, comment empêcher le retour de la surcharge ? Cet article examine la façon de convaincre la direction, de développer une culture de la performance et un budget de performance, et présente des moyens d'empêcher les régressions de s'infiltrer dans votre base de code.
Bonnes pratiques et conseils sur les performances web: Cet article couvre plusieurs sujets à un niveau élémentaire et fournit des liens vers des approfondissements pour améliorer les performances de chacun. En plus des sujets liés à l'interface comme HTML, CSS, JavaScript et les fichiers multimédias, il couvre également les API, les outils de développement, les bonnes pratiques et les mauvaises pratiques liées aux performances web.

Les API de performance

L'API de performance regroupe des standards utilisés pour mesurer les performances des applications web. Les pages suivantes présentent les API de performance, notamment leur utilisation :

Chronométrage haute précision: L'API de performance permet des mesures de haute précision fondées sur le temps, avec une résolution potentielle inférieure à la milliseconde et une horloge monotone stable que les décalages et les ajustements de l'horloge système n'affectent pas. Vous utilisez les minuteurs haute résolution pour obtenir des mesures comparatives exactes, plutôt que les horodatages Date moins précis et non monotones.
Chronométrage des images d'animation longues: Les images d'animation longues peuvent affecter l'expérience utilisateur d'un site web. Elles peuvent ralentir les mises à jour de l'interface utilisateur, ce qui produit des contrôles apparemment non réactifs et des effets animés et défilements saccadés (ou non fluides), et provoque la frustration des utilisateur·ice·s. L'API des images d'animation longues ^(angl.) permet aux développeur·euse·s d'obtenir des informations sur ces images et de mieux comprendre leurs causes profondes. Cet article montre comment utiliser cette API.
Surveiller les raisons du blocage du bfcache: La propriété PerformanceNavigationTiming.notRestoredReasons fournit des informations sur la raison pour laquelle le document courant ne peut pas utiliser le bfcache lors de la navigation. Les développeur·euse·s peuvent utiliser ces informations pour identifier les pages qui nécessitent des mises à jour afin de devenir compatibles avec le bfcache et ainsi améliorer les performances du site.
Chronométrage de la navigation: Le chronométrage de la navigation fournit des métriques associées à la navigation d'une page à une autre avec l'API PerformanceNavigationTiming. Par exemple, vous pouvez déterminer le temps nécessaire pour charger ou décharger un document, ou enregistrer le temps écoulé jusqu'à la fin de la construction du DOM et la possibilité d'interagir avec le DOM.
Données de performance: L'API de performance ne fournit pas d'analyse ni de visualisation des données de performance. Toutefois, elle s'intègre bien aux outils de développement et les applications envoient souvent ses données à des points d'accès et à des bibliothèques d'analyse pour enregistrer des métriques de performance. Celles-ci vous aident à évaluer les données afin de trouver les goulots d'étranglement qui affectent vos utilisateur·ice·s. Cette page présente les types de données fournis par l'API de performance, leur collecte et leur accès.
L'API de chronométrage des ressources: Le chronométrage des ressources permet de récupérer et d'analyser des données détaillées sur le temps réseau nécessaire au chargement des ressources d'une application. Une application peut utiliser les métriques de temps pour déterminer, par exemple, la durée nécessaire au chargement d'une ressource précise (comme une image ou un script), implicitement pendant le chargement de la page ou explicitement depuis JavaScript, par exemple avec l'API fetch().
Chronométrage du serveur: Le chronométrage du serveur permet aux serveurs de communiquer des métriques sur le cycle requête-réponse à l'agent utilisateur. Vous pouvez collecter ces informations et agir sur les métriques côté serveur comme sur toutes les autres métriques traitées par l'API de performance.
L'API de chronométrage utilisateur: Créez des horodatages propres à l'application avec les types d'entrées « marque » et « mesure » de l'API de chronométrage utilisateur, en utilisant les horodatages haute précision qui font partie de la chronologie des performances du navigateur.

Les API associées

Les API suivantes sont également utiles pour mesurer et influencer les performances des pages :

L'API de visibilité de la page: Fournit des évènements que vous pouvez surveiller pour savoir quand un document devient visible ou masqué, ainsi que des fonctionnalités permettant de consulter l'état actuel de visibilité de la page.
L'API des tâches en arrière-plan: L'API de planification coopérative des tâches en arrière-plan permet de mettre en file des tâches que l'agent utilisateur exécute automatiquement lorsqu'il détermine qu'il dispose de temps libre, notamment avec l'API requestIdleCallback().
L'API Beacon: L'interface Beacon planifie une requête asynchrone et non bloquante vers un serveur web.
L'API d'observation des intersections: L'API d'observation des intersections permet d'observer de manière asynchrone les changements d'intersection entre un élément cible et un élément ancêtre ou la zone d'affichage d'un document de niveau supérieur. Elle permet notamment d'utiliser Chronométrer la visibilité d'un élément pour recevoir une notification asynchrone lorsque les éléments concernés deviennent visibles.
L'API des capacités multimédias: Expose les capacités de décodage et d'encodage d'un appareil client, par exemple la prise en charge des médias et la fluidité et l'efficacité énergétique de la lecture, avec un retour en temps réel sur la lecture afin de mieux prendre en charge la diffusion adaptative, ainsi que l'accès aux informations sur les propriétés d'affichage.
L'API des informations réseau: Fournit des informations sur la connexion du système, notamment son type général (par exemple Wi-Fi, cellulaire, etc.). Ces informations permettent de sélectionner un contenu haute définition ou basse définition selon la connexion de l'utilisateur·ice.
L'API d'état de la batterie: L'API de batterie fournit des informations sur le niveau de charge de la batterie du système et permet de recevoir des évènements lorsque le niveau de batterie ou l'état de charge change. Elle permet d'ajuster l'utilisation des ressources de l'application pour réduire la consommation lorsque la batterie est faible, ou d'enregistrer les modifications avant que la batterie ne s'épuise afin d'empêcher la perte de données.
Navigator.deviceMemory: La propriété en lecture seule deviceMemory de l'interface Navigator retourne la quantité approximative de mémoire de l'appareil en gigaoctets.
FetchEvent.preloadResponse: La propriété en lecture seule preloadResponse de l'interface FetchEvent retourne une promesse (Promise) qui se complète avec la réponse (Response) du préchargement de navigation si le préchargement de navigation est déclenché, ou avec undefined dans le cas contraire.