Ytelse for CSS-gradienter: gjør gradienter en side tregere?

God ytelse for CSS-gradienter er det normale: en statisk gradient gjør ikke et nettsted tregere på noen måte du kan merke. Den er en tekstlinje, så det er ingenting å laste ned, ingenting å dekode og ingenting å vente på. Gradienter koster litt tegnetid, som alle andre farger på siden. Trege sider kommer fra noen få bestemte mønstre bygget oppå gradienter: store uskarphetseffekter, omtegning ved rulling og animasjoner som tegnes om for hvert bilde. Denne guiden viser hva som er hva og hvordan du sjekker din egen side.

Lasting: gradienter mot bilder

background: linear-gradient(135deg, #1e1b4b, #7c3aed 55%, #f472b6); er 67 tegn. Den kommer inne i stilarket ditt, trenger ingen ekstra forespørsel og gjengis skarpt i alle størrelser og pikseltettheter. En bildebakgrunn trenger sin egen forespørsel, må dekodes før den kan tegnes og må være stor nok til store skjermer med høy tetthet.

For enkle og moderat lagdelte bakgrunner vinner altså CSS på lasting hver gang. Bilder gir fortsatt mening når bakgrunnen er virkelig kompleks, som en malerisk mesh-gradient med mange fargepunkter eller en fotografisk tekstur. Da er avveiningen filvekt mot visuell rikdom, og den er ofte verdt det.

Tegning: hva en gradient koster på skjermen

For å vise en gradient regner nettleseren ut en farge for hver piksel den dekker: det er tegning. Arbeidet vokser med det malte arealet, antall stablede gradientlag og eventuelle effekter oppå. For en statisk bakgrunn skjer det én gang, og resultatet gjenbrukes mens du ruller eller samhandler, med mindre noe gjør det ugyldig.

De reelle risikoene: uskarphet, faste bakgrunner og animasjon

Store uskarphetseffekter. filter: blur() og backdrop-filter tar prøver av mange omkringliggende piksler for hver piksel, og arbeidet vokser med både uskarphetsradius og areal. En uskarp gradient som males én gang, er som regel greit. En backdrop-filter over innhold som ruller under, må regnes ut på nytt mens innholdet beveger seg, og der har glassmorfisme-grensesnitt en tendens til å hakke på beskjedne mobiler.

Faste bakgrunner. background-attachment: fixed holder en bakgrunn i ro mens siden ruller, noe som kan tvinge den til å tegnes om for hvert rulletrinn. Vil du ha en gradient som blir stående, er et position: fixed-element bak innholdet som regel billigere, fordi nettleseren kan flytte det som et eget lag.

Animasjon. Å flytte background-position eller animere fargestopp gjennom @property tegner elementet om for hvert bilde. På en knapp er det trivielt. På en fullskjerms hero er det kontinuerlig arbeid så lenge siden er åpen, noe som viser seg som varme og batteridrenering på mobiler.

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

Guiden om animerte gradienter i CSS har hele settet med teknikker, fra billigst til mest fleksibelt.

Lag og will-change

Å løfte et element opp til sitt eget sammensetterlag, med will-change: transform eller en aktiv transform-animasjon, er det som gjør billig animasjon mulig. Det er ikke gratis: hvert lag holder sin egen bitmap i grafikkminnet, omtrent bredde × høyde × 4 byte i enhetspiksler. Ett overdimensjonert lag til en hero-bakgrunn er greit. Dusinvis av løftede kort, hver med sitt eget gradientlag, kan bruke mer minne enn de sparer i tegnetid. Legg will-change på elementene som faktisk animeres, ikke som en generell regel.

Slik måler du gradientytelse

1. 1

   Slå på paint flashing

   Åpne Rendering-panelet i Chrome DevTools og slå på Paint flashing. Alt som blinker grønt mens ingenting skal endres, tegnes om.

2. 2

   Ta opp et Performance-spor

   Ta opp noen sekunder med rulling eller animasjon i hvile i Performance-panelet. Se på hvor mye av hvert bilde som går til tegning, og om bilder droppes.

3. 3

   Strupe CPU-en

   Bruk CPU-struping i Performance-panelet for å simulere en tregere enhet. En hero som er jevn på en rask bærbar, kan slite på en mobil i mellomklassen.

4. 4

   Sjekk Layers-panelet

   Se hvor mange sammensetterlag som finnes og hvor mye minne de bruker. Uventet mange lag betyr som regel at will-change er overbrukt.

5. 5

   Test på den ekte enheten

   Avslutt på en faktisk mobil. Varme og batteridrenering fra konstant animasjon er lett å overse på en stasjonær.

web.devs guide til renderingsytelse forklarer rørledningen bak disse verktøyene: stil, layout, tegning og sammensetting. Å vite hvilket trinn gradienten din utløser, forteller deg om den er billig.

En sjekkliste for gradientytelse

• Bruk CSS-gradienter til enkle og lagdelte bakgrunner, og bilder bare når uttrykket virkelig trenger dem.
• Hold uskarphetsradiene moderate, og unngå backdrop-filter over store rulleområder.
• Bytt ut background-attachment: fixed med et lag i fast posisjon.
• Animer transform eller opacity, ikke background-position, på store flater.
• Langsomme stemningsanimasjoner kan stoppe helt for brukere med redusert bevegelse.
• Legg til korn som et lite flislagt bilde, ikke et levende SVG-filter på et stort element. Se CSS-støytekstur.
• Mål før og etter med paint flashing og en Performance-opptaking.