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

[Canonical HTML page](https://gradiently.design/fr/guide/css-gradient-performance)

Un dégradé CSS statique ne coûte presque rien. Les coûts viennent de ce qu’on en fait : flous géants, arrière-plans redessinés au défilement, animations qui ne s’arrêtent jamais. Voici comment faire la différence.

## The short version

- Un dégradé CSS statique ne coûte presque rien à charger, car c’est une ligne de texte et non un fichier à télécharger et à décoder.
- Les dégradés coûtent du temps de dessin, qui croît avec la surface dessinée et le nombre de calques, mais un dégradé statique est dessiné une fois puis réutilisé.
- Les vrais risques de performance sont les grands filtres de flou, les arrière-plans redessinés pendant le défilement et les animations de dégradé redessinées à chaque image.
- Animer transform ou opacity sur un calque de dégradé est en général bien moins coûteux qu’animer background-position ou les arrêts de couleur.
- La seule réponse fiable pour une page donnée est de mesurer, avec le clignotement de dessin et un enregistrement Performance dans les outils de développement du navigateur.

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é.

67 caractères de CSS: `linear-gradient(135deg, #1e1b4b, #7c3aed 55%, #f472b6)`

Tout cet arrière-plan, à n’importe quelle taille, coûte moins qu’une phrase de texte à charger.

| Arrière-plan | Téléchargement | Mémoire décodée à 1920×1080 |
| --- | --- | --- |
| Dégradé CSS | Quelques dizaines d’octets dans votre CSS | Aucune image à conserver ; dessiné à la demande |
| Image compressée (AVIF, WebP, JPEG) | Un fichier séparé, souvent de dizaines à centaines de kilo-octets | Environ 8,3 Mo (largeur × hauteur × 4 octets) |
| Même image en 3840×2160 pour une 4K nette | Plus gros encore | Environ 33 Mo |

Les images décodées sont conservées en bitmap complet, quelle que soit la taille du fichier. Les chiffres de mémoire sont de l’arithmétique simple : pixels fois quatre octets.

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é](https://gradiently.design/fr/guide/css-mesh-gradient) 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.

### Dessiné une fois

- Un dégradé statique sur une carte ou un hero
- Plusieurs halos radiaux superposés qui ne bougent pas
- Une texture de bruit en mosaïque sur un dégradé
- Une bordure dégradée dessinée avec des arrière-plans

### Dessiné encore et encore

- Animer `background-position` ou les arrêts de couleur
- `background-attachment: fixed` pendant le défilement
- Un flou `backdrop-filter` sur du contenu en mouvement
- Un élément à dégradé qui se redimensionne en continu

## 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](https://gradiently.design/fr/guide/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.

```css
/* 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); } }
```

Deux heros animés. Le second anime `transform`, que les navigateurs gèrent en général sur le compositeur sans redessiner.

Le guide du [dégradé animé en CSS](https://gradiently.design/fr/guide/css-animated-gradient) 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.

| Motif | Travail du navigateur | Alternative moins coûteuse |
| --- | --- | --- |
| `background-position` animé sur un hero | Redessin à chaque image | `transform` sur un calque de dégradé surdimensionné |
| `background-attachment: fixed` | Redessin pendant le défilement | Un calque de dégradé `position: fixed` derrière le contenu |
| `backdrop-filter` sur du contenu qui défile | Flou recalculé quand le contenu bouge | Un calque statique pré-flouté, ou une zone floutée plus petite |
| Filtre de bruit SVG en direct sur un grand élément | Le filtre s’exécute sur chaque pixel redessiné | Une petite image de bruit en mosaïque |
| `will-change` sur chaque carte | De nombreux calques conservés en mémoire graphique | `will-change` seulement sur ce qui s’anime |

Motifs de dégradé courants, ce qu’ils font faire au navigateur, et la façon plus légère d’obtenir le même rendu.

## Comment mesurer la performance d’un dégradé

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. **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. **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. **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. **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](https://web.dev/articles/rendering-performance) 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](https://gradiently.design/fr/guide/reduced-motion).
- 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](https://gradiently.design/fr/guide/css-noise-texture).
- Mesurez avant et après avec le clignotement de dessin et un enregistrement Performance.

## FAQ

### Les dégradés CSS ralentissent-ils un site web ?

Les dégradés CSS statiques ne le font pas de façon perceptible. Ils n’exigent aucun téléchargement et sont dessinés une fois. Ce sont les grands flous, les arrière-plans fixes et l’animation constante qui coûtent en performance.

### Un dégradé CSS est-il plus rapide qu’une image de fond ?

En général oui. Un dégradé, ce sont quelques dizaines d’octets de CSS sans requête ni décodage, alors qu’une image demande un téléchargement et reste en mémoire comme bitmap complet.

### Les dégradés animés nuisent-ils à la performance ?

Animer `background-position` ou les arrêts de couleur redessine à chaque image, ce qui compte sur de grandes zones. Animer `transform` ou `opacity` sur un calque de dégradé est en général bien moins coûteux.

### Pourquoi mon arrière-plan dégradé flouté est-il lent ?

Le flou échantillonne de nombreux pixels voisins pour chaque pixel : le coût croît donc avec le rayon et la surface. C’est pire avec `backdrop-filter` sur du contenu qui défile ou s’anime.

### Comment savoir si mon dégradé est redessiné ?

Activez Paint flashing dans le panneau Rendering des DevTools de Chrome. Les zones qui continuent de clignoter quand la page est au repos sont redessinées.