Les utilisateurs remarquent si les sites et les applications ne fonctionnent pas correctement. Il est donc essentiel d'optimiser les performances d'affichage.
Les utilisateurs du Web d'aujourd'hui s'attendent à ce que les pages qu'ils consultent soient interactives et fluides. C'est là que vous devez concentrer de plus en plus votre temps et vos 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, c'est précisément cet aspect de l'expérience utilisateur 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 élément majeur de la rapidité d'une page implique la quantité de code JavaScript que vous exécutez en réponse aux interactions des utilisateurs, ce que les utilisateurs attendent sont les modifications visuelles de l'interface utilisateur. Les modifications visuelles d'une interface utilisateur sont le résultat de plusieurs types de tâches, souvent désignées collectivement par le terme rendu. Ces tâches doivent être effectuées aussi rapidement que 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 HTML, JavaScript et CSS sont gérés par le navigateur, 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 plupart des appareils actuels actualisent leur écran 60 fois par seconde. Chaque actualisation produit la sortie visuelle que vous voyez et est communément appelée cadre. Dans la vidéo suivante, le concept de frame est illustré:
Bien que l'écran d'un appareil s'actualise toujours à une fréquence constante, les applications exécutées sur un appareil ne peuvent pas toujours 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 un frame à 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 frame. En réalité, le navigateur a ses propres frais généraux pour chaque frame. Par conséquent, tout votre travail doit être terminé en 10 millisecondes. Si vous ne respectez pas ce budget, la fréquence d'images diminue et le contenu de la page saccade à l'écran. Ce phénomène est souvent appelé jank.
Toutefois, vos cibles 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. En ce qui concerne les modifications discrètes de l'interface utilisateur (c'est-à-dire passer d'un état à un autre sans mouvement entre les deux), il est recommandé d'effectuer ces modifications dans un délai qui semble instantané pour l'utilisateur. Dans ce cas, 100 millisecondes est une valeur souvent citée, mais le seuil "bon " de la métrique INP est de 200 millisecondes ou moins afin de prendre en charge un plus grand nombre d'appareils aux fonctionnalités variées.
Quels que soient vos objectifs, qu'il s'agisse de produire les nombreux frames dont les animations ont besoin pour éviter les à-coups ou simplement de produire un changement visuel discret dans l'interface utilisateur le plus rapidement possible, comprendre le fonctionnement du pipeline de pixels du navigateur est essentiel à votre travail.
Pipeline de pixels
En tant que développeur Web, vous devez connaître et tenir compte de cinq grands domaines. Ces cinq domaines sont ceux sur lesquels vous avez le plus de contrôle, et chacun représente un point clé dans le pipeline de pixels à l'écran:
- JavaScript:JavaScript est généralement utilisé pour gérer les tâches qui entraîneront des modifications visuelles de l'interface utilisateur. Il peut s'agir, par exemple, de la fonction
animatede jQuery, du tri d'un ensemble de données ou de l'ajout d'éléments DOM à la page. JavaScript n'est cependant pas strictement nécessaire pour déclencher des modifications visuelles: les animations CSS, les transitions CSS et l'API Web Animations peuvent animer le contenu des pages. - Calculs de style:processus permettant de déterminer quelles règles CSS s'appliquent à quels éléments HTML en fonction des sélecteurs correspondants. Par exemple,
.headlineest un exemple de sélecteur CSS qui s'applique à tous les éléments HTML avec une valeur d'attributclasscontenant une classe deheadline. 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 la quantité d'espace que les éléments occupent et l'endroit où ils apparaissent à l'écran. Le modèle de mise en page du Web signifie qu'un élément peut affecter les 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 très complexe pour le navigateur. - Peinture:processus consistant à remplir des pixels. Il s'agit de dessiner le texte, les couleurs, les images, les bordures, les ombres et essentiellement tous les aspects visuels des éléments une fois leur mise en page sur la page calculée. Le dessin est généralement réalisé sur plusieurs surfaces, souvent appelées calques.
- Composite:étant donné que les parties de la page ont é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. Cela est particulièrement important pour les éléments qui se chevauchent, car une erreur peut entraîner l'affichage incorrect d'un élément par-dessus un autre.
Chacune de ces parties du pipeline de pixels représente une opportunité d'introduire des à-coups dans les animations ou de retarder la peinture des frames, même pour des modifications visuelles discrètes de l'interface utilisateur. Il est donc important de comprendre exactement quelles parties du pipeline votre code déclenche et de déterminer si vous pouvez limiter vos modifications aux seules parties du pipeline de pixels nécessaires à leur affichage.
Vous avez peut-être entendu le terme "rasteriser" utilisé en même temps que "peindre". En effet, la peinture implique deux tâches:
- Création d'une liste d'appels de dessin.
- Remplissage des pixels.
Ce dernier est appelé "rastreisation". Par conséquent, chaque fois que vous voyez des enregistrements de peinture dans DevTools, vous devez considérer qu'ils incluent la rastreisation. Dans certaines architectures, la création de la liste des appels de dessin et de la rastérisation est effectuée sur différents threads, mais vous ne pouvez pas contrôler cela en tant que développeur.
Vous n'avez pas nécessairement besoin de modifier chaque partie du pipeline à chaque frame. En fait, le pipeline normalement se déroule de trois manières pour un frame donné lorsque vous apportez un changement visuel, 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é "mise en page", par exemple celle qui modifie la géométrie d'un élément (telle que la largeur, la hauteur ou la position) (comme les propriétés CSS left ou top), le navigateur doit vérifier tous les autres éléments et "reflow" la page. Les zones concerné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 du frame suivant.
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 moins cher 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 afin qu'il ne se produise que sur le thread du moteur de rendu, 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 déjà été dessinées à l'écran.
Les performances Web sont l'art d'é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. N'oubliez pas que le travail précédemment affiché 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 verrons les problèmes courants, ainsi que la façon de les diagnostiquer et de les résoudre.
Optimisations du rendu du navigateur
Les performances sont importantes pour les utilisateurs. Pour créer de bonnes expériences utilisateur, 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. L'expert en performances Paul Lewis est là pour vous aider à éliminer les à-coups 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 des applications et identifier les causes de performances de rendu non optimales. Vous découvrirez également le pipeline de rendu du navigateur et identifierez des tendances qui vous permettront de créer plus facilement des sites Web rapides que les utilisateurs apprécieront.
Ce cours sans frais est proposé par Udacity et vous pouvez le suivre à tout moment.