# Ydeevne for CSS-gradienter: gør gradienter et website langsomt?

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

En statisk CSS-gradient er næsten gratis. Omkostningerne kommer af det, folk gør med gradienter: enorme sløringer, baggrunde der gentegnes ved scroll, og animationer, der aldrig stopper. Sådan kender du forskel.

## The short version

- En statisk CSS-gradient koster næsten intet at indlæse, fordi den er en linje tekst og ikke en fil, der skal downloades og afkodes.
- Gradienter koster tegnetid, som vokser med det tegnede areal og antallet af lag, men en statisk gradient tegnes én gang og genbruges derefter.
- De reelle ydeevnerisici er store slørefiltre, baggrunde der gentegnes under scroll, og gradientanimationer, der gentegner hver frame.
- At animere transform eller opacity på et gradientlag er som regel langt billigere end at animere background-position eller farvestop.
- Det eneste pålidelige svar for en bestemt side er at måle, med paint flashing og en Performance-optagelse i browserens udviklerværktøjer.

God **ydeevne for CSS-gradienter** er det normale: en statisk gradient gør ikke et website langsomt på nogen måde, du kan mærke. Den er en linje tekst, så der er intet at downloade, intet at afkode og intet at vente på. Gradienter koster lidt tegnetid, ligesom enhver anden farve på siden. Langsomme sider kommer af nogle få bestemte mønstre bygget oven på gradienter: store sløringer, gentegning under scroll og animationer, der gentegner hver frame. Denne guide viser, hvad der er hvad, og hvordan du tjekker din egen side.

## Indlæsning: gradienter mod billeder

`background: linear-gradient(135deg, #1e1b4b, #7c3aed 55%, #f472b6);` er 67 tegn. Den kommer med i dit stylesheet, kræver ingen ekstra forespørgsel og gengives skarpt i enhver størrelse og pixeltæthed. En billedbaggrund kræver sin egen forespørgsel, skal afkodes, før den kan tegnes, og skal være stor nok til store skærme med høj tæthed.

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

Hele denne baggrund, i enhver størrelse, koster mindre at indlæse end en sætning tekst.

| Baggrund | Download | Afkodet hukommelse ved 1920×1080 |
| --- | --- | --- |
| CSS-gradient | Nogle få dusin bytes i din CSS | Intet bitmap at holde. Tegnes efter behov |
| Komprimeret billede (AVIF, WebP, JPEG) | En separat fil, ofte titusinder til hundredvis af kilobytes | Omkring 8,3 MB (bredde × højde × 4 bytes) |
| Samme billede i 3840×2160 til skarpt 4K | Igen større | Omkring 33 MB |

Afkodede billeder holdes som fulde bitmaps, uanset filstørrelsen. Hukommelsestallene er simpel aritmetik: pixler gange fire bytes.

