Prestazioni dei gradienti CSS: rallentano un sito?

Le buone prestazioni dei gradienti CSS sono il caso normale: un gradiente statico non rallenta un sito in modo percepibile. È una riga di testo, quindi non c’è nulla da scaricare, nulla da decodificare e nulla da aspettare. I gradienti costano un po’ di tempo di disegno, come ogni altro colore della pagina. Le pagine lente nascono da alcuni schemi precisi costruiti sopra i gradienti: grandi sfocature, ridisegni durante lo scorrimento e animazioni che ridisegnano a ogni fotogramma. Questa guida mostra quali sono e come controllare la tua pagina.

Caricamento: gradienti contro immagini

background: linear-gradient(135deg, #1e1b4b, #7c3aed 55%, #f472b6); è lungo 67 caratteri. Arriva dentro il tuo foglio di stile, non richiede altre richieste e si vede nitido a qualsiasi dimensione e densità di pixel. Uno sfondo con immagine richiede una richiesta a parte, va decodificato prima di essere disegnato e deve essere abbastanza grande per schermi ampi e ad alta densità.

Quindi per sfondi semplici e moderatamente a più livelli, il CSS vince sempre nel caricamento. Le immagini hanno ancora senso quando lo sfondo è davvero complesso, come un gradiente mesh pittorico con molti punti di colore o una texture fotografica. Allora il compromesso è peso del file in cambio di ricchezza visiva, e spesso ne vale la pena.

Disegno: cosa costa un gradiente sullo schermo

Per mostrare un gradiente, il browser calcola un colore per ogni pixel che copre: è il disegno. Il lavoro cresce con l’area dipinta, il numero di livelli di gradiente sovrapposti e gli effetti applicati sopra. Per uno sfondo statico accade una volta, e il risultato viene riusato mentre scorri o interagisci, a meno che qualcosa lo invalidi.

I rischi veri: sfocatura, sfondi fissi e animazione

Grandi sfocature. filter: blur() e backdrop-filter campionano molti pixel circostanti per ogni pixel, e il lavoro cresce sia con il raggio della sfocatura sia con l’area. Un gradiente sfocato dipinto una volta di solito va bene. Un backdrop-filter su contenuto che scorre sotto deve essere ricalcolato mentre quel contenuto si muove, ed è qui che le interfacce glassmorphism tendono a scattare sui telefoni modesti.

Sfondi fissi. background-attachment: fixed mantiene fermo uno sfondo mentre la pagina scorre, il che può costringerlo a ridisegnarsi a ogni passo di scorrimento. Se vuoi un gradiente che resta fermo, un elemento con position: fixed dietro il contenuto di solito costa meno, perché il browser può muoverlo come livello separato.

Animazione. Spostare background-position o animare i punti di colore tramite @property ridisegna l’elemento a ogni fotogramma. Su un pulsante è banale. Su un hero a schermo intero è un lavoro continuo finché la pagina è aperta, che si traduce in calore e consumo di batteria sui telefoni.

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

La guida ai gradienti animati in CSS ha l’insieme completo di tecniche, dalla più economica alla più flessibile.

Livelli e will-change

Promuovere un elemento a un livello proprio del compositore, con will-change: transform o un’animazione di trasformazione attiva, è ciò che rende possibile un’animazione economica. Non è gratis: ogni livello tiene la propria bitmap nella memoria grafica, circa larghezza × altezza × 4 byte in pixel del dispositivo. Un livello sovradimensionato per lo sfondo di un hero va bene. Decine di schede promosse, ciascuna con il proprio livello di gradiente, possono usare più memoria di quanto risparmino in tempo di disegno. Aggiungi will-change agli elementi che si animano davvero, non come regola generale.

Come misurare le prestazioni di un gradiente

1. 1

   Attiva l’evidenziazione del disegno

   Negli strumenti per sviluppatori di Chrome, apri il pannello Rendering e attiva Paint flashing. Tutto ciò che lampeggia in verde mentre nulla dovrebbe cambiare si sta ridisegnando.

2. 2

   Registra una traccia Performance

   Registra qualche secondo di scorrimento o di animazione a riposo nel pannello Performance. Guarda quanta parte di ogni fotogramma va al disegno e se cadono dei fotogrammi.

3. 3

   Rallenta la CPU

   Usa la limitazione della CPU del pannello Performance per simulare un dispositivo più lento. Un hero fluido su un portatile veloce può faticare su un telefono di fascia media.

4. 4

   Controlla il pannello Layers

   Vedi quanti livelli del compositore esistono e quanta memoria usano. Un numero inaspettato di livelli di solito significa che will-change è usato troppo.

5. 5

   Prova il dispositivo vero

   Finisci su un telefono vero. Calore e consumo di batteria dovuti a un’animazione costante sono facili da non notare su un desktop.

La guida di web.dev alle prestazioni di rendering spiega la pipeline dietro questi strumenti: stile, layout, disegno e composizione. Sapere quale fase innesca il tuo gradiente ti dice se costa poco.

Una checklist sulle prestazioni per i gradienti

• Usa gradienti CSS per sfondi semplici e a più livelli; immagini solo quando l’aspetto le richiede davvero.
• Tieni modesti i raggi di sfocatura ed evita backdrop-filter su grandi aree che scorrono.
• Sostituisci background-attachment: fixed con un livello a posizione fissa.
• Anima transform o opacity, non background-position, sulle aree grandi.
• Le animazioni lente e ambientali possono fermarsi del tutto per chi preferisce il movimento ridotto.
• Aggiungi la grana come piccola immagine ripetuta, non come filtro SVG dal vivo su un grande elemento; vedi la texture di rumore in CSS.
• Misura prima e dopo con l’evidenziazione del disegno e una registrazione Performance.