Qué es el CSS crítico
El CSS crítico es la parte mínima de estilos necesaria para mostrar lo primero que ve el visitante al entrar en tu web, cargada de forma prioritaria mientras el resto del diseño llega después. También se conoce como «critical CSS» o «CSS above the fold».
Es como montar primero el escaparate de la tienda y dejar para después la decoración de las salas interiores: lo que el cliente ve nada más entrar está listo de inmediato, aunque el resto de la tienda se siga terminando de montar un momento después, sin que él lo note. El CSS crítico identifica qué estilos hacen falta para mostrar correctamente la parte visible de la pantalla al cargar la página, y los carga de inmediato, dejando el resto de las hojas de estilo (las que afectan a partes más abajo) para que lleguen un poco después sin bloquear lo primero que se ve.
Esa parte visible sin hacer scroll se conoce como «contenido ATF» (above the fold, por encima del pliegue), un concepto que viene de los periódicos impresos y la parte de la portada que se veía doblada en un quiosco sin necesidad de desplegarla. En una web es, simplemente, todo lo que el visitante ve en la pantalla nada más cargar la página, sin tocar nada; el CSS crítico es la técnica concreta para que justo ese contenido ATF aparezca lo antes posible.
Cómo funciona
- Se analiza qué parte de la página es visible nada más entrar, sin hacer scroll, en distintos tamaños de pantalla.
- Se extraen únicamente los estilos de CSS necesarios para mostrar correctamente esa parte visible.
- Ese CSS crítico se inserta directamente en la página, para que esté disponible de inmediato sin tener que esperar a descargar un archivo aparte.
- El resto del CSS, el que afecta a partes de la página que no se ven todavía, se carga después, sin bloquear lo que ya es visible.
- El visitante ve el contenido inicial bien formado casi al instante, mientras el resto del diseño termina de llegar en segundo plano.
Ejemplo
Una tienda de instrumentos musicales online en Cádiz cargaba un único archivo de CSS muy grande para toda la web, y hasta que ese archivo completo no llegaba, la página se mostraba sin ningún estilo aplicado, como un boceto sin terminar, durante un instante notable. Extrajimos el CSS necesario para la parte visible de cada tipo de página y lo cargamos de forma prioritaria, dejando el resto del archivo para después, y la sensación de «parpadeo» al cargar desapareció por completo.
Señales de que te afecta
- PageSpeed Insights señala «eliminar recursos que bloquean la renderización» entre las recomendaciones de tu web.
- Notas que, al cargar, la página aparece primero sin estilos (texto sin formato) y luego se ajusta de golpe.
- Tu LCP es alto y uno de los motivos señalados es la carga del CSS.
- Tu web carga un único archivo de CSS grande para todas las páginas, en lugar de cargar solo lo necesario en cada una.
Cómo lo resolvemos
Identificamos qué estilos hacen falta para la parte visible de cada tipo de página de tu web, los cargamos de forma prioritaria y dejamos el resto del CSS para que llegue sin bloquear lo que el visitante ya está viendo. Si quieres que revisemos la carga de estilos de tu web, en nuestro servicio de optimización WordPress nos encargamos de configurarlo. El CSS crítico ayuda especialmente a mejorar el LCP, y conviene combinarlo con la minificación del resto del código.
Preguntas frecuentes
¿El CSS crítico es distinto para cada página de mi web?
Puede serlo, sobre todo si tienes plantillas muy diferentes (una portada, una ficha de producto, un artículo de blog), porque lo que es «visible al entrar» cambia según el diseño de cada tipo de página.
¿Tengo que actualizar el CSS crítico cada vez que cambio el diseño?
Sí, si cambias el diseño de la parte visible al entrar, conviene regenerar el CSS crítico para que siga reflejando exactamente lo que hace falta mostrar de inmediato.
¿El CSS crítico sustituye al resto del CSS de mi web?
No, lo complementa: el resto de estilos se sigue cargando igualmente, solo que un poco después y sin bloquear lo primero que ve el visitante.