Minimitzador CSS Gratuït: Comprimeix i Optimitza Codi CSS en Línia

Què és un minificador de CSS?

Un minificador de CSS és una eina que redueix la mida d’un fitxer CSS (fulls d’estil en cascada) eliminant els caràcters que els navegadors no necessiten. Elimina els comentaris, els espais sobrers i els salts de línia, i escurça alguns patrons habituals, sense canviar l’aspecte de la pàgina. El resultat és un fitxer més petit que el navegador pot descarregar i analitzar més ràpidament.

Com funciona la minificació de CSS

Els desenvolupadors web escriuen CSS amb comentaris, sagnats i línies en blanc perquè aquests elements fan que el codi sigui més fàcil de llegir i editar. Els navegadors ignoren tot aquest format. Un minificador l’elimina, juntament amb uns quants bytes més que no tenen cap finalitat visual, i deixa un fitxer compacte pensat per a l’ús en producció i no per editar-lo.

Aquesta eina aplica els canvis següents:

Elimina els comentaris. S’elimina cada bloc /* ... */.
Redueix els espais en blanc. Les seqüències d’espais, tabuladors i salts de línia entre regles es redueixen a res, o a un sol espai quan aquest és significatiu (per exemple, entre .parent i .child en un selector descendent).
Elimina els espais al voltant de la puntuació. S’eliminen els espais al costat de {, }, :, ; i ,.
Elimina els punts i coma sobrers. Els punts i coma repetits es redueixen a un de sol, i s’elimina el punt i coma final abans d’un } de tancament.
Escurça els colors hexadecimals. Un color de sis dígits com #ffffff es converteix en #fff quan cada parella de dígits coincideix (vermell, verd i blau). Un color de vuit dígits amb alfa, com #ffaa00cc, s’escurça de la mateixa manera quan coincideixen les quatre parelles.
Elimina la unitat dels valors de longitud zero. 0px, 0em i 0rem es converteixen en 0. Els valors percentuals es mantenen, perquè 0% no sempre és intercanviable amb un simple 0 (per exemple, en un pas de flex-basis o d’@keyframes).
Elimina el zero inicial dels decimals. 0.5 es converteix en .5.

Per evitar que el fitxer es corrompi, l’eina deixa intactes tres tipus de contingut: el text entre cometes, el valor dins d’un url() sense cometes i el contingut de funcions matemàtiques com calc(), clamp(), min() i max(). Els espais dins de calc(100% - 20px) són importants per al navegador, de manera que l’eina els conserva exactament.

L’eina no combina selectors duplicats, no elimina blocs de regles buits ni converteix els colors rgb() a hexadecimals. Aquestes són optimitzacions vàlides que fan altres eines, però aquest minificador se centra en els canvis indicats més amunt.

La fórmula del percentatge de reducció

L’eina informa de quant s’ha reduït la mida del fitxer en forma de percentatge:

1reduction % = ((original length − minified length) / original length) × 100
2

Les dues longituds es compten en caràcters. El resultat s’arrodoneix a dues xifres decimals.

Exemple resolt

CSS original (193 caràcters):

1/* Navigation Styles */
2.nav-menu {
3  display: flex;
4  justify-content: space-between;
5  padding: 20px 0px;
6  background-color: #ffffff;
7}
8
9.nav-item {
10  margin-right: 15px;
11  color: #000000;
12}
13

Sortida minificada (129 caràcters):

