En algunas herramientas de WPO nos recomiendan que minifiquemos el código CSS de nuestro sitio web. Los ficheros CSS tienen un determinado tamaño y una determinada legibilidad, si el código se puede leer de forma fácil nos permitirá hacer cambios el los estilos de nuestro sitio web de forma más cómoda y sencilla.

Conocemos algunas herramientas minificadoras o también conocidos como Minify que nos permitirán reducir el tamaño de nuestros archivos CSS de forma considerable.

¿Cómo puedo reducir el tamaño del CSS?

Para reducir el tamaño de nuestro fichero CSS tendremos que seleccionar todo el fichero a reducir o llevar el código de la hoja estilos CSS a cualquier herramienta minificadora. Estas herramientas reducirán el tamaño del fichero CSS a través de la eliminación de espacios, saltos de línea, agrupando todo el código… Sin embargo, este código una vez esté comprimido será menos legible.

Antes de comprimir el código, te recomiendo que hagas una copia del fichero sin comprimir y si algo se viera mal en tu sitio web podrías volver a la situación inicial fácilmente. Esto es un consejo que como consultor SEO te podrá evitar que tu web no se vea correctamente después de minificar el código CSS de tu sitio web.

Ejemplo de código CSS sin minificar

En este código de ejemplo veremos la apariencia del archivo de estilos antes de ser comprimido por cualquier minify.

#principal {
  background-color: green;
  color: white;
  padding: 10px;
  margin: 23px;
  border:10px solid white;
}

Ejemplo de código CSS minificado

En este ejemplo podremos ver la apariencia del archivo CSS una vez comprimido y minificado.

#principal{background-color:green;color:#fff;padding:10px;margin:23px;border:10px solid #fff}

En el caso que no tengas el fichero con el código original (esto no es una buena práctica, siempre recomiendo hacer una copia con el código original) y quieras volver a tener el código legible, podemos utilizar la herramienta CSS beauty.

La herramienta CSS beauty o CSS beautifier nos ayudará a dejar el código previamente minificado en un estado legible. Sería el proceso contrario a la minificación del código.

Herramientas para minificar CSS

Podremos encontrar varias herramientas que cumplan esta función y nos ayuden a minificar el código CSS de nuestro sitio web.

HerramientaFuncionalidadCaracterísticas principales
CSS minifierOnlineHerramienta muy sencilla de utilizar.
CSS CompressorOnlineHerramienta muy intuitiva donde podrás seleccionar el grado de compresión.