Performance des dégradés CSS : ralentissent-ils un site ?

Une bonne performance des dégradés CSS est le cas normal : un dégradé statique ne ralentit pas un site de façon perceptible. C’est une ligne de texte : rien à télécharger, rien à décoder, rien à attendre. Les dégradés coûtent un peu de temps de dessin, comme toute autre couleur de la page. Les pages lentes viennent de quelques motifs précis bâtis sur des dégradés : grands flous, redessins pendant le défilement et animations redessinées à chaque image. Ce guide montre lequel est lequel et comment vérifier votre propre page.

Chargement : dégradés contre images

background: linear-gradient(135deg, #1e1b4b, #7c3aed 55%, #f472b6); fait 67 caractères. Il arrive dans votre feuille de style, n’exige aucune requête de plus et s’affiche net à toute taille et toute densité de pixels. Un arrière-plan image demande sa propre requête, doit être décodé avant d’être dessiné, et doit être assez grand pour les grands écrans à haute densité.

Pour des arrière-plans simples ou moyennement superposés, le CSS gagne donc toujours au chargement. Les images gardent leur sens quand l’arrière-plan est vraiment complexe, comme un dégradé maillé pictural à nombreux points de couleur ou une texture photographique. Le compromis est alors le poids du fichier contre la richesse visuelle, et il en vaut souvent la peine.

Dessin : ce que coûte un dégradé à l’écran

Pour afficher un dégradé, le navigateur calcule une couleur pour chaque pixel couvert : c’est le dessin. Le travail croît avec la surface dessinée, le nombre de calques de dégradé empilés et les effets ajoutés. Pour un arrière-plan statique, cela se produit une fois, et le résultat est réutilisé pendant le défilement ou l’interaction, sauf si quelque chose l’invalide.

Les vrais risques : flou, arrière-plans fixes et animation

Grands flous. filter: blur() et backdrop-filter échantillonnent de nombreux pixels voisins pour chaque pixel, et le travail croît avec le rayon du flou et la surface. Un dégradé flouté dessiné une fois passe en général sans problème. Un backdrop-filter sur du contenu qui défile dessous doit être recalculé à mesure que ce contenu bouge, c’est là que les interfaces glassmorphism saccadent sur des téléphones modestes.

Arrière-plans fixes. background-attachment: fixed garde un arrière-plan immobile pendant le défilement de la page, ce qui peut le forcer à se redessiner à chaque pas de défilement. Pour un dégradé qui reste en place, un élément position: fixed derrière le contenu est en général moins coûteux, car le navigateur peut le déplacer comme un calque séparé.

Animation. Déplacer background-position ou animer les arrêts de couleur via @property redessine l’élément à chaque image. Sur un bouton, c’est trivial. Sur un hero plein écran, c’est un travail continu tant que la page est ouverte, qui se voit à la chaleur et à la batterie qui fond sur les téléphones.

/* repaints the whole hero every frame */
.hero--costly {
  background: linear-gradient(120deg, #1e1b4b, #7c3aed, #f472b6);
  background-size: 300% 300%;
  animation: pan 12s ease-in-out infinite alternate;
}

/* the browser can usually just move a finished layer */
.hero--cheap::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: -1;
  background: conic-gradient(#1e1b4b, #7c3aed, #f472b6, #1e1b4b);
  animation: turn 40s linear infinite;
}

@keyframes pan { to { background-position: 100% 50%; } }
@keyframes turn { to { transform: rotate(1turn); } }

Le guide du dégradé animé en CSS présente toutes les techniques, de la moins coûteuse à la plus souple.

Calques et will-change

Promouvoir un élément sur son propre calque de composition, avec will-change: transform ou une animation de transformation active, est ce qui rend possible une animation peu coûteuse. Ce n’est pas gratuit : chaque calque garde son propre bitmap en mémoire graphique, environ largeur × hauteur × 4 octets en pixels de l’appareil. Un calque surdimensionné pour un arrière-plan de hero, cela va. Des dizaines de cartes promues, chacune avec son calque de dégradé, peuvent consommer plus de mémoire qu’elles n’économisent de temps de dessin. Ajoutez will-change aux éléments qui s’animent vraiment, pas comme règle générale.

Comment mesurer la performance d’un dégradé

1. 1

   Activez le clignotement de dessin

   Dans les DevTools de Chrome, ouvrez le panneau Rendering et activez Paint flashing. Tout ce qui clignote en vert alors que rien ne devrait changer est en train d’être redessiné.

2. 2

   Enregistrez une trace Performance

   Enregistrez quelques secondes de défilement ou d’animation au repos dans le panneau Performance. Regardez la part de chaque image consacrée au dessin et si des images sont perdues.

3. 3

   Bridez le processeur

   Utilisez le bridage du processeur du panneau Performance pour simuler un appareil plus lent. Un hero fluide sur un ordinateur portable rapide peut peiner sur un téléphone milieu de gamme.

4. 4

   Consultez le panneau Layers

   Voyez combien de calques de composition existent et combien de mémoire ils utilisent. Un nombre de calques étonnamment élevé signifie en général un abus de will-change.

5. 5

   Testez sur l’appareil réel

   Terminez sur un vrai téléphone. La chaleur et la batterie qui fond à cause d’une animation constante passent facilement inaperçues sur un ordinateur de bureau.

Le guide de web.dev sur la performance de rendu explique le pipeline derrière ces outils : style, mise en page, dessin et composition. Savoir quelle étape votre dégradé déclenche vous dit s’il est peu coûteux.

Une liste de contrôle de performance pour les dégradés

• Utilisez des dégradés CSS pour les arrière-plans simples ou superposés ; des images seulement quand le rendu l’exige vraiment.
• Gardez des rayons de flou modestes et évitez backdrop-filter sur de grandes zones qui défilent.
• Remplacez background-attachment: fixed par un calque en position fixe.
• Animez transform ou opacity, pas background-position, sur les grandes zones.
• Les animations lentes et ambiantes peuvent s’arrêter tout à fait pour ceux qui demandent un mouvement réduit.
• Ajoutez le grain comme une petite image en mosaïque, pas comme un filtre SVG en direct sur un grand élément ; voyez la texture de bruit CSS.
• Mesurez avant et après avec le clignotement de dessin et un enregistrement Performance.