Disminuir el tiempo de descarga de nuestra aplicación web es un factor de interés, especialmente si deseamos una buena experiencia de usuario y buen posicionamiento SEO. Podemos empezar disminuyendo el tamaño del HTML generado y los archivos estáticos como: CSS, Javascript, imágenes, etc.
Se puede habilitar la compresión desde el mismo servidor, aunque esa opción no sea siempre una buena idea.
En este artículo presentaremos una utilería para hacer la compresión de archivos CSS de una forma muy simple y directa.
Instalando la utilería clean-css
La compresión de CSS se efectúa usando la herramienta clean-css. Debemos tener previamente instalado Node.js, que está disponible para Windows/Mac OSX/Linux, veala las instrucciones en: https://nodejs.org. Y luego instalar less desde la terminal con: npm install -g less
Para instalar Node.js en Windows sólo se debe descargar el archivo, que ya dispone un instalador para Windows. Al final de este artículo hay un enlace con las instrucciones para instalar Node.js en Mac.
La instalación de clean-css también se hace desde la terminal usando el comando:
npm install -g less-plugin-clean-css
Como hacer la compresión CSS
Si deseamos comprimir un archivo CSS cualquiera, por ejemplo ‘my_style.css’, se efectúa ejecutando el comando desde la terminal:
lessc --clean-css my_style.css my_style.min.css
La utilería clean-css es un plugin para el compilador de less (lessc), en consecuencia, también puede crear un archivo CSS comprimido a partir de una archivo fuente LESS.
Anteriormente, la compresión del CSS se hacía desde el propio compilador de LESS usando la instrucción:
lessc -x archivo_fuente.less archivo_comprimido.css, pero hoy con las actuales versiones del compilador de LESS ya no es posible.
Como vemos, comprimir archivos CSS es muy simple usando la utilería clean-css. Hay muchas más opciones que podemos usar con clean-css, por ejemplo:
lessc --clean-css="--compatibility=ie8 --advanced" my_style.css my_style.min.css
Podemos examinar más opciones desde el repositorio del proyecto en GitHub: https://github.com/jakubpawlowicz/clean-css
Usando clean-css en un proyecto Node.js
clean-css se puede cargar como módulo en un proyecto de Node.js, simplemente usando la instrucción:
var clean_css = require("clean-css");
//
// para aplicar clean sobre un contenido CSS,
// se usa el método minify:
//
var css_compress = new clean_css().minify(content_css).styles;
Enlaces de Interés
- Instalar Node.js en Linux/Mac: http://www.nodehispano.com/2011/11/como-instalar-node-js-en-mac-os-x-lion-nodejs/
- Usando LESS para crear el CSS: http://lesscss.org
