# CSS-liukuvärin suorituskyky: hidastavatko liukuvärit sivua?

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

Staattinen CSS-liukuväri on melkein ilmainen. Kustannukset tulevat siitä, mitä liukuväreillä tehdään: valtavista sumennuksista, vierittäessä uudelleen piirtyvistä taustoista ja animaatioista, jotka eivät lopu. Tästä näet eron.

## The short version

- Staattinen CSS-liukuväri ei juuri kuormita latausta, koska se on tekstirivi eikä ladattava ja purettava tiedosto.
- Liukuvärit maksavat piirtoaikaa, joka kasvaa piirretyn alueen ja kerrosten määrän mukana, mutta staattinen liukuväri piirretään kerran ja käytetään sitten uudelleen.
- Todelliset suorituskykyriskit ovat suuret sumennussuodattimet, vierittäessä uudelleen piirtyvät taustat ja liukuvärianimaatiot, jotka piirtyvät uudelleen joka ruudulla.
- Liukuvärikerroksen transform- tai opacity-ominaisuuden animointi on yleensä paljon halvempaa kuin background-position- tai värikohtien animointi.
- Ainoa luotettava vastaus tietylle sivulle on mitata: selaimen kehittäjätyökalujen paint flashing ja Performance-tallenne kertovat totuuden.

Hyvä **CSS-liukuvärin suorituskyky** on normaalitilanne: staattinen liukuväri ei hidasta verkkosivua millään huomattavalla tavalla. Se on tekstirivi, joten ei ole mitään ladattavaa, purettavaa tai odotettavaa. Liukuvärit maksavat hieman piirtoaikaa kuten kaikki muutkin sivun värit. Hitaat sivut syntyvät muutamasta liukuvärien päälle rakennetusta tavasta: suurista sumennuksista, vierittäessä tapahtuvasta uudelleenpiirrosta ja animaatioista, jotka piirtyvät uudelleen joka ruudulla. Tämä opas näyttää, mikä on mitäkin ja miten oman sivusi voi tarkistaa.

## Lataus: liukuvärit vastaan kuvat

`background: linear-gradient(135deg, #1e1b4b, #7c3aed 55%, #f472b6);` on 67 merkkiä. Se tulee tyylitiedostosi mukana, ei tarvitse erillistä pyyntöä ja piirtyy terävänä missä tahansa koossa ja pikselitiheydessä. Kuvataustalle tarvitaan oma pyyntö, se pitää purkaa ennen piirtämistä, ja sen täytyy olla riittävän suuri isoille ja tiheille näytöille.

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

Tämä koko tausta, missä tahansa koossa, kuormittaa latausta vähemmän kuin yksi tekstilause.

| Tausta | Lataus | Purettu muisti koossa 1920×1080 |
| --- | --- | --- |
| CSS-liukuväri | Muutama kymmenen tavua CSS:ssäsi | Ei säilytettävää bittikarttaa, piirtyy tarvittaessa |
| Pakattu kuva (AVIF, WebP, JPEG) | Erillinen tiedosto, usein kymmeniä tai satoja kilotavuja | Noin 8,3 Mt (leveys × korkeus × 4 tavua) |
| Sama kuva koossa 3840×2160 terävälle 4K:lle | Vielä suurempi | Noin 33 Mt |

Puretut kuvat säilytetään kokonaisina bittikarttoina tiedostokoosta riippumatta. Muistiluvut ovat yksinkertaista laskua: pikselit kertaa neljä tavua.

