Nivel Principiante
Imagina que quieres ver una página web. Cuando la abres, a veces tarda un poco en cargar, y por un segundo solo ves texto sin diseño. El Critical CSS es como si la página, antes de que el resto del diseño cargue, te diera solo el vestuario mínimo e indispensable para que lo que ves en la pantalla se vea bien desde el primer momento. De esta forma, el usuario ve la página casi al instante con su diseño básico, y el resto del diseño se carga en segundo plano.
Nivel Intermedio
El Critical CSS es una técnica de optimización del rendimiento web que extrae el CSS necesario para renderizar el contenido visible en la parte superior de la página (above the fold). Este pequeño fragmento de CSS se inserta directamente en la sección <head> del documento HTML. De esta forma, el navegador puede renderizar el contenido de la parte superior de la página sin tener que esperar a que se descarguen los archivos CSS externos completos.
Una vez que la página se ha cargado, el resto de los archivos CSS se cargan de forma asíncrona en segundo plano. Esta técnica es fundamental para mejorar la métrica de «First Contentful Paint» (FCP) y la «Largest Contentful Paint» (LCP), que son indicadores de la velocidad de carga de un sitio web.
Nivel Avanzado
Técnicamente, la implementación de Critical CSS es un proceso que se puede automatizar en el pipeline de construcción (build pipeline). Las herramientas de automatización (como critical, grunt, gulp o las utilidades de Webpack) analizan la estructura del HTML y los estilos de la página para identificar las reglas CSS que son necesarias para el contenido de la parte superior de la página.
El proceso de un build con Critical CSS es:
- Análisis: Una herramienta de automatización carga la página y simula el navegador para identificar el contenido visible.
- Extracción: La herramienta extrae las reglas CSS específicas que se necesitan para estilizar ese contenido.
- Inclusión Inline: El CSS extraído se inserta directamente en la etiqueta
<style>del<head>del HTML. - Carga Asíncrona: El resto de los archivos CSS se cargan de forma asíncrona, a menudo utilizando JavaScript o la directiva
preloaddel navegador.
La inclusión de Critical CSS elimina el «render-blocking», que es el tiempo que el navegador pasa esperando a que los archivos CSS se descarguen y se analicen antes de poder renderizar la página. Al eliminar este bloqueo, se mejora drásticamente el tiempo de carga percibido y real, lo que impacta directamente en la Experiencia de Usuario (UX), la tasa de conversión y el SEO.
Ejemplo:
