Optimización de CSS manual para mejorar la velocidad de carga

La velocidad de carga de una web se ha convertido en uno de los factores más importante en los últimos años en diseño web y aunque son muchos elementos los que pueden ser optimizados para aligerar el peso total de los archivos descargados, en este artículo nos vamos a centrar en optimizar los archivos CSS, más concretamente cuando escribimos CSS.

Que una web pese poco y cargue rápido supone una mejora de UX (Experiencia de usuario) evidente, pues los visitantes consiguen llegar antes al contenido e interactuar con él. Pero también lleva asociado otras ventajas, como un menor consumo de datos e incluso un ahorro en la batería del dispositivo.

Esto ya era importante hace algún tiempo. Pero ha sido la decisión de Google de incluir la velocidad de carga entre los factores que determinan el posicionamiento dentro del buscador, lo que ha hecho que todos nos volvamos locos con el SEO tratando de reducir décimas en el tiempo de carga y ahorrar algún kb donde se pueda.

Esto ha dado lugar a lo que llamamos WPO (Web Performance Optimization), un campo de trabajo donde el objetivo es optimizar al máximo la carga de la web mediante técnicas de compresión y optimización de los contenidos.

Cómo reducir el peso de tus archivos CSS

Vaya por delante que hay muchas técnicas para reducir el peso de los archivos CSS. Las más conocidas pasan por agrupar todas las hojas de estilos de tu web en un solo archivo, minificarlo y servirlo comprimido mediante Gzip. Después podríamos activar la caché de dicho archivo, para cuando el visitante vuelva no tenga que volver a descargarse el archivo CSS.

Sin embargo hoy nos vamos a centrar en los pasos anteriores. Vamos a detallar algunos consejos para integrar las tareas de optimización desde la fase de maquetación, cuando estamos creando las reglas CSS de nuestra web.

Todas parten de un principio muy básico: cada carácter pesa aproximadamente 1byte. Si reducimos el número de caracteres conseguiremos reducir el peso del archivo ¿fácil no? Veamos cómo lograrlo. (Nota: realmente la regla de 1 carácter = 1 byte no es siempre así, es un tema mucho más complejo donde entran el tipo de codificación y el tipo de carácter, pero para ilustrar los siguientes puntos, tomaremos por bueno esta equivalencia).

1. Propiedades Shorthand en CSS

Las propiedades Shorthand nos permiten definir varios valores en una sola línea. El ejemplo más claro lo tenemos en la definición de los margin o padding, donde podemos definir los cuatro valores en una sola línea, empezando por el lado superior y siguiendo la dirección de las agujas del reloj.

La reducción de caracteres y por tanto de tamaño es considerable.

Propiedades CSS Shorthand
A la izquierda definimos el padding utilizando 4 propiedades. A la derecha definimos el padding del elemento en una sola linea con una propiedad shorthand.

Cómo regla general, siempre que declaremos más de un valor de una propiedad que pueda ser usada como shorthand, merecerá la pena usarlo.

2. Espacios y Tabulaciones en CSS. ¿Cual ocupa menos?

Indentación CSS con espacios
Indentación CSS con espacios

El eterno dilema, ¿tabulación o espacios en CSS?. Personalmente siempre me ha parecido más limpio y ordenado usar tabulaciones. Si a esto le sumamos el ahorro de bytes, la balanza se inclina claramente del lado de las tabulaciones.

Para hacernos una idea, una tabulación cuenta como un carácter, por tanto sería 1byte a sumar a nuestro peso total. Un espacio también cuenta por 1byte, pero para lograr el mismo nivel de indentación necesitamos 4 espacios (4bytes).

Indentacion CSS con tabulacion
Indentacion CSS con tabulacion

Si queremos optimizar al máximo, podemos no usar ni espacios ni tabulaciones, pero entonces el código quedaría muy poco legible y difícil de editar. Lo mejor es dejar que los espacios y tabulaciones se eliminen en una fase posterior, cuando minifiquemos nuestras hojas de estilo.

