Critical CSS: extraer, minificar e inlinear para el LCP

Extrae el CSS above-the-fold, minifica el bloque, inlinalo en el head y carga el resto en async. Para el LCP, sin bloquearlo todo.

15.06.2026

10 min de lectura

Compartir este artículo:

CSS

Critical CSS

LCP

Core Web Vitals

Rendimiento

Optimización

Tutorial

Por qué el CSS bloquea tu LCP

Cada hoja de estilo externa es render-blocking: el navegador retrasa la visualización hasta que ha descargado y parseado la integridad del CSS — aunque solo unas pocas reglas conciernan al contenido visible al cargar. En una landing de marketing con 180 KB de estilos, el Largest Contentful Paint (LCP) puede superar fácilmente los 3 segundos en móvil. La estrategia Critical CSS consiste en extraer los estilos del above-the-fold, minificarlos, inlinearlos en el `<head>` y luego cargar el resto de forma asíncrona. Para reducir de inmediato el tamaño del bloque extraído, un minificador CSS en línea FastMinify permite validar la ganancia en unos clics. Esta guía cubre el workflow completo — extracción, minificación, inline HTML y medición — como complemento de nuestra guía completa de la minificación CSS y del artículo sobre los Core Web Vitals y la minificación.

LCP mejorado de 200 a 800 ms en las páginas CSS-heavy típicas

First Contentful Paint más rápido gracias al render inmediato del above-the-fold

Eliminación de los recursos CSS render-blocking para el primer paint

Mejor puntuación Lighthouse Performance y auditoría « Eliminate render-blocking resources »

Sinergia directa con minificación CSS, compresión Brotli y HTML aligerado

Impacto medible en el LCP

Landing page de marketing: antes / después Critical CSS

Cifras realistas para una página con Bootstrap + tema custom, medidas en móvil 4G simulada (Lighthouse):

Before optimization

LCP: 3,8 s
Puntuación Google: 62/100
Tamaño de archivos: 180 KB CSS bloqueante
Tiempo de carga: 2,1 s FCP

After optimization

LCP: 1,9 s
Puntuación Google: 91/100
Tamaño de archivos: 4 KB inline + 176 KB async
Tiempo de carga: 0,9 s FCP

Mejoras

LCP: 3,8 s → 1,9 s (−50 %)

CSS render-blocking: 180 KB → 4 KB inline

Puntuación Lighthouse Performance: 62 → 91

FCP: 2,1 s → 0,9 s

Auditoría « Eliminate render-blocking resources »: de rojo a verde

Cuándo priorizar el Critical CSS

La técnica aporta más valor en estos contextos:

Sitios de marketing / landing pages donde el hero es el elemento LCP

Temas WordPress o CMS con hojas CSS monolíticas grandes

SSR o sitios estáticos sin pipeline de optimización CSS integrado

Páginas mobile-first donde cada 100 ms de LCP impacta conversión y SEO

Proyectos que apuntan al umbral Google LCP ≤ 2,5 s sin un rediseño completo

Medir el impacto en tus Core Web Vitals

Herramientas de validación

Comprueba que el Critical CSS mejora de verdad el LCP — no solo la puntuación Lighthouse sintética. Cruza lab y field data:

Lighthouse (Chrome DevTools) — auditoría « Eliminate render-blocking resources »

PageSpeed Insights — LCP field data (CrUX) vs lab

WebPageTest — filmstrip para visualizar el first paint

Chrome Performance panel — timeline CSS parse + render

Search Console — informe Core Web Vitals por URL

Métricas objetivo post-despliegue

Compara antes/después en una muestra representativa de páginas. Consulta nuestros artículos sobre los Core Web Vitals y el posicionamiento de los sitios rápidos para los umbrales Google y el impacto SEO.

LCP ≤ 2,5 s (bueno) — objetivo principal de esta optimización

FCP a la baja visible en el filmstrip WebPageTest

Reducción del número de recursos CSS bloqueantes en Lighthouse

