¿Sabías que podés hacer que tu sitio se muestre más rápido aunque aún no haya cargado todo el CSS? El CSS crítico en línea es una técnica que mejora los tiempos de renderizado inicial. Te explico cómo funciona.
¿Qué es el CSS crítico?
El CSS crítico es el conjunto mínimo de estilos que tu sitio necesita para mostrar lo que se ve primero en pantalla, sin esperar a que cargue todo el CSS completo.
Al poner ese CSS directamente en el <head> (inline), le das al navegador lo justo y necesario para renderizar más rápido la vista inicial.
¿Cómo se implementa?
1. Identificás los estilos necesarios para el contenido above the fold (lo que se ve sin hacer scroll).
2. Ese bloque de CSS lo pegás en línea en el <head>.
3. El resto del CSS lo seguís cargando como archivo externo, pero con carga diferida (ej: usando media="print" onload="this.media='all'").
<style>
/* CSS crítico en línea */
body { margin: 0; font-family: system-ui; }
header { background: #fff; padding: 20px; }
h1 { font-size: 2rem; color: #333; }
</style>
<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">¿Qué beneficios tiene?
- Mejorás el First Contentful Paint (FCP).
- Reducís el tiempo hasta que el usuario ve algo en pantalla.
- Mejorás la puntuación en PageSpeed Insights y Lighthouse.
- La experiencia percibida mejora mucho, aunque el sitio aún esté cargando fondo.
¿Cómo generás el CSS crítico?
Podés hacerlo a mano (si tenés un sitio chico) o usar herramientas automáticas:
- critical (Node.js CLI para generar el CSS crítico por página).
- Generadores online.
- Si usás WordPress, hay plugins como Autoptimize que lo hacen por vos.
¿Y hay alguna contra?
La principal desventaja es que si no lo hacés bien, podés duplicar estilos o generar conflictos entre el inline y el CSS externo. Por eso es clave:
- Incluir solo lo estrictamente necesario.
- Evitar mezclar reglas complejas o dependientes de JS.
Conclusión
El CSS crítico en línea es una técnica avanzada, pero cada vez más accesible gracias a herramientas automáticas. Te ayuda a mejorar la percepción de velocidad y le da a tu sitio una ventaja clave en experiencia de usuario y SEO.
Si querés que tu web "aparezca" antes, es momento de pensar en el critical CSS 😎
