Quali tecniche — vetro sfocato, temi scuri, bagliori — costano davvero in prestazioni e quali sono quasi gratis, come si scrive l'utility che le rende riusabili, e la vetrina dal vivo qui sotto, non uno screenshot.
di Nadia Maar ·
Un marchio D2C vende anche con l'aspetto, prima ancora che con il prodotto: due secondi di occhiata decidono se l'interfaccia dice «prezzo giusto» o «sconto permanente», e quella decisione si prende prima di leggere una sola parola. Il problema è che le tecniche che comunicano quella sensazione — vetro sfocato, temi scuri profondi, bagliori — hanno la reputazione di essere pesanti, ed è un blog che ha appena pubblicato un pezzo intero sui millisecondi persi a non poter far finta che quella reputazione sia infondata.
È in parte vera e in parte no, ed è proprio la parte «in parte» che vale la pena separare: alcune di queste tecniche costano quasi nulla — un bagliore è un'ombra colorata, non un'animazione — e altre costano davvero, in un modo che si sente scorrendo la pagina su un telefono di fascia media. Confonderle vuol dire o rinunciare all'estetica per paura, o pagarla senza saperlo.
Questo pezzo separa le due categorie, mostra il codice dell'utility che rende la tecnica riusabile invece di ripetuta a mano su ogni componente, e — invece di uno screenshot, che sarebbe la stessa prova fabbricata che l'articolo sulla velocità rifiuta — una vetrina che si può guardare dal vivo qui sotto.
La proprietà CSS dietro al vetro sfocato — `backdrop-filter: blur()` — chiede al browser di sfocare in tempo reale tutto quello che sta dietro l'elemento, ad ogni fotogramma in cui quell'elemento è visibile. Su un pannello fisso, il costo si paga una volta e basta. Sullo stesso pannello dentro una lista che scorre veloce, il browser lo ricalcola ad ogni fotogramma dello scroll, ed è lì che «elegante» diventa «impuntato» su un telefono di fascia media.
| Tecnica | Costo reale | Quando è quasi gratis | Quando pesa |
|---|---|---|---|
| Bagliore (box-shadow colorata) | Trascurabile | Sempre — è un'ombra, il browser la calcola una volta per stato | Mai, a meno di animarla ad ogni fotogramma con un colore diverso |
| Vetro sfocato (backdrop-filter) | Medio-alto | Su elementi fissi: header, modali, pannelli che non scorrono | Dentro liste che scorrono veloci, o ripetuto su decine di card nella stessa vista |
| Tema scuro profondo | Nullo | Sempre — è solo una palette di colori diversa | Mai: non esiste un costo di rendering per un colore più scuro di un altro |
| Sfondo animato (gradiente in movimento) | Basso-medio | Se limitato a `transform` e `opacity`, che la GPU gestisce senza ridisegnare | Se anima proprietà che costringono il browser a ricalcolare il layout ad ogni fotogramma |
| Video di sfondo nell'hero | Alto | Quasi mai, a meno di un file già compresso e con priorità di caricamento bassa | Quasi sempre — è la prima cosa che allunga il primo disegno della pagina |
Se la tecnica riguarda un COLORE o un'OMBRA statica, è gratis. Se riguarda una SFOCATURA che deve aggiornarsi mentre qualcosa si muove sotto — scroll, animazione, video — ha un costo reale, e va limitata a superfici che restano ferme mentre l'utente scorre.
Il modo sbagliato di applicare queste tecniche è ripetere le stesse cinque proprietà su ogni componente che deve sembrare «di vetro» — un bordo leggermente chiaro, un'ombra interna, la sfocatura, il colore di sfondo trasparente. Il modo che si mantiene è un'unica utility, definita una volta, applicata con una classe.
import type { Config } from "tailwindcss"
import plugin from "tailwindcss/plugin"
export default {
theme: {
extend: {
boxShadow: {
// Il bagliore: un'ombra colorata, non un effetto — costo quasi zero.
"glow-magenta": "0 0 24px rgba(255,79,216,0.35), 0 0 64px rgba(255,79,216,0.15)",
},
},
},
plugins: [
plugin(({ addUtilities }) => {
addUtilities({
".glass": {
"background-color": "rgb(255 255 255 / 0.08)",
"backdrop-filter": "blur(20px) saturate(140%)",
"border": "1px solid rgb(255 255 255 / 0.18)",
// will-change avvisa il browser PRIMA che l'elemento si muova:
// senza, il primo fotogramma dopo un cambio di stato può scattare.
"will-change": "backdrop-filter",
},
})
}),
],
} satisfies Config«glass» diventa una classe come qualunque altra utility Tailwind — className="glass rounded-2xl p-6" — invece di cinque proprietà incollate a mano su ogni pannello che deve sembrare vetro, con la certezza che cambino tutte insieme il giorno in cui si decide di scurirlo o alleggerirlo.
Un articolo che parla di aspetto e lo mostra con un'immagine sta chiedendo di credergli sulla parola. Qui sotto non c'è un'immagine: è la stessa tecnica descritta sopra, resa con lo stesso CSS, tre varianti fra cui passare toccando le schede. «Piatto» è il controllo — né vetro né neon — per vedere la differenza invece di leggerla.
Anteprima prodotto · D2C
Trecento pezzi numerati, spedizione inclusa. Le ultime 40 unità.
Vetro e neon comunicano «premium» in modi diversi — il primo suggerisce eleganza discreta, il secondo urgenza ed energia — e la scelta dipende dal posizionamento del marchio, non da quale sia oggettivamente migliore. «Piatto» non è un fallimento: per un prodotto industriale o B2B è spesso la scelta più credibile delle altre due.
Non tutte le tecniche premium valgono lo stesso sforzo di implementazione rispetto a quanto restituiscono in percezione. Il bagliore costa dieci minuti e si nota subito; un sistema di temi scuri coerente su tutto il sito costa una settimana e si nota altrettanto; un sistema di particelle animate nello sfondo costa un mese e la maggior parte dei visitatori non lo registra consapevolmente, lo sente solo come «un sito lento».
| Sforzo di implementazione | Impatto percepito | Tempo di implementazione | Costo in prestazioni | |
|---|---|---|---|---|
| Bagliore sui bottoni chiave | 8 | 72 | ~10 minuti | nessuno |
| Tema scuro coerente | 55 | 85 | ~1 settimana | nessuno |
| Vetro su pannelli fissi | 30 | 65 | ~2 giorni | trascurabile |
| Vetro su liste che scorrono | 32 | 28 | ~2 giorni | medio-alto |
| Video hero in autoplay | 88 | 30 | ~1 mese | alto |
Il quadrante che conviene
Il range sul tasso di aggiunta al carrello è un intervallo osservato su progetti diversi, non una promessa: dipende dal prodotto, dal pubblico, e da che cosa state confrontando. Chi promette una percentuale precisa senza aver visto il vostro sito sta inventando, non misurando.
Se avete un'interfaccia che sentite «generica» e non sapete se il problema è l'estetica o le prestazioni, mandatecela: in mezz'ora separiamo le due cose e diciamo quali tre interventi costano meno e rendono di più per il vostro caso specifico.
Se il vostro pubblico è tecnico o B2B e non D2C, ve lo dico: il vetro e il neon spesso non sono la scelta giusta — un'interfaccia «piatta» ben fatta comunica affidabilità meglio di qualunque bagliore. La tecnica giusta dipende da chi guarda, non da quale sia più impressionante.
Dipende da dove si usa, non dalla tecnica in sé. Su un elemento fisso — header, modale, pannello che non scorre — il costo si paga una volta e resta trascurabile. Dentro una lista che scorre veloce, il browser ricalcola la sfocatura a ogni fotogramma dello scroll, ed è lì che il costo si sente davvero su un telefono di fascia media.
Un tema scuro coerente ha costo di rendering zero — è solo una palette di colori diversa. Un bagliore (glow) è un'ombra colorata statica, non un'animazione, e costa una riga di CSS. Le tecniche costose sono quelle che devono aggiornarsi mentre qualcosa si muove sotto: sfocature durante lo scroll, video di sfondo, gradienti animati con proprietà che forzano il ricalcolo del layout.
Con una utility definita una volta in tailwind.config — una classe come .glass che raggruppa background trasparente, backdrop-filter e bordo — invece di incollare le stesse cinque proprietà su ogni pannello. Il vantaggio si vede il giorno in cui si decide di scurire o alleggerire l'effetto: cambia in un punto solo.
Nella pratica sì, in una misura che varia molto per prodotto e pubblico — non un numero garantito da nessun fornitore che non abbia visto il vostro sito. Per un pubblico B2B o tecnico, un'interfaccia «piatta» ben fatta comunica spesso più affidabilità di vetro o neon: la tecnica giusta dipende da chi guarda, non da quale sia più impressionante.