3. Prefijos para compatibilidad de navegadores que ya no son necesarios en CSS

Cuando una nueva propiedad CSS comienza a ser interpretada entre los navegadores, lo normal es usar ciertos prefijos para garantizar la compatibilidad de la misma en el mayor número de navegadores y versiones de los mismos.

.box {
	-webkit-transition: all .8s linear;
	-moz-transition: all .8s linear;
	-ms-transition: all .8s linear;
	-o-transition: all .8s linear;
	transition: all .8s linear;
}

/* Sin Prefijos innecesarios */
.box {
	transition: all .8s linear;
}

Sin embargo, con el paso del tiempo, dichos navegadores van integrando dicha propiedad sin que sea necesario usar ningún tipo de prefijo. No es mala idea revisar nuestros archivos CSS en busca de estos prefijos que ya no son útiles. Una buena herramienta para conocer la compatibilidad de las propiedades es Can I Use. En este ejemplo, la propiedad transition ya no necesita de tantos prefijos.

Can I Use es un buen recurso si quieres conocer las novedades y compatibilidad del mal llamado CSS4.

4. Omitir la unidad CSS cuando el valor es cero

En CSS, el valor 0 es siempre 0. No importa a que unidad nos estemos refiriendo, puesto que dicha información será ignorada. Aquí seguro que podemos ahorrar algunos bytes.

.box {
	margin: 0px 15px 1.2em 0em;
	padding-top: 0rem;
}

/* Zero is always Zero */
.box {
	margin: 0 15px 1.2em 0;
	padding-top: 0;
}

5. Optimizar valores decimales en CSS

Aquí hay dos cuestiones que tenemos que tener en cuenta. Por un lado, todo valor decimal inferior a 1 y mayor que 0 no requiere el uso del 0 antes del punto que indica el inicio de las decenas. De igual forma, todo valor decimal que tenga un 0 al final puede ser reducido con el fin de ahorrarnos otro byte.

.box {
	font-size: 0.75rem;
	padding-left: 1.50em;
}

/* Zero in decimal values */
.box {
	font-size: .75rem;
	padding-left: 1.5em;
}

6. Código de colores más cortos en CSS

Tenemos varias formas de declarar un valor para los colores en CSS: RGB, HEX o el nombre del color. Lo ideal aquí sería usar aquello que nos ocupara menos bytes.

.box {
	background-color: #ffffff; /* white */
	color: rgb(0,0,0); /* black */
	border-color: #ff0000; /* red */
}

/* Smaller color codes */
.box {
	background-color: #fff; /* white */
	color: #000; /* black */
	border-color: red; /* red */
}

Conclusión: Integrar las tareas de WPO desde la fase de maquetación

Creo que es importante que todos los que nos dedicamos a trabajar con CSS tengamos claro desde la fase de maquetación que nuestras hojas de estilos forman parte de un paquete final donde el SEO y el WPO tienen la misma importancia para el éxito del proyecto que cualquier otra tarea.

Tener esto en mente nos ayuda a integrarnos mejor con el resto del equipo y a optimizar desde el minuto 1 todas las hojas de estilos que vamos creando.

Quizás algunos de los consejos enumerados en este artículo sean muy evidentes, pero nunca viene mal repasarlos para tener un mayor control sobre el CSS que escribimos. Si quieres repasar otros conceptos básicos de CSS, te recomiendo este artículo sobre qué es CSS. Si buscas algo más avanzado, puedes empezar por este artículo sobre CSS Grid o sobre mediaqueries en CSS.

Y tu ¿qué otros principios y reglas conoces para reducir el peso de nuestros archivos CSS?

Comentarios (7)

  1. Yo apenas estoy empezando en este mundo, no se mucho pero, rápidamente reconocí una buena pagina. es excelente, tanta información y consejos!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *