Conseguir disminuir el peso de una página web y con ello, mejorar el
tiempo de carga de la misma es esencial si queremos conseguir un buen
posicionamiento orgánico (SEO) y queremos conseguir una experiencia de usuario adecuada que genere tasas de conversión aceptables.
Para ello, es indispensable llevar a cabo una serie de modificaciones en el código de nuestra web, para hacerla más ligera, pero sin que pierda ninguna de sus funcionalidades. Uno de los recursos que tenemos a nuestra disposición es
minificar los archivos CSS, HTML y JS. En este artículo vamos a poner énfasis a modo de ejemplo en la minifcación de archivos CSS.
Cuando nos referimos a Minify, o minificar en castellano, hacemos referencia a la compresión del peso de un archivo CSS mediante la eliminación de caracteres innecesarios sin modificar la funcionalidad del archivo, es decir, sin alterar la manera en la que los navegadores procesan este archivo y, en consecuencia, la visualización del portal.
Algunos ejemplos de este proceso serían la eliminación de saltos de línea, eliminación de espacios, eliminación de código que no se usa, entre otros.
Ejemplos Minify
A continuación, mostramos un ejemplo muy sencillo de un archivo CSS con contenido minificado y sin minificar.
Ejemplo de Código CSS SIN minificar
.button1 {
color: #000000;
background-color: blue; #5F9EA0;
margin-bottom: 2%;
padding-top: 5%;
border:5px red; }
Ejemplo de Código CSS minificado
.button1{color: #000000;background-color: blue; #5F9EA0;margin-bottom: 2%;padding-top:5%; border:5px red;}
Como podemos observar, lo que se ha hecho es comprimir la información eliminando espacios y saltos de línea. Este “simple” proceso conlleva una mejora en el tiempo de ejecución del archivo CSS, pero tiene una pega: la pérdida de legibilidad. Cuando estamos modificando o desarrollando un sitio web es recomendable no minificar los archivos CSS con tal de poder acceder a la información de forma más rápida y eficaz para su modificación. Una vez terminado el proyecto es cuando procedemos a minifcar los archivos CSS.
¿Cómo saber si mi web cuenta con archivos CSS minificados?
Como era de esperar, existen herramientas gratuitas para comprobar si los archivos de nuestra página web están minificados. Unas de las más populares son
Google PageSpeed Insights y
GT Metrix, que nos mostrarán, entre otras variable, si todos, algunos o ninguno de nuestros archivos CSS están minificados, indicándolos uno por uno.
Herramientas para minificar (Minify)
Como no podía ser de otra forma, existen diferentes herramientas online que permiten minifcar los archivos CSS de forma automática. Algunas de ellas permiten incluso modificar el grado de compresión del archivo CSS.
Csscompressor.com: esta herramienta es bastante sencilla de usar y además cuenta con opciones algo más avanzadas. Su uso es sencillo, debemos pegar el código CSS en el recuadro con título “CSS Source Code Input: ” y a continuación definir variables avanzadas como es el nivel de compresión deseado del archivo.
Cssminifier.com: una herramienta muy sencilla y fácil de utilizar. Sólo debes pegar el código del archivo CSS que se desea minificar en el apartado “input CSS” y a continuación presionar el botón “Minify”. El código minifcado aparece en el recuadro “Minified Output”. La herramienta permite copiar o bien generar y descargar directamente el archivo CSS minificado.
El concepto Minify o minifación es sencillo y fácil de comprender, pero no tanto su ejecución, ya que fácilmente podemos eliminar funcionalidades o modificar si querer la visualización del portal, provocando con ello graves problemas de usabilidad, entre otros.
