Última revisión: 31 de diciembre de 2021
Código CSS
Los CSS son los elementos que dan estilo a nuestros WordPress, y los encontramos en los temas, núcleo, plugins y bloques.
Aunque históricamente siempre se planteaba 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 cargarse, 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>Minify de CSS
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). El 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.
El CSS en WordPress
WordPress, al ser un gestor de contenidos, dispone de sus propios sistemas de gestión de CSS. Por norma general el sistema carga una serie de CSS que vienen con el tema, además de los CSS que pueda cargar el propio WordPress, y posteriormente carga los CSS de plugins y bloques.
Esto puede hacer que se encadenen una decena de peticiones con contenido CSS que habría que evitar.
En este proceso deberíamos conseguir 4 pasos. El primero de ellos es eliminar las cadenas de versión que muchas veces llevan las peticiones CSS (?ver=5.8.2). El segundo sería el de reducir la cantidad de peticiones a ficheros CSS, para conseguir una o dos peticiones. A partir de aquí sería conveniente hacer un minify del contenido, para reducir su tamaño y, finalmente, conseguir que ese fichero CSS resultante quede cacheado para siguientes llamadas.
En general hay muchos plugins que hacen esta tarea, pero son un «todo en uno», es decir, no están pensados solo para esta acción, sino que intervienen otras optimizaciones. Por eso es importante elegir un plugin correctamente y que no afecte a otras configuraciones.