Yksinkertaisissa ja kohtuullisen monikerroksisissa taustoissa CSS voittaa latauksessa aina. Kuvilla on silti paikkansa, kun tausta on aidosti monimutkainen, kuten maalauksellinen [mesh-liukuväri](https://gradiently.design/fi/guide/css-mesh-gradient), jossa on monta värikohtaa, tai valokuvamainen tekstuuri. Silloin vaihdat tiedostopainoa visuaaliseen rikkauteen, ja se kannattaa usein.

## Piirtäminen: mitä liukuväri maksaa ruudulla

Liukuvärin näyttämiseksi selain laskee värin jokaiselle peittämälleen pikselille: sitä kutsutaan piirtämiseksi. Työ kasvaa piirretyn alueen, päällekkäisten liukuvärikerrosten ja niiden päälle lisättyjen tehosteiden mukana. Staattisella taustalla se tapahtuu kerran, ja tulos käytetään uudelleen vierittäessä ja käyttäessä sivua, ellei jokin mitätöi sitä.

### Piirtyy kerran

- Staattinen liukuväri kortissa tai hero-alueella
- Useita päällekkäisiä säteittäisiä hehkuja, jotka eivät liiku
- Ruudukkona toistuva kohinatekstuuri liukuvärin päällä
- Taustoilla piirretty liukuvärireunus

### Piirtyy yhä uudelleen

- `background-position`- tai värikohtien animointi
- `background-attachment: fixed` vierittäessä
- `backdrop-filter`-sumennus liikkuvan sisällön päällä
- Liukuvärillinen elementti, jonka koko muuttuu jatkuvasti

## Todelliset riskit: sumennus, kiinteät taustat ja animaatio

**Suuret sumennukset.** `filter: blur()` ja `backdrop-filter` ottavat jokaisen pikselin kohdalla näytteitä monista ympäröivistä pikseleistä, ja työ kasvaa sekä sumennussäteen että alueen mukana. Kerran piirretty sumennettu liukuväri on yleensä kunnossa. `backdrop-filter` vierivän sisällön päällä pitää laskea uudelleen sisällön liikkuessa, ja siksi [glassmorphism](https://gradiently.design/fi/guide/glassmorphism)-käyttöliittymät tökkivät herkästi vaatimattomilla puhelimilla.

**Kiinteät taustat.** `background-attachment: fixed` pitää taustan paikallaan sivun vieriessä, mikä voi pakottaa sen piirtymään uudelleen jokaisella vierityksen askeleella. Jos haluat liukuvärin, joka pysyy paikallaan, sisällön takana oleva `position: fixed` -elementti on yleensä halvempi, koska selain voi siirtää sitä erillisenä kerroksena.

**Animaatio.** `background-position`in liikuttaminen tai värikohtien animointi `@property`:n kautta piirtää elementin uudelleen joka ruudulla. Painikkeessa se on vähäpätöistä. Koko ruudun hero-alueella se on jatkuvaa työtä niin kauan kuin sivu on auki, ja se näkyy puhelimissa lämpönä ja akun kulutuksena.

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

Kaksi animoitua hero-aluetta. Jälkimmäinen animoi `transform`ia, jota selaimet osaavat yleensä käsitellä kompositointivaiheessa ilman uudelleenpiirtoa.

[CSS-animoidun liukuvärin](https://gradiently.design/fi/guide/css-animated-gradient) oppaassa on koko tekniikkajoukko halvimmasta joustavimpaan.

## Kerrokset ja will-change

Elementin nostaminen omalle kokoonpanokerrokselleen `will-change: transform` -asetuksella tai käynnissä olevalla transform-animaatiolla tekee halvan animaation mahdolliseksi. Se ei ole ilmaista: jokainen kerros pitää omaa bittikarttaansa grafiikkamuistissa, suunnilleen leveys × korkeus × 4 tavua laitepikseleinä. Yksi ylisuuri kerros hero-taustalle on hyvä. Kymmenet korotetut kortit, joilla kullakin on oma liukuvärikerroksensa, voivat käyttää enemmän muistia kuin säästävät piirtoajassa. Lisää `will-change` niille elementeille, jotka oikeasti animoituvat, älä yleissääntönä.

| Tapa | Selaimen työ | Halvempi vaihtoehto |
| --- | --- | --- |
| Animoitu `background-position` hero-alueella | Uudelleenpiirto joka ruudulla | `transform` ylisuurella liukuvärikerroksella |
| `background-attachment: fixed` | Uudelleenpiirto vierittäessä | `position: fixed` -liukuvärikerros sisällön takana |
| `backdrop-filter` vierivän sisällön päällä | Sumennus lasketaan uudelleen sisällön liikkuessa | Valmiiksi sumennettu staattinen kerros tai pienempi sumennettu alue |
| Elävä SVG-kohinasuodatin suurella elementillä | Suodatin ajetaan jokaiselle uudelleen piirretylle pikselille | Pieni toistuva kohinakuva |
| `will-change` jokaisella kortilla | Monta kerrosta grafiikkamuistissa | `will-change` vain sillä, mikä animoituu |

Yleisiä liukuväritapoja, mitä ne teettävät selaimella ja kevyempi keino saada sama ilme.

## Miten liukuvärin suorituskyky mitataan

1. **Ota paint flashing käyttöön** Avaa Chrome DevToolsissa Rendering-paneeli ja ota käyttöön Paint flashing. Kaikki, mikä vilkkuu vihreänä silloin kun mitään ei pitäisi muuttua, piirtyy uudelleen.
2. **Tallenna Performance-jälki** Tallenna Performance-paneelissa muutama sekunti vierittämistä tai tyhjäkäyntiä. Katso, kuinka suuri osa kustakin ruudusta kuluu piirtämiseen ja pudotaanko ruuduista.
3. **Hidasta suoritinta** Simuloi hitaampaa laitetta Performance-paneelin suorittimen rajoituksella. Nopealla kannettavalla sulava hero-alue voi tökkiä keskihintaisella puhelimella.
4. **Tarkista Layers-paneeli** Katso, kuinka monta kokoonpanokerrosta on ja paljonko muistia ne käyttävät. Odottamattoman monta kerrosta tarkoittaa yleensä, että `will-change`ia on käytetty liikaa.
5. **Kokeile oikealla laitteella** Viimeistele oikealla puhelimella. Jatkuvan animaation aiheuttama lämpö ja akun kulutus jäävät helposti huomaamatta työpöydällä.

[web.devin renderöintisuorituskykyopas](https://web.dev/articles/rendering-performance) selittää näiden työkalujen taustalla olevan putken: tyylit, asettelu, piirto ja kokoonpano. Kun tiedät, mihin vaiheeseen liukuvärisi vaikuttaa, tiedät myös, onko se halpa.

## Suorituskykytarkistuslista liukuväreille

- Käytä CSS-liukuvärejä yksinkertaisiin ja monikerroksisiin taustoihin, kuvia vain kun ilme aidosti vaatii ne.
- Pidä sumennussäteet kohtuullisina ja vältä `backdrop-filter`ia suurilla vierivillä alueilla.
- Korvaa `background-attachment: fixed` kiinteällä kerroksella.
- Animoi suurilla alueilla `transform`ia tai `opacity`a, älä `background-position`ia.
- Hitaat, tunnelmaa luovat animaatiot voivat pysähtyä kokonaan [vähennettyä liikettä](https://gradiently.design/fi/guide/reduced-motion) haluaville käyttäjille.
- Lisää rakeisuus pienenä toistuvana kuvana, älä elävänä SVG-suodattimena suurella elementillä; katso [CSS-kohinatekstuuri](https://gradiently.design/fi/guide/css-noise-texture).
- Mittaa ennen ja jälkeen paint flashingilla ja Performance-tallenteella.

## FAQ

### Hidastavatko CSS-liukuvärit verkkosivua?

Staattiset CSS-liukuvärit eivät hidasta huomattavasti. Ne eivät tarvitse latausta ja piirtyvät kerran. Suorituskykyä kuluttavat suuret sumennukset, kiinteät taustat ja jatkuva animaatio.

### Onko CSS-liukuväri nopeampi kuin taustakuva?

Yleensä on. Liukuväri on muutama kymmenen tavua CSS:ää ilman pyyntöä tai purkamista, kun taas kuva pitää ladata ja se säilytetään muistissa kokonaisena bittikarttana.

### Ovatko animoidut liukuvärit huonoja suorituskyvylle?

`background-position`in tai värikohtien animointi piirtää uudelleen joka ruudulla, mikä on merkittävää suurilla alueilla. `transform`in tai `opacity`n animointi liukuvärikerroksella on yleensä paljon halvempaa.

### Miksi sumennettu liukuvärini tausta on hidas?

Sumennus ottaa jokaisen pikselin kohdalla näytteitä monesta viereisestä pikselistä, joten kustannus kasvaa säteen ja alueen mukana. Pahin tilanne on `backdrop-filter` vierivän tai animoituvan sisällön päällä.

### Miten näen, piirtyykö liukuväri uudelleen?

Ota Paint flashing käyttöön Chrome DevToolsin Rendering-paneelissa. Alueet, jotka jatkavat vilkkumista sivun ollessa tyhjäkäynnillä, piirtyvät uudelleen.