Fluidifier le rendu des pages : le pixel pipeline
Comprenez le pixel pipeline du navigateur et ses 5 étapes pour des pages fluides à 60 images par seconde et un meilleur INP.
Une page rapide ne se contente pas de se charger vite : elle doit aussi réagir avec fluidité aux interactions tout au long de sa vie. Les internautes attendent des changements visuels immédiats au défilement, au clic ou pendant une animation. Ces changements résultent d’un ensemble de tâches que l’on regroupe sous le terme de rendu, et qui doivent s’exécuter le plus efficacement possible.
C’est un enjeu SEO via les Core Web Vitals, en particulier l’INP (Interaction to Next Paint), qui mesure la réactivité d’une page aux actions de l’internaute ; pour en faire un véritable chantier, voyez comment optimiser l’INP. Pour écrire des pages réactives, il faut comprendre comment le navigateur traite HTML, CSS et JavaScript, et quelles parties du pixel pipeline votre code déclenche à chaque image.
Ce que beaucoup oublient, c’est qu’une page reste vivante après son chargement, et que c’est là que se joue l’INP. Le budget par image est extrêmement court : il suffit d’une animation qui force des recalculs de mise en page pour le faire exploser. Comprendre le pixel pipeline change radicalement la façon dont on écrit le code d’interaction.
Le budget de 10 millisecondes
La plupart des écrans s’actualisent 60 fois par seconde : chaque actualisation produit une image, ou frame. Le navigateur dispose donc d’environ 16,66 ms pour produire chaque image. En retirant ses propres traitements internes, il vous reste en pratique près de 10 ms pour faire votre travail. Dépasser ce budget fait chuter la fréquence d’images et provoque des saccades, un phénomène appelé jank.
Les cibles varient selon le contexte. Atteindre les 10 ms est crucial pour les animations, où des objets se déplacent image après image. Pour un changement d’état discret, l’objectif est qu’il paraisse instantané : le seuil considéré comme bon pour l’INP est de 200 ms ou moins, afin de couvrir une large gamme d’appareils.
Les cinq étapes du pixel pipeline
Cinq grands domaines sont sous votre contrôle, et chacun représente un point clé avant l’affichage des pixels à l’écran. Le JavaScript déclenche souvent les changements visuels, mais le CSS et l’API Web Animations peuvent aussi animer la page sans lui ; sur ce point, notre tutoriel pour optimiser avec le CSS donne des pistes concrètes. Le tableau ci-dessous décrit chaque étape et son rôle.
| Étape | Rôle | Exemple déclencheur |
|---|---|---|
JavaScript |
Lance les modifications visuelles de l’interface |
Ajout d’éléments DOM, animation, tri de données |
Calculs de style |
Détermine quelles règles CSS s’appliquent à quels éléments |
Sélecteur de classe comme .headline |
Mise en page |
Calcule la géométrie : taille et position des éléments |
Modifier width, height, top ou left |
Peinture |
Remplit les pixels : texte, couleurs, images, bordures, ombres |
Modifier color, background-image ou box-shadow |
Composition |
Assemble les calques à l’écran dans le bon ordre |
Éléments qui se chevauchent, défilement |
Trois chemins de rendu, trois coûts
Vous n’avez pas besoin de parcourir tout le pipeline à chaque image. Selon la propriété modifiée, le navigateur emprunte l’un des trois chemins suivants, du plus coûteux au plus économique. Modifier une propriété de mise en page (comme width ou top) force le navigateur à recalculer la géométrie de la page (reflow), puis à repeindre et recomposer ; quand ce calcul s’étire, pensez à optimiser les longues tâches qui en découlent. Modifier une propriété de peinture seule (comme color ou box-shadow) évite l’étape de mise en page. Modifier une propriété gérée par le compositeur permet de sauter mise en page et peinture : c’est le chemin idéal pour les animations et le défilement.
L’exemple ci-dessous compare une animation coûteuse, qui agit sur la position, à une animation économique qui s’appuie sur transform et reste au niveau de la composition.
/* À éviter : modifie la géométrie, déclenche un reflow */
.box-lente {
position: relative;
transition: left 200ms ease;
}
.box-lente:hover { left: 20px; }
/* À préférer : animé par le compositeur, ni mise en page ni peinture */
.box-fluide {
transition: transform 200ms ease;
}
.box-fluide:hover { transform: translateX(20px); }La performance de rendu consiste d’abord à éviter le travail inutile, puis à rendre efficace le travail restant. Une propriété qui déclenche un reflow peut coûter très cher si elle s’exécute à chaque image d’une animation. Privilégiez les propriétés gérées par le compositeur (comme transform et opacity) pour les animations et le défilement, et limitez vos changements aux seules étapes du pipeline réellement nécessaires.
À faire
- viser environ 10 ms par image pour les animations
- animer avec des propriétés gérées par le compositeur
- n’activer que les étapes du pipeline nécessaires
- profiler avec le panneau Performances
À éviter
- animer des propriétés de mise en page comme top ou left
- provoquer des reflows répétés à chaque image
- ignorer le jank au défilement
- charger trop de JavaScript en réponse aux interactions
Points clés à retenir
- Tenez chaque image dans environ 10 ms pour éviter le jank
- Connaissez les cinq étapes : JavaScript, style, mise en page, peinture, composition
- Réservez mise en page et peinture aux changements qui l'exigent vraiment
- Animez avec transform et opacity pour rester au niveau composition
- Visez un INP de 200 ms ou moins pour une bonne réactivité
Fluidifier le rendu, c’est respecter le budget par image et choisir le bon chemin du pipeline.
Quiz : testez vos connaissances
Quiz : testez vos connaissances
-
Pourquoi vise-t-on environ 10 ms de travail par image pour une animation fluide ?
- Parce qu'un écran à 60 Hz laisse 16,66 ms par image, dont le navigateur consomme déjà une partie
- Parce que les écrans s'actualisent exactement 10 fois par seconde
- Parce que 10 ms est la durée minimale imposée par le langage JavaScript
Un écran à 60 Hz dispose de 16,66 ms par image, mais le navigateur en utilise une partie pour ses traitements internes. Il reste donc environ 10 ms de marge avant de provoquer des saccades.
-
Quelles propriétés CSS sont les plus économiques à animer ?
- Les propriétés gérées par le compositeur, comme transform et opacity, car elles évitent la mise en page et la peinture
- Toutes les propriétés ont le même coût, le choix n'a pas d'importance
- Les propriétés de mise en page comme width et top, qui sont les plus rapides
Animer
transformetopacityest le moins coûteux : ces propriétés sont prises en charge par le compositeur et évitent les étapes de mise en page et de peinture. -
Que provoque la modification d'une propriété de mise en page comme width ou top pendant une animation ?
- Le navigateur ignore le changement jusqu'au prochain rechargement de la page
- Le navigateur doit recalculer la mise en page, ce qui emprunte le chemin le plus coûteux du pipeline
- Le navigateur saute toutes les étapes du pipeline et affiche instantanément
Modifier une propriété de mise en page comme
widthoutopforce le navigateur à recalculer la disposition, ce qui déclenche un reflow et emprunte le chemin le plus coûteux du pixel pipeline.
À propos de l'auteur
Besoin d'un accompagnement SEO ?
Vos animations saccadent ou votre INP reste dans le rouge ?