Avanzato16 min

Performance CSS

Tecniche per scrivere CSS veloce: rendering, selettori efficienti e strategie di caricamento.

Performance CSS

CSS mal scritto può rallentare drasticamente il rendering. Capire come il browser elabora gli stili ti permette di scrivere codice più veloce e interfacce più fluide.

Il rendering pipeline

Il browser segue questi passaggi: Style > Layout > Paint > Composite. Ogni proprietà CSS impatta uno o più passaggi.

css

/* Costoso — triggera Layout + Paint + Composite */
.lento {
  width: 100px;
  top: 50px;
  left: 50px;
}

/* Performante — solo Composite */
.veloce {
  transform: translate(50px, 50px);
  opacity: 0.8;
}

content-visibility

Dice al browser di non renderizzare elementi fuori dallo schermo.

css

.sezione-lunga {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

will-change

Segnala al browser quali proprietà cambieranno, permettendo ottimizzazioni preventive.

css

.elemento-animato {
  will-change: transform, opacity;
}

/* Rimuovi dopo l'animazione */
.elemento-animato.fermo {
  will-change: auto;
}

Selettori efficienti

Il browser legge i selettori da destra a sinistra. Selettori troppo generici a destra rallentano il matching.

css

/* Lento — il browser cerca tutti i <a>, poi risale */
.header .nav .menu li a { }

/* Veloce — classe diretta */
.menu-link { }

Caricamento critico

Separa il CSS critico (above the fold) dal resto per accelerare il primo rendering.

●Anima solo transform e opacity per 60fps garantiti
●Usa content-visibility: auto per pagine lunghe
●Evita selettori con più di 3 livelli di annidamento
●Rimuovi il CSS inutilizzato con strumenti di purging