# Prestazioni dei gradienti CSS: rallentano un sito?

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

Un gradiente CSS statico è quasi gratis. I costi vengono da ciò che si fa con i gradienti: sfocature enormi, sfondi che si ridisegnano durante lo scorrimento e animazioni che non finiscono mai. Ecco come distinguere.

## The short version

- Un gradiente CSS statico costa quasi nulla da caricare, perché è una riga di testo e non un file da scaricare e decodificare.
- I gradienti costano tempo di disegno, che cresce con l’area dipinta e il numero di livelli, ma un gradiente statico viene dipinto una volta e poi riusato.
- I veri rischi per le prestazioni sono i grandi filtri di sfocatura, gli sfondi che si ridisegnano durante lo scorrimento e le animazioni di gradiente che ridisegnano a ogni fotogramma.
- Animare transform o opacity su un livello di gradiente è di solito molto più economico che animare background-position o i punti di colore.
- L’unica risposta affidabile per una pagina specifica è misurarla, con l’evidenziazione del disegno e una registrazione Performance negli strumenti per sviluppatori del browser.

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

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

Questo intero sfondo, a qualsiasi dimensione, costa meno di una frase di testo da caricare.

| Sfondo | Download | Memoria decodificata a 1920×1080 |
| --- | --- | --- |
| Gradiente CSS | Poche decine di byte nel tuo CSS | Nessuna bitmap da conservare; dipinto quando serve |
| Immagine compressa (AVIF, WebP, JPEG) | Un file separato, spesso da decine a centinaia di kilobyte | Circa 8,3 MB (larghezza × altezza × 4 byte) |
| Stessa immagine a 3840×2160 per un 4K nitido | Ancora più grande | Circa 33 MB |

Le immagini decodificate vengono tenute come bitmap complete, qualunque sia la dimensione del file. Le cifre di memoria sono semplice aritmetica: pixel per quattro byte.

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](https://gradiently.design/it/guide/css-mesh-gradient) 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.

### Dipinto una volta

- Un gradiente statico su una scheda o un hero
- Più bagliori radiali sovrapposti che non si muovono
- Una texture di rumore ripetuta sopra un gradiente
- Un bordo a gradiente disegnato con gli sfondi

### Dipinto più e più volte

- Animare `background-position` o i punti di colore
- `background-attachment: fixed` durante lo scorrimento
- Sfocatura `backdrop-filter` su contenuto in movimento
- Un elemento con un gradiente che cambia dimensione di continuo

## 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](https://gradiently.design/it/guide/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.

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

Due hero animati. Il secondo anima `transform`, che i browser di solito gestiscono sul compositore senza ridisegnare.

La guida ai [gradienti animati in CSS](https://gradiently.design/it/guide/css-animated-gradient) 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.

| Schema | Lavoro del browser | Alternativa più economica |
| --- | --- | --- |
| `background-position` animato su un hero | Ridisegno a ogni fotogramma | `transform` su un livello di gradiente sovradimensionato |
| `background-attachment: fixed` | Ridisegno durante lo scorrimento | Un livello di gradiente `position: fixed` dietro il contenuto |
| `backdrop-filter` su contenuto che scorre | Sfocatura ricalcolata mentre il contenuto si muove | Un livello statico già sfocato, o un’area sfocata più piccola |
| Filtro di rumore SVG dal vivo su un grande elemento | Il filtro passa su ogni pixel ridisegnato | Una piccola immagine di rumore ripetuta |
| `will-change` su ogni scheda | Molti livelli tenuti in memoria grafica | `will-change` solo su ciò che si anima |

Schemi di gradiente comuni, cosa fanno fare al browser e il modo più leggero di ottenere lo stesso aspetto.

## Come misurare le prestazioni di un gradiente

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. **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. **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. **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. **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](https://web.dev/articles/rendering-performance) 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](https://gradiently.design/it/guide/reduced-motion).
- Aggiungi la grana come piccola immagine ripetuta, non come filtro SVG dal vivo su un grande elemento; vedi la [texture di rumore in CSS](https://gradiently.design/it/guide/css-noise-texture).
- Misura prima e dopo con l’evidenziazione del disegno e una registrazione Performance.

## FAQ

### I gradienti CSS rallentano un sito?

Quelli statici no, in modo percepibile. Non richiedono download e vengono dipinti una volta. A costare in prestazioni sono grandi sfocature, sfondi fissi e animazione costante.

### Un gradiente CSS è più veloce di un’immagine di sfondo?

Di solito sì. Un gradiente è fatto di poche decine di byte di CSS, senza richieste né decodifica, mentre un’immagine richiede un download e viene tenuta in memoria come bitmap completa.

### I gradienti animati fanno male alle prestazioni?

Animare `background-position` o i punti di colore ridisegna a ogni fotogramma, e conta sulle aree grandi. Animare `transform` o `opacity` su un livello di gradiente di solito costa molto meno.

### Perché il mio sfondo a gradiente sfocato è lento?

La sfocatura campiona molti pixel vicini per ogni pixel, quindi il costo cresce con raggio e area. Il caso peggiore è `backdrop-filter` su contenuto che scorre o si anima.

### Come controllo se il mio gradiente si sta ridisegnando?

Attiva Paint flashing nel pannello Rendering degli strumenti per sviluppatori di Chrome. Le aree che continuano a lampeggiare a pagina ferma si stanno ridisegnando.