1.nav-menu{display:flex;justify-content:space-between;padding:20px 0;background-color:#fff}.nav-item{margin-right:15px;color:#000}
2

Aplicant la fórmula: (193 − 129) / 193 × 100 = 33,16 %. El comentari ha desaparegut, el sagnat i els salts de línia també, 0px s’ha convertit en 0, i #ffffff/#000000 s’han convertit en #fff/#000.

El percentatge exacte depèn de l’entrada. El CSS escrit de manera compacta i amb pocs comentaris es redueix menys. El CSS amb molts comentaris i un sagnat profund es pot reduir més. Els fulls d’estil habituals minificats amb aquesta eina solen reduir-se aproximadament entre 20 % i 40 %.

Com s’utilitza aquesta eina

Enganxeu el codi CSS al quadre d’entrada de l’esquerra.
La versió minificada apareix automàticament a la dreta, sense haver de prémer cap botó.
Comproveu el percentatge de reducció que apareix damunt de la sortida.
Seleccioneu «Copy to Clipboard» per copiar el CSS minificat i, després, enganxeu-lo en un fitxer del projecte.
Seleccioneu «Clear» per esborrar els dos quadres i començar de nou.

No s’envia a cap servidor res del que s’escriu a l’eina; la minificació s’executa al navegador.

Quan cal minificar el CSS

Els equips de desenvolupament solen minificar el CSS com a pas del procés de compilació, amb eines com Webpack o scripts de npm, de manera que el canvi es faci automàticament abans de cada desplegament. El fitxer font llegible i amb comentaris es conserva al control de versions; només es minifica la compilació de producció. Alguns usos habituals del CSS minificat són:

Llocs web grans, com ara botigues en línia, on un full d’estil més petit permet que la pàgina carregui més ràpidament.
Aplicacions d’una sola pàgina creades amb frameworks com React o Vue, on el CSS s’empaqueta juntament amb el JavaScript.
Pàgines web per a mòbils, on és més probable que els usuaris tinguin una connexió lenta.
Correus electrònics HTML, que sovint tenen límits estrictes de mida.

La minificació de CSS i la velocitat de la pàgina

Un fitxer CSS més petit es descarrega i s’analitza més ràpidament, cosa que pot escurçar el temps que passa abans que una pàgina es faci visible. Google ha afirmat que la velocitat de la pàgina és un dels senyals que s’utilitzen per determinar la classificació en els resultats de cerca, de manera que una pàgina més ràpida pot ser un factor menor entre molts altres en el rendiment d’un lloc als resultats de cerca. La minificació per si sola no garanteix cap canvi en la classificació; és una optimització més entre diverses, com la compressió d’imatges i el temps de resposta del servidor.

Minificador de CSS i formatador de CSS

Un minificador comprimeix el codi per a la producció. Un formatador fa el contrari: pren el CSS comprimit i el reformata amb sagnats i salts de línia perquè una persona el pugui tornar a llegir. Un formatador no pot recuperar els comentaris ni els noms originals de les variables que s’han eliminat durant la minificació, perquè aquesta informació desapareix un cop s’ha suprimit.

Preguntes freqüents

Quant es redueix el CSS després de minificar-lo? Amb aquesta eina, normalment entre 20 % i 40 %, segons la quantitat de comentaris, línies en blanc i sagnat que tingui el fitxer original. Un fitxer que ja tingui poc format es reduirà menys.

La minificació del CSS canvia l’aspecte d’una pàgina? No. La minificació només elimina els caràcters que els navegadors ignoren, com ara els comentaris i els espais sobrers, i reescriu alguns valors equivalents (com #ffffff i #fff). La pàgina renderitzada es manté igual.

Cal minificar el CSS durant el desenvolupament? No. Manteniu la versió llegible i amb comentaris mentre escriviu i depureu el codi. Minifiqueu només la còpia que s’envia a un servidor de producció, normalment com a pas automàtic del procés de compilació.

Es pot tornar el CSS minificat al fitxer original? Un formatador pot reformatar el CSS minificat amb sagnats, però no pot recuperar els comentaris eliminats ni restaurar noms descriptius que mai no eren presents en la versió minificada. Conserveu el fitxer font original.

Aquesta eina converteix els colors rgb() a hexadecimals o combina selectors duplicats? No. Escurça els colors hexadecimals i elimina els caràcters innecessaris, però no reescriu els valors rgb()/hsl() ni combina selectors repetits. Alguns altres minificadors fan aquests passos addicionals.

La minificació és el mateix que la compressió gzip? No. La minificació elimina els caràcters innecessaris del codi font. La compressió gzip (o Brotli) l’aplica el servidor web quan envia el fitxer, mitjançant un algorisme diferent. Utilitzar totes dues tècniques produeix el fitxer més petit possible a través de la xarxa.