Performances d'affichage

Les utilisateurs remarquent si les sites et les applications ne fonctionnent pas correctement. Il est donc essentiel d'optimiser les performances d'affichage.

Paul Lewis

Les utilisateurs du Web d'aujourd'hui s'attendent à ce que les pages qu'ils visitent soient interactives et fluides. C'est là que vous devez consacrer de plus en plus de temps et d'efforts. Les pages ne doivent pas seulement se charger rapidement, mais aussi répondre rapidement aux entrées utilisateur tout au long de leur cycle de vie. En fait, cet aspect de l'expérience utilisateur est précisément ce que mesure la métrique Interaction to Next Paint (INP). Un bon INP signifie qu'une page a répondu de manière cohérente et fiable aux besoins de l'utilisateur.

Bien qu'un composant majeur de ce qui rend une page réactive implique la quantité de code JavaScript que vous exécutez en réponse aux interactions des utilisateurs, ce que les utilisateurs attendent, ce sont des modifications visuelles de l'interface utilisateur. Les modifications visuelles d'une interface utilisateur sont le résultat de plusieurs types de tâches, souvent appelées collectivement rendu. Ces tâches doivent être effectuées le plus rapidement possible pour que l'expérience utilisateur soit rapide et fiable.

Pour écrire des pages qui répondent rapidement aux interactions des utilisateurs, vous devez comprendre comment le navigateur gère le code HTML, JavaScript et CSS, et vous assurer que le code que vous écrivez, ainsi que tout autre code tiers que vous incluez, s'exécute aussi efficacement que possible.

Remarque sur les fréquences d'actualisation des appareils

La fréquence d'actualisation d'un écran est un facteur important à prendre en compte lors de la création de sites Web qui réagissent aux entrées utilisateur.

Aujourd'hui, la plupart des appareils actualisent leur écran 60 fois par seconde. Chaque actualisation produit le résultat visuel que vous voyez, communément appelé frame. La vidéo suivante illustre le concept de frames :

Frames affichés dans le panneau "Performances" des outils pour les développeurs Chrome. Lorsque le curseur passe sur la pellicule en haut, une représentation agrandie de chaque image s'affiche dans une info-bulle, tandis qu'un menu de navigation mobile s'anime pour passer à l'état "ouvert".

Bien que l'écran d'un appareil s'actualise toujours à une fréquence constante, les applications qui s'exécutent sur un appareil ne sont pas nécessairement toujours en mesure de produire suffisamment d'images pour correspondre à cette fréquence d'actualisation. Par exemple, si une animation ou une transition est en cours d'exécution, le navigateur doit correspondre à la fréquence d'actualisation de l'appareil pour produire une image à chaque actualisation de l'écran.

Étant donné qu'un écran standard s'actualise 60 fois par seconde, un calcul rapide révèle que le navigateur dispose de 16,66 millisecondes pour produire chaque image. En réalité, le navigateur a sa propre surcharge pour chaque frame. Tout votre travail doit donc être effectué en 10 millisecondes. Si vous ne respectez pas ce budget, la fréquence d'images diminue et le contenu de la page tremble à l'écran. Ce phénomène est souvent appelé jank.

Cependant, vos objectifs changent en fonction du type de travail que vous essayez d'effectuer. Atteindre le seuil de 10 millisecondes est crucial pour les animations, où les objets à l'écran sont interpolés sur une série d'images entre deux points. Pour les modifications discrètes de l'interface utilisateur (c'est-à-dire le passage d'un état à un autre sans mouvement intermédiaire), il est recommandé d'effectuer ces modifications dans un délai qui semble instantané à l'utilisateur. Dans ce cas, 100 millisecondes est un chiffre souvent cité, mais le seuil "bon" de la métrique INP est de 200 millisecondes ou moins afin de s'adapter à un plus grand nombre d'appareils aux capacités variables.

