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

En este Tutoriales En Linea les mostraremos algunas herramientas online que hemos podido encontrar para optimizar nuestros 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 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, por ejemplo. haciéndose cargo de las funciones de jаvascript.


Es común que algunas plantillas de sistemas de Datalife Engine 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:

• 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.
• 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.
• 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 }
• Evita demasiadas especificaciones. Si las etiquetas específicas ya están incluidas en un documento (por ejemplo: en una lista), no es necesario repetirlas.
• Usa colores con la notación hexadecimal (HEX) en lugar de RGB.
• 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.
• 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

Para aquellos que no deseen optimizar el código CSS de forma manual, existen varias herramientas 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 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 “ 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.comy 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 por ejemplo: 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 jаvascript”, junto con información sobre el tamaño de entrada y salida del archivo CSS, así como el porcentaje de minimización alcanzado.

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 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 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.
PD:// Por mas que he buscado en la red para optimizar mi css creo que esta dos opciones viene siendo las mas acertadas, pero desde mi punto de vista no cumple con un 100% de optimizacion como yo esperaba... :(