Sin regresión CLS (dimensiones hero/imágenes siempre definidas)

Monitoring CrUX durante 28 días para validar el field LCP

Inlinear el CSS crítico en el HTML

Patrón preload + async stylesheet

Combina CSS inline para lo crítico y carga diferida para el resto. Este patrón es compatible con la mayoría de stacks y evita el FOUC si el noscript está presente:

Colocar el `<style>` crítico lo más arriba posible en el `<head>`

Preload de la hoja completa para reducir la latencia de la carga async

Proporcionar un fallback `<noscript>` para la accesibilidad

Evitar inlinear más de ~14 KB (umbral histórico HTML first packet)

Regenerar el critical en cada cambio de layout above-the-fold

Antes

<head>
  <link rel="stylesheet" href="/css/bundle.css">
</head>
<body>
  <header class="hero">...</header>
</body>

Después

<head>
  <style>.hero{background:#0f172a;color:#fff;padding:2rem}</style>
  <link rel="preload" href="/css/bundle.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="/css/bundle.css"></noscript>
</head>

Alternativa: media="print" onload="this.media='all'" en el link async. Prueba siempre el renderizado móvil.

Integración en los frameworks modernos

Next.js

Next.js 13+ puede optimizar el CSS vía Critters (experimental). Activa `experimental.optimizeCss` o usa `@next/critical` para generar el critical en el build:

App Router

En `next.config.js`: `experimental: { optimizeCss: true }` — Critters inlinea automáticamente el CSS crítico de las páginas estáticas generadas.

Build manual

Para un control fino, ejecuta `critical` post-build sobre `out/index.html` (export estático) o sobre las páginas SSR snapshot.

Nuxt y Gatsby

El ecosistema Vue y React propone plugins maduros que automatizan la extracción:

Nuxt

Módulo `@nuxtjs/critters` — inyección automática del CSS crítico en el prerender.

Gatsby

Plugin `gatsby-plugin-critical` — genera e inlinea el critical para cada página en el build.

Buenas prácticas y trampas a evitar

Checklist de producción

Antes de empujar a prod, valida esta lista:

Critical CSS generado desde el build de producción, no desde dev

CSS extraído minificado antes del inline (CSSO o FastMinify)

Tamaño inline ≤ 14 KB si es posible — más allá, evaluar el ratio ganancia/tamaño HTML

CSS async con fallback noscript probado

Regeneración automática del critical en CI en cada cambio CSS de layout

Compresión Brotli activada en las hojas async — ver la guía GZIP y Brotli

Errores frecuentes

Estos problemas aparecen a menudo después de una primera implementación Critical CSS:

FOUC (Flash of Unstyled Content) — async mal configurado o critical incompleto

Critical demasiado voluminoso — incluye reglas fuera del viewport por defecto

Critical stale — layout modificado sin regeneración del CSS inline

Media queries ignoradas — probar móvil Y desktop en critical/Penthouse

Olvidar las fuentes web — el LCP puede ser una imagen o un texto con font swap

¿Qué es el Critical CSS?

Above-the-fold y render-blocking

El Critical CSS designa el conjunto mínimo de reglas necesarias para mostrar correctamente el contenido visible en el viewport inicial (above-the-fold): header, hero, tipografía de base, layout principal. Todo `<link rel="stylesheet">` externo bloquea el renderizado: el navegador construye el CSSOM antes de pintar. Minificar reduce el tamaño; el Critical CSS reduce el bloqueo al entregar esas reglas inline, sin ida y vuelta de red.

Critical CSS = estilos del primer viewport, no la integridad de la hoja

Render-blocking: el CSS externo retrasa FCP y LCP

Minificación y Critical CSS son complementarios, no sustitutos

El CSS no crítico se carga después en async (preload, media print trick)

Objetivo: pintar rápido, luego enriquecer los estilos sin bloquear

Antes / después: patrón típico

Esta es la transformación más habitual en una página estática o SSR:

Antes

<head>
  <link rel="stylesheet" href="/styles/main.css">
  <!-- 180 KB bloqueantes antes del primer paint -->
</head>

Después

<head>
  <style>/* ~4 KB de CSS crítico minificado inline */</style>
  <link rel="preload" href="/styles/main.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="/styles/main.css"></noscript>
</head>

Minificar tu Critical CSS con FastMinify

Workflow rápido: extraer → minificar → inlinear

Después de la extracción con `critical` o Penthouse, pega el CSS en el minificador CSS en línea FastMinify para obtener la versión más compacta antes del inline. Luego, minifica el HTML final con nuestro minificador HTML en línea si sirves páginas estáticas.

Paso 1: Extraer

Genera `critical.css` con critical/Penthouse sobre tu build de producción (no dev — las clases pueden diferir).

Paso 2: Minificar

Pega el CSS extraído en FastMinify. Compara tamaño antes/después — apunta a menos de 14 KB inline si es posible.

Paso 3: Inlinear y diferir el resto

Inserta el CSS minificado en `<style>` en el `<head>`. Carga la hoja completa en async vía preload o media print trick.

Extraer el CSS crítico de forma programática

Paquete critical (Node.js)

El paquete `critical` es la referencia para generar el CSS crítico a partir de una URL o de un archivo HTML. Configura las dimensiones del viewport (móvil + desktop) para cubrir los casos reales:

Configuration

const critical = require('critical');

critical.generate({
  inline: true,
  base: 'dist/',
  src: 'index.html',
  target: 'index-critical.html',
  width: 1300,
  height: 900,
  dimensions: [
    { width: 375, height: 667 },
    { width: 1300, height: 900 }
  ]
});

Uso

// Penthouse (alternativa) — API similar
const penthouse = require('penthouse');
const criticalCss = await penthouse({
  url: 'https://example.com',
  css: 'dist/styles/main.css',
  width: 1300,
  height: 900
});

Minificar el CSS extraído antes del inline

El CSS generado todavía contiene espacios y comentarios. Pásalo por CSSO o nuestra herramienta en línea antes de inlinearlo — ver la guía minificación CSS para las opciones avanzadas. Ganancia típica: 30 a 50 % sobre el bloque extraído.

Configuration

const csso = require('csso');
const fs = require('fs');

const raw = fs.readFileSync('critical.css', 'utf8');
const minified = csso.minify(raw, { restructure: true }).css;
fs.writeFileSync('critical.min.css', minified);

Uso

// O vía FastMinify: pegar el CSS extraído,
// minificar, copiar el resultado en <style>...</style>

Conclusión

El Critical CSS es una de las optimizaciones más rentables para mejorar el LCP sin rehacer tu stack: extraer el above-the-fold, minificar de forma agresiva, inlinear en el HTML, diferir el resto. Combina este enfoque con la minificación CSS sistemática, la compresión Brotli y un HTML aligerado para maximizar el impacto en tus Core Web Vitals y tu posicionamiento.

Minifica tu CSS crítico ahora

Extraer el CSS crítico con critical o Penthouse en el build

Minificar el bloque extraído antes del inline con FastMinify o CSSO

Inlinear en el head y cargar el resto en async

Medir LCP antes/después con Lighthouse y PageSpeed Insights

Automatizar la regeneración en CI para evitar el critical stale

Compartir este artículo

Compartir este artículo:

Critical CSS: extraer, minificar e inlinear para el LCP

Por qué el CSS bloquea tu LCP

Impacto medible en el LCP

Mejoras

Medir el impacto en tus Core Web Vitals

Inlinear el CSS crítico en el HTML

Antes

Después

Integración en los frameworks modernos

App Router

Build manual

Nuxt

Gatsby

Buenas prácticas y trampas a evitar

¿Qué es el Critical CSS?

Antes

Después

Minificar tu Critical CSS con FastMinify

Paso 1: Extraer

Paso 2: Minificar

Paso 3: Inlinear y diferir el resto

Extraer el CSS crítico de forma programática

Configuration

Uso

Configuration

Uso

Conclusión

Artículos relacionados