Quels que soient vos objectifs (produire les nombreuses images requises par les animations pour éviter les à-coups ou simplement produire un changement visuel discret dans l'interface utilisateur le plus rapidement possible), il est essentiel de comprendre le fonctionnement du pipeline de pixels du navigateur.

Le pipeline de pixels

En tant que développeur Web, vous devez connaître et prendre en compte cinq domaines majeurs. Ces cinq domaines sont ceux sur lesquels vous avez le plus de contrôle, et chacun représente un point clé du pipeline de rendu des pixels à l'écran :

Illustration du pipeline de pixels complet.

• JavaScript : JavaScript est généralement utilisé pour gérer les tâches qui entraînent des modifications visuelles de l'interface utilisateur. Par exemple, il peut s'agir de la fonction animate de jQuery, du tri d'un ensemble de données ou de l'ajout d'éléments DOM à la page. Toutefois, JavaScript n'est pas strictement nécessaire pour déclencher des modifications visuelles : les animations CSS, les transitions CSS et l'API Web Animations sont capables d'animer le contenu des pages.
• Calculs de style : il s'agit du processus permettant de déterminer quelles règles CSS s'appliquent à quels éléments HTML en fonction des sélecteurs correspondants. Par exemple, .headline est un exemple de sélecteur CSS qui s'applique à tout élément HTML dont la valeur de l'attribut class contient une classe de headline. Une fois les règles connues, elles sont appliquées et les styles finaux de chaque élément sont calculés.
• Mise en page : une fois que le navigateur sait quelles règles s'appliquent à un élément, il peut commencer à calculer la géométrie de la page, par exemple l'espace occupé par les éléments et l'endroit où ils apparaissent à l'écran. Le modèle de mise en page du Web signifie qu'un élément peut en affecter d'autres. Par exemple, la largeur de l'élément <body> affecte généralement les dimensions de ses éléments enfants tout au long de l'arborescence. Le processus peut donc être assez complexe pour le navigateur.
• Peinture : la peinture est le processus de remplissage des pixels. Il s'agit de dessiner le texte, les couleurs, les images, les bordures, les ombres et, en fait, tous les aspects visuels des éléments une fois leur mise en page calculée. Le dessin est généralement effectué sur plusieurs surfaces, souvent appelées "couches".
• Composition : étant donné que les parties de la page ont potentiellement été dessinées sur plusieurs calques, elles doivent être appliquées à l'écran dans le bon ordre pour que la page s'affiche comme prévu. C'est particulièrement important pour les éléments qui se chevauchent, car une erreur pourrait entraîner l'affichage incorrect d'un élément au-dessus d'un autre.

Chacune de ces parties du pipeline de pixels représente une opportunité d'introduire des à-coups dans les animations ou de retarder l'affichage des images, même pour des modifications visuelles discrètes de l'interface utilisateur. Il est donc important de comprendre exactement quelles parties du pipeline sont déclenchées par votre code et de déterminer si vous pouvez limiter vos modifications aux seules parties du pipeline de pixels nécessaires à leur rendu.

Vous avez peut-être déjà entendu le terme "rasteriser" utilisé en conjonction avec "peindre". En effet, la peinture se compose en réalité de deux tâches :

1. Création d'une liste d'appels de dessin.
2. Remplissage des pixels…

Cette dernière étape est appelée "rastérisation". Par conséquent, chaque fois que vous voyez des enregistrements de peinture dans les outils de développement, vous devez considérer qu'ils incluent la rastérisation. Dans certaines architectures, la création de la liste des appels de dessin et la pixellisation sont effectuées sur différents threads, mais vous n'avez aucun contrôle sur ce point en tant que développeur.

Vous n'aurez pas nécessairement à toucher à chaque partie du pipeline pour chaque frame. En fait, il existe trois façons dont le pipeline se déroule normalement pour une image donnée lorsque vous effectuez une modification visuelle, que ce soit avec JavaScript, CSS ou l'API Web Animations.

1. JS/CSS > Style > Mise en page > Peinture > Composite

Si vous modifiez une propriété de "mise en page", par exemple une propriété qui modifie la géométrie d'un élément, comme la largeur, la hauteur ou sa position (comme les propriétés CSS left ou top), le navigateur doit vérifier tous les autres éléments et "recalculer" la page. Toutes les zones affectées devront être repeintes, et les éléments peints finaux devront être recomposés.

2. JS / CSS > Style > Paint > Composite

Si vous avez modifié une propriété "paint-only" pour un élément en CSS (par exemple, des propriétés telles que background-image, color ou box-shadow), l'étape de mise en page n'est pas nécessaire pour appliquer une mise à jour visuelle à la page. En omettant l'étape de mise en page (dans la mesure du possible), vous évitez un travail de mise en page potentiellement coûteux qui aurait pu entraîner une latence importante lors de la production de l'image suivante.

3. JS / CSS > Style > Composite

Si vous modifiez une propriété qui ne nécessite ni mise en page ni peinture, le navigateur peut passer directement à l'étape de composition. Il s'agit du chemin le plus économique et le plus souhaitable dans le pipeline de pixels pour les points de pression élevés du cycle de vie d'une page, tels que les animations ou le défilement. Fait amusant : Chromium optimise le défilement de la page de sorte qu'il se produise uniquement sur le thread du compositeur, dans la mesure du possible. Cela signifie que même si une page ne répond pas, vous pouvez toujours la faire défiler et voir les parties qui ont été précédemment affichées à l'écran.

Remarque : Si vous souhaitez créer rapidement des animations hautes performances, consultez Utiliser uniquement les propriétés du compositeur et gérer le nombre de calques.

Les performances Web consistent à éviter le travail, tout en augmentant autant que possible l'efficacité de tout travail nécessaire. Dans de nombreux cas, il s'agit de travailler avec le navigateur, et non contre lui. Il convient de garder à l'esprit que le travail précédemment présenté dans le pipeline diffère en termes de coût de calcul. Certaines tâches sont intrinsèquement plus coûteuses que d'autres.

Examinons les différentes parties du pipeline. Nous examinerons les problèmes courants, ainsi que la manière de les diagnostiquer et de les résoudre.

Optimisations du rendu du navigateur

Les performances sont importantes pour les utilisateurs. Pour créer des expériences utilisateur de qualité, les développeurs Web doivent créer des sites Web qui réagissent rapidement aux interactions des utilisateurs et s'affichent de manière fluide. Paul Lewis, expert en performances, est là pour vous aider à éliminer les saccades et à créer des applications Web qui maintiennent des performances de 60 images par seconde. À la fin de ce cours, vous disposerez des outils nécessaires pour profiler les applications et identifier les causes des performances de rendu non optimales. Vous découvrirez également le pipeline de rendu du navigateur et des modèles qui facilitent la création de sites Web rapides et agréables à utiliser.

Ce cours est proposé sans frais par Udacity, et vous pouvez le suivre à tout moment.