Minificar archivos CSS offline
11 comentariosUna de las tareas recomendables en el proceso de optimización de un sitio web es la minificación de los archivos CSS —y otros como js—. Este proceso disminuye el tamaño de los archivos y por tanto el paquete HTTP viaja más rápido (duh!). Muchos piensan que un milisegundo no implica nada y acaban yerrando, sí importan, varios milisegundos de espera pueden espantar a potenciales lectores/clientes.
clean-css es una biblioteca de Node.js para la minificación de archivos CSS y que de acuerdo con las pruebas realizadas, es una de las más eficientes.
A groso modo el proceso de minificación consiste en la eliminación de elementos superfluos del código CSS tales como comentarios, espacios en blanco, puntos y comas al final del valor de la última propiedad de cada declaración, entre otros, es por esto que también se le conoce como uglify o afear el códido por ejemplo: css de este blog.
Como es una biblioteca de Node.js es necesario instalarlo, en mi caso uso Arch Linux, asumo que en el resto de las distribuciones sea algo simple.
# pacman -S nodejsPosteriormente instalar clean-css:
# npm install -g clean-cssSi la conexión se hace detrás de un proxy es necesario especificarlo en la configuración de Node.js
# npm config set proxy http://[usuario]:[contraseña]@proxy.dominio.tld:puerto/Si el ISP permite solamente ciertos useragents entonces es necesario añadirlos también:
# npm config set user-agent useragentEl proceso de minificación es bien sencillo:
cleancss [opciones] archivo-original -o archivo-minificadoPor ejemplo, el style.css original de este blog ocupa un tamaño de 23.3KB en disco duro y 16.1KB minificado (do the math yourself), en conjunto con la compresión GZIP prácticamente vuela.
Nota: para aquellos que no puedan usar clean-css offline o simplemente quieran evitarse la terminal, es posible minificar los archivos CSS a través del servicio gratuito de refresh-sf.
Pues yo uso django-compressor, que crea un solo archivo caché para los CSS y JS, o para la combinación de estos que estimes conveniente. Más info en: https://github.com/django-compressor/django-compressor/
Pero, pero, ¿caché?
De todos modos he probado varios compresores y clean-css es el que más me ha gustado.
Ellos lo explican mejor que yo, django-compressor es muy versátil: http://django-compressor.readthedocs.org/en/latest/settings/
BTW, Node es un de mis asignaturas pendientes. Y no soy de los que comenta mucho mi código, pero si me encanta leer el ajeno, cleancss no es precisamente muy agradable en cuanto a estas cosas, como dice el Zen de Python: Readability counts.
Dude, el original siempre lo mantengo precisamente para esto, la intención de la entrada es para poner el CSS en producción y optimizar no para que tú leeas mis líneas comentadas, jajaja. De todos modos es posible mantener los comentarios y otras cosas. (
cleancss -h)Guess what? PyCharm organiza el código que sea y queda de lo más simio.. o mono da igual.
Optimización, optimización, para la minificación de archivos CSS gana css-clean, además, la intención no es organizar ni hacer legible el código, más bien lo contrario, siempre para hacerlo lo más pequeño posible.
No quiero ni imaginarme como seria el dilema de alguien que intente modificar tu theme …. de mirar ese codigo CSS ya me da dolor de cabeza
En el tema incluyo un (style.src.css) precisamente para eso, me parece que no me hice entender en la entrada ni en los comentarios (¿leíste bien todo?).
Pues yo cojo Sublime Text, selecciono todo el texto y le doy Ctrl+J.. y a salir pitando :D
Bueno, es algo parecido pero no minifica al máximo, con clean-css se ahorran unos cuantos bytes más y lo hace más rápido. Compara el tamaño de un archivo CSS minificado con clean-css con uno hecho con Sublime.