sudo: Jack of all trades, master of some

Minificar archivos CSS offline

11 comentarios

Una 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 nodejs

Posteriormente instalar clean-css:

# npm install -g clean-css

Si 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 useragent

El proceso de minificación es bien sencillo:

cleancss [opciones] archivo-original -o archivo-minificado

Por 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.

Comentarios desactivados
  1. 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/

    1. @Ozkar

      Pero, pero, ¿caché?
      De todos modos he probado varios compresores y clean-css es el que más me ha gustado.

      1. @oneohthree

        Ellos lo explican mejor que yo, django-compressor es muy versátil: http://django-compressor.readthedocs.org/en/latest/settings/

  2. 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.

    1. @Ozkar

      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)

      1. @oneohthree

        Guess what? PyCharm organiza el código que sea y queda de lo más simio.. o mono da igual.

        1. @Ozkar

          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.

  3. Hyuuga_Neji 5 años atrás

    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

    1. @Hyuuga_Neji

      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?).

  4. Pues yo cojo Sublime Text, selecciono todo el texto y le doy Ctrl+J.. y a salir pitando :D

    1. @elav

      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.