Til enkle og moderat lagdelte baggrunde vinder CSS derfor altid på indlæsning. Billeder giver stadig mening, når baggrunden er virkelig kompleks, som en malerisk [mesh-gradient](https://gradiently.design/da/guide/css-mesh-gradient) med mange farvepunkter eller en fotografisk tekstur. Så er handlen filvægt mod visuel rigdom, og den kan ofte betale sig.

## Tegning: hvad en gradient koster på skærmen

For at vise en gradient beregner browseren en farve for hver pixel, den dækker: det er tegning. Arbejdet vokser med det tegnede areal, antallet af stablede gradientlag og eventuelle effekter oven på. For en statisk baggrund sker det én gang, og resultatet genbruges, mens du scroller eller interagerer, medmindre noget ugyldiggør det.

### Tegnet én gang

- En statisk gradient på et kort eller en hero
- Flere lagdelte radiale skær, der ikke bevæger sig
- En flisebelagt støjtekstur over en gradient
- En gradientkant tegnet med baggrunde

### Tegnet igen og igen

- Animation af `background-position` eller farvestop
- `background-attachment: fixed` under scroll
- `backdrop-filter`-sløring over indhold i bevægelse
- Et element med en gradient, der ændrer størrelse løbende

## De reelle risici: sløring, faste baggrunde og animation

**Store sløringer.** `filter: blur()` og `backdrop-filter` aflæser mange omgivende pixler for hver pixel, og arbejdet vokser med både sløringsradius og areal. En sløret gradient, der tegnes én gang, er som regel fin. En `backdrop-filter` over indhold, der scroller nedenunder, skal genberegnes, mens indholdet bevæger sig, og det er dér, [glassmorphism](https://gradiently.design/da/guide/glassmorphism)-brugerflader har tendens til at hakke på beskedne telefoner.

**Faste baggrunde.** `background-attachment: fixed` holder en baggrund stille, mens siden scroller, hvilket kan tvinge den til at gentegne ved hvert scrolltrin. Vil du have en gradient, der bliver stående, er et `position: fixed`-element bag indholdet som regel billigere, fordi browseren kan flytte det som et separat lag.

**Animation.** At flytte `background-position` eller animere farvestop gennem `@property` gentegner elementet hver frame. På en knap er det trivielt. På en helskærmshero er det kontinuerligt arbejde, så længe siden er åben, hvilket viser sig som varme og batteriforbrug på telefoner.

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

To animerede heroer. Den anden animerer `transform`, som browsere som regel kan håndtere på compositoren uden at gentegne.

Guiden om [CSS-animerede gradienter](https://gradiently.design/da/guide/css-animated-gradient) har alle teknikkerne, fra den billigste til den mest fleksible.

## Lag og will-change

At løfte et element op i sit eget compositor-lag, med `will-change: transform` eller en aktiv transformanimation, er det, der gør billig animation mulig. Det er ikke gratis: hvert lag holder sit eget bitmap i grafikhukommelsen, cirka bredde × højde × 4 bytes i enhedspixler. Ét overstort lag til en hero-baggrund er fint. Dusinvis af løftede kort, hver med sit eget gradientlag, kan bruge mere hukommelse, end de sparer i tegnetid. Tilføj `will-change` til de elementer, der rent faktisk animerer, ikke som en generel regel.

| Mønster | Browserens arbejde | Billigere alternativ |
| --- | --- | --- |
| Animeret `background-position` på en hero | Gentegning hver frame | `transform` på et overstort gradientlag |
| `background-attachment: fixed` | Gentegning under scroll | Et `position: fixed`-gradientlag bag indholdet |
| `backdrop-filter` over indhold, der scroller | Sløring genberegnes, mens indholdet bevæger sig | Et forsløret statisk lag eller et mindre sløret område |
| Levende SVG-støjfilter på et stort element | Filteret kører over hver gentegnet pixel | Et lille flisebelagt støjbillede |
| `will-change` på hvert kort | Mange lag holdt i grafikhukommelsen | `will-change` kun på det, der animerer |

Almindelige gradientmønstre, hvad de får browseren til at gøre, og den lettere vej til det samme udtryk.

## Sådan måler du gradienters ydeevne

1. **Slå paint flashing til** I Chrome DevTools åbner du panelet Rendering og aktiverer Paint flashing. Alt, der blinker grønt, mens intet bør ændre sig, gentegnes.
2. **Optag et Performance-spor** Optag nogle få sekunder scroll eller ledig animation i panelet Performance. Se, hvor stor en del af hver frame der går til tegning, og om der springes frames over.
3. **Bremse CPU’en** Brug CPU-drosling i panelet Performance til at simulere en langsommere enhed. En hero, der er jævn på en hurtig laptop, kan hakke på en mellemklassetelefon.
4. **Tjek panelet Layers** Se, hvor mange compositor-lag der findes, og hvor meget hukommelse de bruger. Uventet mange lag betyder som regel, at `will-change` er overbrugt.
5. **Test på den rigtige enhed** Afslut på en rigtig telefon. Varme og batteriforbrug fra konstant animation er lette at overse på en stationær.

[web.dev’s guide til renderingsydeevne](https://web.dev/articles/rendering-performance) forklarer pipelinen bag disse værktøjer: style, layout, paint og composite. Når du ved, hvilket trin din gradient udløser, ved du, om den er billig.

## En tjekliste til gradienters ydeevne

- Brug CSS-gradienter til enkle og lagdelte baggrunde. Brug kun billeder, når udtrykket virkelig kræver dem.
- Hold sløringsradius moderat, og undgå `backdrop-filter` over store områder, der scroller.
- Erstat `background-attachment: fixed` med et lag med fast position.
- Animér `transform` eller `opacity`, ikke `background-position`, på store områder.
- Langsomme, stemningsskabende animationer kan stoppe helt for brugere med [reduceret bevægelse](https://gradiently.design/da/guide/reduced-motion).
- Tilføj korn som et lille flisebelagt billede og ikke som et levende SVG-filter på et stort element. Se [CSS-støjtekstur](https://gradiently.design/da/guide/css-noise-texture).
- Mål før og efter med paint flashing og en Performance-optagelse.

## FAQ

### Gør CSS-gradienter et website langsomt?

Statiske CSS-gradienter gør ikke på en mærkbar måde. De kræver ingen download og tegnes én gang. Store sløringer, faste baggrunde og konstant animation er det, der koster ydeevne.

### Er en CSS-gradient hurtigere end et baggrundsbillede?

Som regel ja. En gradient er nogle få dusin bytes CSS uden forespørgsel eller afkodning, mens et billede kræver en download og holdes i hukommelsen som et fuldt bitmap.

### Er animerede gradienter dårlige for ydeevnen?

At animere `background-position` eller farvestop gentegner hver frame, hvilket betyder noget på store områder. At animere `transform` eller `opacity` på et gradientlag er som regel meget billigere.

### Hvorfor er min slørede gradientbaggrund langsom?

Sløring aflæser mange nabopixler for hver pixel, så prisen vokser med radius og areal. Den er værst med `backdrop-filter` over indhold, der scroller eller animerer.

### Hvordan tjekker jeg, om min gradient gentegnes?

Aktivér Paint flashing i panelet Rendering i Chrome DevTools. Områder, der bliver ved med at blinke, mens siden er ledig, gentegnes.