Cómo comprimir CSS y mejorar el rendimiento de una web

Un aspecto clave para optimizar el tiempo de carga de tu página web es la gestión eficiente de los archivos CSS. Aplicando técnicas de compresión y buenas prácticas, puedes mejorar notablemente el rendimiento, lo que se traduce en una carga más rápida y una mejor experiencia de usuario.

¿Qué significa CSS?

Cascading Style Sheets (en español “hoja de estilo en cascada”), más conocido por sus siglas CSS, es un lenguaje utilizado para habilitar el contenido web y facilitar la visualización de elementos como los colores y el diseño de una página web, que por lo general, deben ser definidos por separado. Los documentos HTML y XML contienen información únicamente sobre el contenido o la semántica de algunos de los componentes de una web, mientras que los recursos de diseño se encuentran por separado en los llamados archivos CSS. Si se utilizan las hojas de estilo, el servidor web tiene que acceder a ellas (donde está almacenado el contenido multimedia como fotos, vídeos, etc.) cada vez que se visita la web, lo que claramente tiene un impacto en los tiempos de carga.

Cuanto más grandes y complejos son los archivos CSS, mayor será el tiempo que tendrá que esperar el usuario para ver los contenidos de una web. Al comprimir el código del archivo CSS deseado, se reduce el tamaño de los archivos y, por lo tanto, se mejora el rendimiento de la web. Otra forma de mejorar los tiempos de carga es la llamada carga diferida o lazy loading, que consiste en cargar los archivos CSS solo cuando se necesitan. Esto reduce el tiempo de carga inicial, ya que no es necesario cargar todas las hojas de estilo de inmediato, sino únicamente cuando realmente hacen falta.

Las ventajas de comprimir CSS

El tiempo de carga de una página web es un factor fundamental, especialmente con el aumento en el uso de dispositivos móviles y conexiones de datos. Al mismo tiempo, las competencias del lenguaje CSS han ido creciendo, por ejemplo, haciéndose cargo de las funciones de JavaScript. Es común que algunas plantillas de sistemas de gestión de contenido como WordPress tengan que lidiar con datos CSS sobrecargados que frenan innecesariamente la creación de una página web. A continuación presentamos algunos consejos y trucos para comprimir tu CSS y acelerar la velocidad de carga de tu web:

1. Evita el uso excesivo de inline CSS, es decir, la inserción de código directamente en el archivo HTML, a excepción de la cabecera de la página. Lo mismo aplica para las etiquetas style usadas para personalizar determinadas características CSS.
2. Combina varios archivos CSS en un solo script PHP. De esta forma el cliente solo necesita recuperar un archivo, en vez de enviar y recuperar una solicitud HTTP por cada hoja de estilo. HTTP/2 permite actualmente gestionar varias solicitudes en paralelo de forma eficiente, lo que acelera la carga de archivos CSS individuales sin que sea estrictamente necesario combinarlos previamente.
3. En la medida de lo posible, utiliza la abreviación: body { margin: 20px 10px 5px 10px }, en lugar de formulaciones detalladas como: body { margin-top: 20px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px;}
4. Evita demasiadas especificaciones. Si las etiquetas específicas ya están incluidas en un documento (p. ej. en una lista), no es necesario repetirlas.
5. Usa colores con la notación hexadecimal (HEX) en lugar de RGB.
6. El selector universal “*” debe utilizarse únicamente cuando sea necesario. Usarlo implica una selección válida para cada elemento, por lo que el navegador debe recuperar la totalidad de los elementos que lo componen.
7. Reduce el código CSS eliminando espacios innecesarios, líneas en blanco y comentarios. Asimismo, evita, por ejemplo, dejar espacios después de los dos puntos o el punto y coma, o elimina el punto y la coma al final de una lista. Aunque el archivo CSS puede perder su estructura y claridad, de esta forma será interpretado por el navegador de forma más rápida.

Debido a que la minimización del código CSS puede llegar a ser complicada, siempre es recomendable crear copias de seguridad antes de realizar cualquier cambio. De esta forma, será más fácil realizar un seguimiento detallado de los cambios y corregir errores fácilmente.

Comprimir CSS online

Para aquellos que no deseen optimizar el código CSS de forma manual, existen varias herramientas gratuitas de aplicación online. La mayoría son instrumentos que ahorran el trabajo tedioso y eliminan eficazmente espacios adicionales, sangrías, comentarios y saltos de línea. Estas también permiten convertir el código de color. Una vez finalizado el proceso, el código puede ser descargado directamente como un archivo CSS, o puede copiarse y pegarse directamente. Te presentamos un resumen de tres de las aplicaciones más comunes:

CCS Minifier

La aplicación en línea CSS Minifier puede utilizarse directamente desde su página web. Una vez allí solo es necesario copiar el código CSS en el campo “Input CSS” e iniciar el proceso haciendo clic en “Minify” (Minimizar). El resultado aparecerá en el campo “Minified Output”, desde donde podrás copiarlo o descargarlo directamente. CSS Minifier elimina el punto y coma al final de las numeraciones y, acorta el código en todos los saltos de línea y espacios. La herramienta también convierte los códigos RGB en su variante hexagonal comprimida.

CSS Compressor

El CSS Compressor es una aplicación web que se diferencia del CSS Minifier en cuanto a las opciones que ofrece a la hora de comprimir el código CSS. El primer paso es dirigirse a la página csscompressor.com y copiar el código en el campo “CSS Source Code Imput”. Ahora puedes especificar el nivel de compresión. Puedes elegir entre cuatro opciones preconfiguradas, que varían según el nivel de legibilidad del CSS comprimido. A través de “Show advanced options” (Mostrar opciones avanzadas) puedes marcar manualmente las casillas de las optimizaciones que desees aplicar como, por ejemplo, la compresión de colores (“Compress colors”) o la eliminación de caracteres innecesarios (“Remove unnecessary backslashes”). Pulsa el botón “Compress” (comprimir) para que CSS Compressor inicie el proceso. Una vez finalizado, recibirás el resultado en el campo “Compressed JavaScript”, junto con información sobre el tamaño de entrada y salida del archivo CSS, así como el porcentaje de minimización alcanzado.

Compresor CSS de Gillmeister Software

El compresor CSS de Gillmeister Software es una herramienta gratuita para desarrolladores web que permite una compresión sencilla del código CSS. El compresor elimina automáticamente los espacios en blanco y el punto y coma final. También suprime los comentarios del código CSS. Según el fabricante, se puede lograr una reducción de hasta un 30 %.

Tiempos de carga más rápidos gracias a un CSS optimizado

Cuanto más grande y compleja sea la estructura de una página web o una tienda online, mayor será la dependencia de las llamadas hojas de estilo, que en la mayoría de los casos son archivos CSS. Con esto no es de extrañar que los tiempos de carga aumenten a medida que lo hace el código CSS. Cuando un usuario accede a una web a través de un cliente (navegador) todos los archivos CSS tienen que ser recuperados y enviados, por lo que comprimir el CSS es más que recomendado para cualquier web. En el mercado existen herramientas online que te permiten eliminar la información irrelevante de tus archivos CSS en solo unos minutos. Desafortunadamente, a pesar de que estas herramientas resultan de gran ayuda, para alcanzar el nivel máximo de optimización será necesario modificarlo manualmente o contratar a un profesional en el tema.