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

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 Stylesheets, el servidor web tiene que acceder a ellas (donde está almacenado el contenido multimedia como fotos, videos, etc.) cada vez que se visita la web, lo que claramente tiene un impacto en los tiempos de carga. Entre más grandes y complejos son los archivos CSS, mayor será el tiempo que tendrá que esperar el visitante 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.

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, p. ej. 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 del 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. Combinar 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 Sylesheet.
  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 ser utilizado ú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. Reducir el código CSS mediante la eliminación de espacios innecesarios, líneas en blanco y comentarios. Se evitará también, por ejemplo, dejar espacios después de los dos puntos o el punto y coma, o eliminar el punto y la coma al final de una lista. Aunque el archivo CSS pierde su estructura y claridad, de esta forma será interpretado por el navegador más rápido.

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.

Herramientas para comprimir CSS online y offline

Para aquellos que no deseen optimizar el código CSS de forma manual, existen varias herramientas de aplicación online, así como programas offline que se encargan de comprimir los archivos CSS. 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 ser utilizada 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”. En el campo “Minified Output” aparecerá entonces el código minimizado y este se puede copiar de forma manual o descargarse a través de “Download as file”. 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 compimir 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. En “Show advanced options” tendrás un vistazo de las variables de optimización deseadas, como p. ej. colores (“Compress colors”) o eliminar espacios (“Remove unnecessary backslashes”). Pulsando el botón “Compress”, CSS Compressor iniciará 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.

Free CSS Toolbox

Free CSS Toolbox es un software gratuito para desarrolladores web que puede ser descargado en la web de Blumentals Software. Como su nombre lo indica, es una colección de herramientas que posibilitan, entre otras cosas, la modificación del formato o la validación de los códigos CSS. En el menú “CSS Formating Options” es posible seleccionar los parámetros CSS a ser optimizados y comenzar la compresión pulsando en “Re-Format Now”. Free CSS Toolbox minimiza el tamaño de los colores y elimina espacios, y los punto y coma al final de las numeraciones. El programa es ejecutable en todos los sistemas operativos Windows desde XP.

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

Entre 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 archivos CSS deben ser recuperados y enviados, por lo que comprimir el CSS es más que recomendado para cualquier web. En el mercado existen herramientas online, así como programas offline como los mencionados anteriormente, que le permiten a principiantes y expertos eliminar la información irrelevante de sus 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.

¿Le ha resultado útil este artículo?