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:
- 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 (p. ej. 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 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.
Artículos similares
Comprimir imágenes: inevitable para publicar online
La capacidad de los ordenadores es cada vez mayor pero, en especial cuando se gestiona un proyecto web, es recomendable tener en cuenta el tamaño de los archivos de imagen. Si se comprimen, esto da lugar a una velocidad de carga menor que, además de satisfacer a los usuarios, es recompensada con un buen posicionamiento en Google. Por esto, es conveniente comprimir las fotos antes de usarlas en una…
Fundamentos del diseño web primera parte: planificación
Para crear una página web, es fundamental considerar su propósito y sus objetivos, así como las funciones y servicios que deberán estar a disposición de los visitantes. La planificación será el primer paso para dar luz verde al diseño web y a la concepción de cualquier web. ¿Qué se debe considerar y en qué se debe hacer hincapié? Invertir el tiempo necesario en la planificación de una web…
Las mejores webfonts: por qué es tan importante la tipografía web
Con el término web safe fonts se hace referencia a la tipografía que se puede usar en Internet sin problemas. La clave es plantearse el número de navegadores en los que se puede visualizar la webfont seleccionada. ¿Por qué no paran de crecer las web safe fonts? ¿A qué se debe la importancia de la tipografía web en el éxito de una página web corporativa?
Sinart CreativeShutterstock Introducción a YAML
Si quieres desarrollar una nueva aplicación web, tienes la posibilidad de escribir su código desde cero o de recurrir a un framework. La mayoría de estas colecciones de código contienen un entorno de aplicación prediseñado que se puede ajustar fácilmente a las ideas propias. El framework CSS YAML ofrece, por ejemplo, una estructura responsiva y optimizada para diferentes navegadores y…
Analizar el tráfico de web: las mejores herramientas gratuitas
Las herramientas para analizar el tráfico web proporcionan una visión general y rápida de la cantidad de visitas que atrae una página web y de cómo llegan a ella. Esta información es importante para saber si una página tiene éxito y, de esta manera, poder decidir las acciones que debemos tomar. Además, este tipo de herramientas resultan muy útiles para analizar a la competencia. Te presentamos…
