Cómo comprimir CSS y mejorar el re­n­di­mie­n­to 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 co­m­pre­sión y buenas prácticas, puedes mejorar no­ta­ble­me­n­te el re­n­di­mie­n­to, lo que se traduce en una carga más rápida y una mejor ex­pe­rie­n­cia 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 vi­sua­li­za­ció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 do­cu­me­n­tos HTML y XML contienen in­fo­r­ma­ción úni­ca­me­n­te sobre el contenido o la semántica de algunos de los co­m­po­ne­n­tes de una web, mientras que los recursos de diseño se en­cue­n­tran por separado en los llamados archivos CSS. Si se utilizan las hojas de estilo, el servidor web tiene que acceder a ellas (donde está al­ma­ce­na­do el contenido mu­l­ti­me­dia como fotos, vídeos, etc.) cada vez que se visita la web, lo que cla­ra­me­n­te 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 co­n­te­ni­dos 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 re­n­di­mie­n­to 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 úni­ca­me­n­te cuando realmente hacen falta.

Las ventajas de comprimir CSS

El tiempo de carga de una página web es un factor fu­n­da­me­n­tal, es­pe­cia­l­me­n­te con el aumento en el uso de di­s­po­si­ti­vos móviles y co­ne­xio­nes de datos. Al mismo tiempo, las co­m­pe­te­n­cias del lenguaje CSS han ido creciendo, por ejemplo, ha­cié­n­do­se cargo de las funciones de Ja­va­S­cri­pt. Es común que algunas pla­n­ti­llas de sistemas de gestión de contenido como WordPress tengan que lidiar con datos CSS so­bre­ca­r­ga­dos que frenan in­ne­ce­sa­ria­me­n­te la creación de una página web. A co­n­ti­nua­ción pre­se­n­ta­mos 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 di­re­c­ta­me­n­te en el archivo HTML, a excepción de la cabecera de la página. Lo mismo aplica para las etiquetas style usadas para pe­r­so­na­li­zar de­te­r­mi­na­das ca­ra­c­te­rí­s­ti­cas 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 ac­tua­l­me­n­te gestionar varias so­li­ci­tu­des en paralelo de forma eficiente, lo que acelera la carga de archivos CSS in­di­vi­dua­les sin que sea es­tri­c­ta­me­n­te necesario co­m­bi­nar­los pre­via­me­n­te.
3. En la medida de lo posible, utiliza la abre­via­ción: body { margin: 20px 10px 5px 10px }, en lugar de fo­r­mu­la­cio­nes de­ta­lla­das como: body { margin-top: 20px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px;}
4. Evita de­ma­sia­das es­pe­ci­fi­ca­cio­nes. Si las etiquetas es­pe­cí­fi­cas ya están incluidas en un documento (p. ej. en una lista), no es necesario re­pe­ti­r­las.
5. Usa colores con la notación he­xa­de­ci­mal (HEX) en lugar de RGB.
6. El selector universal “*” debe uti­li­zar­se úni­ca­me­n­te 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 eli­mi­na­n­do espacios in­ne­ce­sa­rios, líneas en blanco y co­me­n­ta­rios. 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 es­tru­c­tu­ra y claridad, de esta forma será in­te­r­pre­ta­do por el navegador de forma más rápida.

Debido a que la mi­ni­mi­za­ción del código CSS puede llegar a ser co­m­pli­ca­da, siempre es re­co­me­n­da­ble crear copias de seguridad antes de realizar cualquier cambio. De esta forma, será más fácil realizar un se­gui­mie­n­to detallado de los cambios y corregir errores fá­ci­l­me­n­te.

Comprimir CSS online

Para aquellos que no deseen optimizar el código CSS de forma manual, existen varias he­rra­mie­n­tas gratuitas de apli­ca­ción online. La mayoría son in­s­tru­me­n­tos que ahorran el trabajo tedioso y eliminan efi­ca­z­me­n­te espacios adi­cio­na­les, sangrías, co­me­n­ta­rios y saltos de línea. Estas también permiten convertir el código de color. Una vez fi­na­li­za­do el proceso, el código puede ser de­s­ca­r­ga­do di­re­c­ta­me­n­te como un archivo CSS, o puede copiarse y pegarse di­re­c­ta­me­n­te. Te pre­se­n­ta­mos un resumen de tres de las apli­ca­cio­nes más comunes:

CCS Minifier

La apli­ca­ción en línea CSS Minifier puede uti­li­zar­se di­re­c­ta­me­n­te 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 de­s­ca­r­gar­lo di­re­c­ta­me­n­te. CSS Minifier elimina el punto y coma al final de las nu­me­ra­cio­nes y, acorta el código en todos los saltos de línea y espacios. La he­rra­mie­n­ta también convierte los códigos RGB en su variante hexagonal co­m­pri­mi­da.

CSS Co­m­pre­s­sor

El CSS Co­m­pre­s­sor es una apli­ca­ción web que se di­fe­re­n­cia 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 cs­s­co­m­pre­s­sor.com y copiar el código en el campo “CSS Source Code Imput”. Ahora puedes es­pe­ci­fi­car el nivel de co­m­pre­sión. Puedes elegir entre cuatro opciones pre­co­n­fi­gu­ra­das, que varían según el nivel de le­gi­bi­li­dad del CSS co­m­pri­mi­do. A través de “Show advanced options” (Mostrar opciones avanzadas) puedes marcar ma­nua­l­me­n­te las casillas de las op­ti­mi­za­cio­nes que desees aplicar como, por ejemplo, la co­m­pre­sión de colores (“Compress colors”) o la eli­mi­na­ción de ca­ra­c­te­res in­ne­ce­sa­rios (“Remove un­ne­ce­s­sa­ry ba­c­k­s­la­shes”). Pulsa el botón “Compress” (comprimir) para que CSS Co­m­pre­s­sor inicie el proceso. Una vez fi­na­li­za­do, recibirás el resultado en el campo “Co­m­pre­s­sed Ja­va­S­cri­pt”, junto con in­fo­r­ma­ción sobre el tamaño de entrada y salida del archivo CSS, así como el po­r­ce­n­ta­je de mi­ni­mi­za­ción alcanzado.

Compresor CSS de Gi­ll­mei­s­ter Software

El compresor CSS de Gi­ll­mei­s­ter Software es una he­rra­mie­n­ta gratuita para de­sa­rro­lla­do­res web que permite una co­m­pre­sión sencilla del código CSS. El compresor elimina au­to­má­ti­ca­me­n­te los espacios en blanco y el punto y coma final. También suprime los co­me­n­ta­rios del código CSS. Según el fa­bri­ca­n­te, se puede lograr una reducción de hasta un 30 %.

Tiempos de carga más rápidos gracias a un CSS op­ti­mi­za­do

Cuanto más grande y compleja sea la es­tru­c­tu­ra de una página web o una tienda online, mayor será la de­pe­n­de­n­cia 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 re­cu­pe­ra­dos y enviados, por lo que comprimir el CSS es más que re­co­me­n­da­do para cualquier web. En el mercado existen he­rra­mie­n­tas online que te permiten eliminar la in­fo­r­ma­ción irre­le­va­n­te de tus archivos CSS en solo unos minutos. Des­afo­r­tu­na­da­me­n­te, a pesar de que estas he­rra­mie­n­tas resultan de gran ayuda, para alcanzar el nivel máximo de op­ti­mi­za­ción será necesario mo­di­fi­car­lo ma­nua­l­me­n­te o contratar a un pro­fe­sio­nal en el tema.