# CSS-kleurverloop en prestaties: maken ze een site trager?

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

Een statisch CSS-kleurverloop is bijna gratis. De kosten komen van wat mensen met kleurverlopen doen: enorme blurs, achtergronden die bij scrollen opnieuw tekenen en animaties die nooit stoppen.

## The short version

- Een statisch CSS-kleurverloop kost bijna niets om te laden, want het is een regel tekst in plaats van een bestand dat gedownload en gedecodeerd moet worden.
- Kleurverlopen kosten tekentijd, die groeit met het geschilderde oppervlak en het aantal lagen, maar een statisch kleurverloop wordt één keer geschilderd en daarna hergebruikt.
- De echte prestatierisico’s zijn grote blurfilters, achtergronden die bij scrollen opnieuw tekenen en kleurverloopanimaties die elk beeld opnieuw tekenen.
- Transform of opacity animeren op een kleurverloopblaag is meestal veel goedkoper dan background-position of kleurstops animeren.
- Het enige betrouwbare antwoord voor een specifieke pagina is meten, met paint flashing en een Performance-opname in de ontwikkelaarstools van de browser.

Goede **prestaties van CSS-kleurverlopen** zijn het normale geval: een statisch kleurverloop maakt een website niet trager op een manier die je zou merken. Het is een regel tekst, dus er is niets te downloaden, niets te decoderen en niets om op te wachten. Kleurverlopen kosten wat tekentijd, zoals elke andere kleur op de pagina. Trage pagina’s komen van een paar specifieke patronen bovenop kleurverlopen: grote blurs, opnieuw tekenen bij scrollen en animaties die elk beeld opnieuw tekenen. Deze gids laat zien welke wat is en hoe je je eigen pagina controleert.

## Laden: kleurverlopen versus afbeeldingen

`background: linear-gradient(135deg, #1e1b4b, #7c3aed 55%, #f472b6);` is 67 tekens. Het komt binnen in je stylesheet, heeft geen extra verzoek nodig en rendert scherp op elk formaat en elke pixeldichtheid. Een afbeeldingsachtergrond heeft een eigen verzoek nodig, moet gedecodeerd worden voordat hij kan worden getekend en moet groot genoeg zijn voor grote schermen met hoge dichtheid.

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

Deze hele achtergrond kost, op elk formaat, minder dan een zin tekst om te laden.

| Achtergrond | Download | Gedecodeerd geheugen op 1920×1080 |
| --- | --- | --- |
| CSS-kleurverloop | Een paar tientallen bytes in je CSS | Geen bitmap om vast te houden; getekend als nodig |
| Gecomprimeerde afbeelding (AVIF, WebP, JPEG) | Een apart bestand, vaak tientallen tot honderden kilobytes | Ongeveer 8,3 MB (breedte × hoogte × 4 bytes) |
| Dezelfde afbeelding op 3840×2160 voor scherp 4K | Weer groter | Ongeveer 33 MB |

Gedecodeerde afbeeldingen worden als volledige bitmaps vastgehouden, ongeacht hun bestandsgrootte. De geheugencijfers zijn simpele rekenkunde: pixels maal vier bytes.

Voor eenvoudige en matig gelaagde achtergronden wint CSS dus altijd bij het laden. Afbeeldingen blijven zinvol als de achtergrond echt complex is, zoals een schilderachtige [mesh gradient](https://gradiently.design/nl/guide/css-mesh-gradient) met veel kleurpunten of een fotografische textuur. Dan ruil je bestandsgewicht voor visuele rijkdom, en dat is vaak de moeite waard.

## Tekenen: wat een kleurverloop op het scherm kost

Om een kleurverloop te tonen berekent de browser een kleur voor elke pixel die het bedekt: dat is tekenen. Het werk groeit met het geschilderde oppervlak, het aantal gestapelde kleurverloopblagen en alle effecten erbovenop. Voor een statische achtergrond gebeurt het één keer, en het resultaat wordt hergebruikt tijdens scrollen of interactie, tenzij iets het ongeldig maakt.

### Eén keer getekend

- Een statisch kleurverloop op een kaart of hero
- Meerdere gelaagde radiale gloeden die niet bewegen
- Een getegelde ruistextuur over een kleurverloop
- Een kleurverloopborder getekend met achtergronden

### Steeds opnieuw getekend

- `background-position` of kleurstops animeren
- `background-attachment: fixed` tijdens scrollen
- `backdrop-filter`-blur over bewegende inhoud
- Een element met een kleurverloop dat continu van grootte verandert

## De echte risico’s: blur, vaste achtergronden en animatie

**Grote blurs.** `filter: blur()` en `backdrop-filter` nemen voor elke pixel veel omringende pixels als monster, en het werk groeit met zowel de blurstraal als het oppervlak. Een vervaagd kleurverloop dat één keer wordt getekend is meestal prima. Een `backdrop-filter` over inhoud die eronder scrolt moet opnieuw berekend worden als die inhoud beweegt, en daar haperen [glassmorphism](https://gradiently.design/nl/guide/glassmorphism)-interfaces op bescheiden telefoons vaak.

**Vaste achtergronden.** `background-attachment: fixed` houdt een achtergrond stil terwijl de pagina scrolt, wat kan afdwingen dat hij bij elke scrollstap opnieuw tekent. Wil je een kleurverloop dat blijft staan, dan is een `position: fixed`-element achter de inhoud meestal goedkoper, omdat de browser het als aparte laag kan verplaatsen.

**Animatie.** `background-position` verplaatsen of kleurstops animeren via `@property` tekent het element elk beeld opnieuw. Op een knop is dat triviaal. Op een hero over het hele scherm is het continu werk zolang de pagina open is, wat zich toont als hitte en batterijverbruik op telefoons.

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

Twee geanimeerde heroes. De tweede animeert `transform`, wat browsers meestal op de compositor kunnen afhandelen zonder opnieuw te tekenen.

De gids over [geanimeerde CSS-kleurverlopen](https://gradiently.design/nl/guide/css-animated-gradient) heeft de volledige set technieken, van goedkoopst tot meest flexibel.

## Lagen en will-change

Een element promoveren naar een eigen compositorlaag, met `will-change: transform` of een actieve transformanimatie, maakt goedkope animatie mogelijk. Het is niet gratis: elke laag houdt een eigen bitmap vast in het grafische geheugen, ongeveer breedte × hoogte × 4 bytes op apparaatpixels. Eén te grote laag voor een heroachtergrond is prima. Tientallen gepromoveerde kaarten met elk een eigen kleurverloopblaag kunnen meer geheugen gebruiken dan ze aan tekentijd besparen. Voeg `will-change` toe aan de elementen die echt animeren, niet als algemene regel.

| Patroon | Werk van de browser | Goedkoper alternatief |
| --- | --- | --- |
| Geanimeerde `background-position` op een hero | Elk beeld opnieuw tekenen | `transform` op een te grote kleurverloopblaag |
| `background-attachment: fixed` | Opnieuw tekenen tijdens scrollen | Een `position: fixed`-kleurverloopblaag achter de inhoud |
| `backdrop-filter` over scrollende inhoud | Blur opnieuw berekend terwijl inhoud beweegt | Een vooraf vervaagde statische laag, of een kleiner vervaagd vlak |
| Live SVG-ruisfilter op een groot element | Filter draait over elke opnieuw getekende pixel | Een kleine getegelde ruisafbeelding |
| `will-change` op elke kaart | Veel lagen in het grafische geheugen | `will-change` alleen op wat animeert |

Gangbare kleurverloopspatronen, wat ze de browser laten doen en de lichtere manier om dezelfde look te krijgen.

## Zo meet je de prestaties van kleurverlopen

1. **Zet paint flashing aan** Open in Chrome DevTools het Rendering-paneel en zet Paint flashing aan. Alles wat groen flitst terwijl er niets zou moeten veranderen, tekent opnieuw.
2. **Neem een Performance-trace op** Neem enkele seconden scrollen of inactieve animatie op in het Performance-paneel. Kijk hoeveel van elk beeld aan tekenen opgaat en of er frames wegvallen.
3. **Beperk de CPU** Gebruik de CPU-throttling van het Performance-paneel om een trager apparaat te simuleren. Een hero die soepel loopt op een snelle laptop kan op een middenklassetelefoon moeite hebben.
4. **Bekijk het Layers-paneel** Zie hoeveel compositorlagen er zijn en hoeveel geheugen ze gebruiken. Onverwacht veel lagen betekent meestal dat `will-change` te veel wordt gebruikt.
5. **Test op het echte apparaat** Rond af op een echte telefoon. Hitte en batterijverbruik van constante animatie zijn op een desktop makkelijk te missen.

[De gids van web.dev over renderprestaties](https://web.dev/articles/rendering-performance) legt de pijplijn achter deze tools uit: stijl, layout, tekenen en samenstellen. Weten welke fase je kleurverloop activeert vertelt of het goedkoop is.

## Een prestatiechecklist voor kleurverlopen

- Gebruik CSS-kleurverlopen voor eenvoudige en gelaagde achtergronden; afbeeldingen alleen als de look ze echt nodig heeft.
- Houd blurstralen bescheiden en vermijd `backdrop-filter` over grote scrollende vlakken.
- Vervang `background-attachment: fixed` door een laag met vaste positie.
- Animeer `transform` of `opacity`, niet `background-position`, op grote vlakken.
- Trage, sfeervolle animaties kunnen helemaal stoppen voor gebruikers van [verminderde beweging](https://gradiently.design/nl/guide/reduced-motion).
- Voeg korrel toe als kleine getegelde afbeelding, niet als live SVG-filter op een groot element; zie [CSS-ruistextuur](https://gradiently.design/nl/guide/css-noise-texture).
- Meet voor en na met paint flashing en een Performance-opname.

## FAQ

### Maken CSS-kleurverlopen een website trager?

Statische CSS-kleurverlopen niet merkbaar. Ze hebben geen download nodig en worden één keer getekend. Grote blurs, vaste achtergronden en constante animatie kosten prestaties.

### Is een CSS-kleurverloop sneller dan een achtergrondafbeelding?

Meestal wel. Een kleurverloop is een paar tientallen bytes CSS zonder verzoek of decodering, terwijl een afbeelding een download nodig heeft en als volledige bitmap in het geheugen wordt gehouden.

### Zijn geanimeerde kleurverlopen slecht voor de prestaties?

`background-position` of kleurstops animeren tekent elk beeld opnieuw, wat op grote vlakken telt. `transform` of `opacity` animeren op een kleurverloopblaag is meestal veel goedkoper.

### Waarom is mijn vervaagde kleurverloopachtergrond traag?

Blur neemt voor elke pixel veel naburige pixels als monster, dus de kosten groeien met straal en oppervlak. Het is het ergst met `backdrop-filter` over inhoud die scrolt of animeert.

### Hoe controleer ik of mijn kleurverloop opnieuw tekent?

Zet Paint flashing aan in het Rendering-paneel van Chrome DevTools. Vlakken die blijven flitsen terwijl de pagina inactief is, tekenen opnieuw.