Los CSS son los elementos que dan estilo a nuestros sitios web.Aunque históricamente siempre se había comentado que era mejor hacer pocas peticiones grandes que muchas pequeñas, las últimas versiones de HTTP han mejorado esto de forma que ahora lo importante es el sistema de bloqueos cuando hablamos de CSS.
Es por esto por lo que deberíamos separar los CSS en 3 bloques:
- Críticos
- Generales
- Específicos
El objetivo es cargar la menor cantidad de código según el lugar donde nos encontremos.
Los CSS críticos son los básicos para crear la estructura del sitio de base. Aquí podríamos plantear que son aquellos que deben dar el esqueleto de la página, los que definen la cabecera, el cuerpo, los menús y los pies de nuestro sitio web, pero sin colores ni nada parecido, simplemente el esqueleto.
Este CSS que debería ser común para todo el sitio es lo primero que debería cargase, y el resto (los generales) se podrían cargar con un sistema de “preload”.
Para acabar, en páginas concretas en las que tengamos código específico para esa plantilla de página, podríamos también hacer un “preload” de los CSS.
Para no bloquear los elementos que no tocan se pueden usar sistemas de “defer” de CSS. No son muy estándar (todavía) pero un código similar al siguiente debería funcionar para todos los casos.
<link rel="preload" href="/styles.css" as="style" onload="this.onload=null; this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/styles.css"></noscript>Ahora que ya tenemos todo nuestro código CSS generado en varios ficheros, lo siguiente es reducir el tamaño y eliminar componentes no útiles. A este sistema le llamaremos minimización (minify). E objetivo es eliminar todos los bytes sobrantes del fichero, como por ejemplo comentarios o espacios innecesarios.
Un ejemplo de código original sería el siguiente:
#lione {
font-size: 2em;
color: steelblue;
}
#first {
font-size: 1em;
color: red;
}Que quedaría así:
#lione{font-size:2em;color:#4682b4}#first{font-size:1em;color:red}Hay multitud de herramientas por la web que realizan este trabajo. Sólo hay que buscar [CSS minify].
Por el funcionamiento en el que se procesa el CSS, hay que evitar el uso de CSS-inline (el CSS que se incluye en el código HTML). Además, para que la carga de la página sea mayor, lo mejor es separar el código CSS de lo que se ve en el “primer pantallazo” de lo que se carga por debajo del punto de corte.
Como este sistema puede ser bastante complejo de ejecutar, lo mejor sigue siendo aplicar un CSS muy reducido de esqueleto y posteriormente hacer los cambios, una vez ya se haya cargado el mínimo visual.