Minificatore CSS Gratuito: Comprimi e Ottimizza Codice CSS Online

Che cos'è un minificatore CSS?

Un minificatore CSS è uno strumento che riduce le dimensioni di un file CSS (Cascading Style Sheets) eliminando i caratteri di cui i browser non hanno bisogno. Rimuove commenti, spazi aggiuntivi e interruzioni di riga e abbrevia alcuni schemi comuni, senza modificare l'aspetto della pagina. Il risultato è un file più piccolo che il browser può scaricare ed elaborare più velocemente.

Come funziona la minificazione CSS

Gli sviluppatori web scrivono il CSS con commenti, rientri e righe vuote perché questi elementi rendono il codice più facile da leggere e modificare. I browser ignorano tutta questa formattazione. Un minificatore la elimina, insieme ad alcuni altri byte che non hanno alcuna funzione visiva, e lascia un file compatto destinato all'uso in produzione anziché alla modifica.

Questo strumento applica le seguenti modifiche:

• Rimuove i commenti. Ogni blocco /* ... */ viene eliminato.
• Riduce gli spazi vuoti. Le sequenze di spazi, tabulazioni e interruzioni di riga tra le regole vengono ridotte a nulla oppure a un singolo spazio quando lo spazio è significativo, ad esempio tra .parent e .child in un selettore discendente.
• Elimina gli spazi attorno alla punteggiatura. Gli spazi accanto a {, }, :, ; e , vengono rimossi.
• Rimuove i punti e virgola aggiuntivi. I punti e virgola ripetuti vengono ridotti a uno solo e il punto e virgola finale prima di una } di chiusura viene eliminato.
• Abbrevia i colori esadecimali. Un colore a sei cifre come #ffffff diventa #fff quando ogni coppia di cifre corrisponde, rispettivamente, al rosso, al verde e al blu. Un colore a otto cifre con alfa, come #ffaa00cc, viene abbreviato nello stesso modo quando tutte e quattro le coppie corrispondono.
• Rimuove l'unità dai valori di lunghezza pari a zero. 0px, 0em e 0rem diventano 0. I valori percentuali vengono lasciati invariati, perché 0% non è sempre intercambiabile con il semplice 0, ad esempio in un passaggio flex-basis o in un passaggio di @keyframes.
• Rimuove lo zero iniziale dai decimali. 0.5 diventa .5.

Per evitare di danneggiare il file, lo strumento lascia invariati tre tipi di contenuto: il testo tra virgolette, il valore all'interno di un url() senza virgolette e il contenuto di funzioni matematiche come calc(), clamp(), min() e max(). Gli spazi all'interno di calc(100% - 20px) sono importanti per il browser, quindi lo strumento li conserva esattamente.

Lo strumento non unisce selettori duplicati, non elimina i blocchi di regole vuoti e non converte i colori rgb() in esadecimali. Si tratta di ottimizzazioni valide che altri strumenti eseguono, ma questo minificatore si concentra sulle modifiche elencate sopra.

La formula della percentuale di riduzione

Lo strumento indica di quale percentuale si sono ridotte le dimensioni del file:

Entrambe le lunghezze vengono conteggiate in caratteri. Il risultato viene arrotondato a due cifre decimali.

Esempio di calcolo

CSS originale (193 caratteri):

Output minificato (129 caratteri):

Applicando la formula: (193 − 129) / 193 × 100 = 33,16%. Il commento è scomparso, così come i rientri e le interruzioni di riga; 0px è diventato 0 e #ffffff/#000000 sono diventati #fff/#000.

La percentuale esatta dipende dall'input. Un CSS scritto in modo compatto e con pochi commenti si riduce meno. Un CSS con molti commenti e rientri profondi può ridursi di più. I fogli di stile minificati con questo strumento presentano in genere una riduzione di circa 20%–40%.

Come usare questo strumento

