Riduci le dimensioni del tuo CSS
Ogni byte di CSS deve essere scaricato e analizzato prima che una pagina possa essere renderizzata, quindi fogli di stile più leggeri significano un first paint più rapido, Core Web Vitals migliori e un minor consumo di dati mobili. Questo minificatore CSS rimuove spazi vuoti e commenti e applica ottimizzazioni strutturali — unendo regole duplicate, accorciando i colori, rimuovendo valori ridondanti — in modo che il tuo foglio di stile diventi il più piccolo possibile senza alterare l'aspetto della pagina.
Funzionalità
- Rimozione di spazi vuoti e commenti.
- Abbreviazione dei valori: colori, zeri, unità di misura e spessore dei font.
- Ottimizzazione strutturale: unisce i selettori duplicati e rimuove le dichiarazioni sovrascritte.
- Commenti di licenza (
/*! … */) mantenuti su richiesta. - Confronto delle dimensioni in byte e in percentuale.
- Privato: viene eseguito interamente nel tuo browser.
Prima e dopo
.card .title {
font-weight: bold;
color: #333333;
}
.card .title {
font-size: 1.25em;
}
diventa
.card .title{font-weight:700;color:#333;font-size:1.25em}
Quando minificare
Minifica il CSS come parte della tua build per la produzione e mantieni il codice sorgente leggibile nel controllo di versione. La maggior parte dei framework e dei bundler lo fa automaticamente; questo strumento è comodo per correzioni rapide, temi per CMS, template di email, widget incorporati e progetti senza una fase di build.
Strumenti correlati
Minifica gli script con il Minificatore JavaScript, crea stili visivamente con il Generatore di Box Shadow e il Generatore di Gradienti CSS, oppure formatta il JSON con il Formattatore JSON.