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

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.

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

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

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

De gids over geanimeerde CSS-kleurverlopen 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.

Zo meet je de prestaties van kleurverlopen

1. 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. 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. 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. 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. 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 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.
• Voeg korrel toe als kleine getegelde afbeelding, niet als live SVG-filter op een groot element; zie CSS-ruistextuur.
• Meet voor en na met paint flashing en een Performance-opname.