1. Incollare il codice CSS nel campo di input a sinistra.
2. La versione minificata appare automaticamente a destra, senza dover premere alcun pulsante.
3. Controllare la percentuale di riduzione mostrata sopra l'output.
4. Selezionare "Copia negli appunti" per copiare il CSS minificato, quindi incollarlo in un file del progetto.
5. Selezionare "Cancella" per svuotare entrambi i campi e ricominciare.

Nessun contenuto digitato nello strumento viene inviato a un server; la minificazione viene eseguita nel browser.

Quando minificare il CSS

I team di sviluppo minificano comunemente il CSS come fase del processo di compilazione, usando strumenti come Webpack o script npm, in modo che la modifica avvenga automaticamente prima di ogni distribuzione. Il file sorgente leggibile e commentato rimane nel controllo versione; solo la build di produzione viene minificata. Tra gli usi comuni del CSS minificato rientrano:

• Siti web di grandi dimensioni, come i negozi online, dove un foglio di stile più piccolo comporta un caricamento più rapido della pagina.
• Applicazioni a pagina singola realizzate con framework come React o Vue, in cui il CSS viene incluso insieme a JavaScript.
• Pagine web per dispositivi mobili, dove è più probabile che gli utenti dispongano di una connessione più lenta.
• Email HTML, che spesso hanno limiti di dimensione rigidi.

Minificazione CSS e velocità della pagina

Un file CSS più piccolo viene scaricato ed elaborato più velocemente, riducendo il tempo necessario perché una pagina diventi visibile. Google ha dichiarato che la velocità della pagina è uno dei segnali utilizzati per il posizionamento nei risultati di ricerca, quindi una pagina più veloce può rappresentare uno dei molti fattori, di entità limitata, che influenzano il rendimento di un sito nei risultati di ricerca. La sola minificazione non garantisce una variazione del posizionamento; è una delle varie ottimizzazioni possibili, insieme alla compressione delle immagini e al tempo di risposta del server.

Minificatore CSS e formattatore CSS

Un minificatore comprime il codice per la produzione. Un formattatore fa l'opposto: prende il CSS compresso e lo riformatta con rientri e interruzioni di riga, così che possa essere nuovamente letto da una persona. Un formattatore non può ripristinare i commenti o i nomi originali delle variabili rimossi durante la minificazione, perché una volta eliminati quei dati non sono più disponibili.

Domande frequenti

Quanto si riduce il CSS dopo la minificazione? Con questo strumento, in genere da 20% a 40%, a seconda del numero di commenti, righe vuote e rientri presenti nel file originale. Un file con poca formattazione iniziale si riduce meno.

La minificazione CSS modifica l'aspetto della pagina? No. La minificazione rimuove soltanto i caratteri ignorati dai browser, come i commenti e gli spazi vuoti aggiuntivi, e riscrive alcuni valori equivalenti, ad esempio #ffffff in #fff. L'aspetto della pagina visualizzata rimane invariato.

Il CSS deve essere minificato durante lo sviluppo? No. Durante la scrittura e il debug del codice, è opportuno conservare la versione leggibile e commentata. Occorre minificare solo la copia destinata a un server di produzione, di solito come fase automatica del processo di compilazione.

È possibile riportare il CSS minificato al file originale? Un formattatore può riformattare il CSS minificato con rientri, ma non può recuperare i commenti eliminati né ripristinare nomi descrittivi che non erano presenti nella versione minificata. È consigliabile conservare il file sorgente originale.

Questo strumento converte i colori rgb() in esadecimali o unisce selettori duplicati? No. Abbrevia i colori esadecimali e rimuove i caratteri non necessari, ma non riscrive i valori rgb()/hsl() né unisce i selettori ripetuti. Alcuni altri minificatori eseguono questi passaggi aggiuntivi.

La minificazione equivale alla compressione gzip? No. La minificazione rimuove i caratteri non necessari direttamente dal codice sorgente. La compressione Gzip (o Brotli) viene applicata dal server web quando il file viene inviato, utilizzando un algoritmo distinto. L'uso combinato delle due tecniche produce il file più piccolo possibile sulla rete.