⚡ Critical CSS: qué es, cómo generarlo y acelerar tu sitio web
Su página tarda 3 segundos en cargar y los visitantes se van. Abre Google PageSpeed Insights y ahí está, en rojo: «Elimine el CSS que bloquea el renderizado». ¿Le suena familiar? Según datos de HTTP Archive para 2025, la mediana de páginas carga 7 hojas de estilo externas y el peso promedio del CSS ha superado los 120 KB. Cada archivo en <head> es una barrera entre el usuario y el contenido.
El problema no es el CSS «pesado». El navegador no renderiza un solo píxel hasta que descarga y analiza TODOS los estilos. Incluso los que dan estilo a un pie de página en el píxel 4000. La solución es el Critical CSS: una técnica que extrae de su hoja de estilos completa solo lo necesario para la ventana visible y lo incrusta directamente en el <head>. El resto se carga de forma asíncrona y no bloquea nada.
Implementamos critical CSS en todos los proyectos de techblog y construimos un flujo de trabajo funcional: desde la generación manual en 30 segundos hasta la automatización completa mediante Gulp y plugins de WordPress. A continuación, una guía paso a paso sin rodeos.
💡 Resumen rápido:
- Comprenda la mecánica del bloqueo de renderizado y por qué el navegador espera el CSS incluso cuando el HTML está listo
- Elija la herramienta adecuada: un generador gratuito en línea en 10 segundos, Penthouse para proyectos npm, o la combinación de WP Rocket / Autoptimize para WordPress
- Configure un flujo de trabajo con Gulp para la regeneración automática del critical CSS en cada despliegue
- Evite los errores comunes: FOUC, contenido JS, problemas con media queries
Qué es el critical CSS y por qué el navegador se ralentiza
El navegador construye dos estructuras: el DOM a partir del HTML y el CSSOM a partir de las hojas de estilo. Hasta que el CSSOM no está listo, el renderizado se detiene. Esto es el CSS que bloquea el renderizado: la página permanece en blanco hasta que se cargan todas las hojas de estilo en el <head>.
Google PageSpeed Insights diagnostica el problema directamente:
Su página tiene 3 recursos CSS que bloquean el renderizado. Esto provoca un retraso en la visualización. Ningún contenido de la parte visible de la página puede renderizarse sin esperar a que se carguen los siguientes recursos.
El término «above the fold» proviene de los periódicos. En la web, significa el área visible antes de hacer scroll: aproximadamente 600 px en escritorio, 900 px en portátiles, 400 px en teléfonos inteligentes. La mayoría de los desarrolladores apuntan a valores seguros de 1300 px de ancho y 900 px de alto.
El critical CSS es el conjunto mínimo de estilos necesarios para renderizar solo esa área. Cuadrícula, navegación, fuentes, sección principal. Todo lo demás se difiere y se carga de forma asíncrona: la página aparece al instante mientras los estilos adicionales se cargan en segundo plano.
Las cifras son significativas. Según datos de Google, incrustar el critical CSS reduce el First Contentful Paint entre 0,5 y 1,2 segundos en dispositivos móviles. Para el comercio electrónico, esto impacta directamente en la conversión: una investigación de Portent mostró que los sitios con un FCP inferior a 1 segundo convierten 3 veces mejor que los sitios con un FCP de 3 segundos.
Herramientas de generación: desde gratuitas en línea hasta API comerciales
Generar critical CSS manualmente es imposible. Necesita una herramienta que renderice la página en un navegador sin interfaz gráfica y extraiga solo los estilos utilizados. Aquí tiene tres opciones funcionales.
Herramienta | Tipo | Costo | Automatización | Ideal para |
|---|---|---|---|---|
Critical Path CSS Generator | En línea | Gratuito | No | Páginas individuales, primeros pasos |
Penthouse | Paquete npm | Gratuito | Sí, mediante Gulp/scripts | Desarrolladores, procesamiento por lotes |
criticalcss.com | SaaS | Desde $10/mes | Sí, API + WordPress | Producción, sitios grandes |
Critical Path CSS Generator: en línea, en 10 segundos
Critical Path CSS Generator de Jonas Ohlsson es una herramienta gratuita por la que vale la pena empezar. La interfaz es simple: pegue la URL de la página, pegue su CSS COMPLETO (incluso 200 KB minificados), haga clic en el botón y obtenga los estilos para la parte visible de la página.
Ventajas: barrera de entrada nula. No necesita Node.js, npm ni scripts. Desventajas: trabajo puramente manual. Procesa cada página por separado y, cuando los estilos cambian, repite todo. Funciona para un sitio de 5 páginas, pero 50 páginas se vuelve doloroso.
El creador del generador lanzó posteriormente el servicio comercial criticalcss.com, una evolución de la misma idea con actualizaciones automáticas, validación mediante capturas de pantalla y una API para procesamiento por lotes.
Penthouse: generador de línea de comandos para Gulp
Penthouse (más de 2680 estrellas en GitHub) es un paquete npm del mismo autor. Por debajo utiliza Puppeteer y Chromium headless. Abre la página, determina el CSS usado para un viewport dado y descarta el resto.
Instalación:
1 npm install --save-dev penthouse
Llamada mínima desde un script Node:
1 const penthouse = require('penthouse'); 2 const fs = require('fs'); 3 4 penthouse({ 5 url: 'https://example.com', 6 cssString: fs.readFileSync('./style.css', 'utf8'), 7 width: 1300, 8 height: 900 9 }).then(criticalCss => { 10 fs.writeFileSync('./critical.css', criticalCss); 11 });
Los valores de ancho 1300 y alto 900 son empíricamente seguros. Las media queries más anchas que el viewport crítico se eliminan por defecto. Para conservarlas, use la opción keepLargerMediaQueries: true.
Nota importante: Penthouse se ejecuta con JavaScript desactivado. Si el contenido above the fold lo genera un framework JS, el HTML antes de la hidratación está vacío y Penthouse no encontrará ningún estilo. La solución: renderizado del lado del servidor (SSR) o el parámetro forceInclude con selectores para forzar su conservación.
WP Rocket y Autoptimize: dos plugins para WordPress
Si su sitio funciona con WordPress, la generación manual de CSS crítico es una molestia innecesaria. Muchas páginas, plantillas que se multiplican, estilos que cambian. Dos plugins resuelven la tarea por completo.
WP Rocket es un plugin premium (59 €/año para 1 sitio, 119 € para 3, 299 € para 50). La opción integrada «Remove Unused CSS» genera automáticamente el CSS crítico para cada página, lo incrusta en el <head> y carga el resto de forma asíncrona. Dos casillas de verificación y la recomendación «Eliminar recursos que bloquean el renderizado» queda resuelta. Extra: el centro integrado Rocket Insights, impulsado por GTmetrix, muestra las métricas directamente desde el panel de administración de WordPress.
Autoptimize es un plugin gratuito con una opción «Inline and Defer CSS». La versión básica genera UN solo archivo de CSS crítico para todo el sitio, lo cual no funciona en la práctica (páginas distintas, contenido above the fold distinto). La solución: integración con el servicio criticalcss.com (plan WordPress, desde 10 $/mes). El plugin solicita automáticamente el CSS crítico a través de la API, lo incrusta y lo actualiza cuando se producen cambios.
Para la mayoría de los usuarios de WordPress, la combinación de WP Rocket o Autoptimize + criticalcss.com resuelve el problema por completo. El resto de este artículo es para quienes construyen sitios a medida.
Flujo de trabajo manual: generación, inserción, verificación
Si está construyendo un sitio sin un CMS, el proceso se ajusta a cuatro pasos.
Paso 1. Copie TODO su CSS. Combine todos los estilos del sitio en UN solo archivo. Si escribe Sass, compílelo. Si usa un framework como Bootstrap o Tailwind, incluya su CSS completo. No adivine qué «probablemente no se necesita»; el generador lo determinará.
Paso 2. Genere el CSS crítico mediante el generador en línea o Penthouse. El resultado es un bloque minificado de estilos responsable únicamente del contenido above the fold.
Paso 3. Inserte el CSS crítico en una etiqueta <style> dentro del <head>. Esto es crucial: los estilos en línea no generan solicitudes HTTP adicionales y el navegador los procesa de inmediato. El resultado tiene un aspecto similar a este:
1 <!DOCTYPE html> 2 <html lang="ru"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <style>@charset "UTF-8";*,*::before,*::after{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15}body{margin:0;font-family:'Inter',Helvetica,Arial,sans-serif;font-size:1rem;line-height:1.5;color:#222;background:#fff}nav{display:block}.container{max-width:1200px;margin:0 auto;padding:0 20px}</style> 7 <title>Page Title</title> 8 </head>
Paso 4. Mueva el CSS y JS externos del <head> al final de la página, antes del </body> de cierre. Sí, un <link rel="stylesheet"> en el pie es técnicamente inválido según la especificación, pero en la práctica funciona en todos los navegadores y resuelve el problema de bloqueo. La alternativa es loadCSS de Filament Group para cargar estilos de forma asíncrona sin moverlos al pie.
Por último, verifique a través de Google PageSpeed Insights. ¿Desapareció la recomendación «Eliminar recursos que bloquean el renderizado»? Hizo todo correctamente.
Gulp + Penthouse: automatización para proyectos sin WordPress
Cada cambio de estilo requiere regenerar el CSS crítico. Hacerlo manualmente es una tarea tediosa y repetitiva. Gulp automatiza el proceso.
Nuestro flujo de trabajo en producción:
1 // gulpfile.js 2 const gulp = require('gulp'); 3 const penthouse = require('penthouse'); 4 const fs = require('fs'); 5 const urlList = require('./criticalcss-pagelist.json'); 6 7 gulp.task('criticalcss', function () { 8 urlList.urls.forEach(function (item) { 9 penthouse({ 10 url: item.link, 11 css: './css/style.min.css', 12 width: 1300, 13 height: 900, 14 keepLargerMediaQueries: false, 15 renderWaitTime: 100, 16 timeout: 30000 17 }).then(function (criticalCss) { 18 fs.writeFileSync(item.output, criticalCss); 19 console.log('✓ Critical CSS generated: ' + item.link); 20 }).catch(function (err) { 21 console.error('✗ Error for ' + item.link + ': ' + err.message); 22 }); 23 }); 24 });
El archivo criticalcss-pagelist.json con la URL y la lista de archivos de salida:
1 { 2 "urls": [ 3 { "link": "https://example.com", "output": "./critical/home.php" }, 4 { "link": "https://example.com/about", "output": "./critical/about.php" }, 5 { "link": "https://example.com/contact", "output": "./critical/contact.php" } 6 ] 7 }
Escribimos la salida en archivos PHP que envuelven el CSS y se insertan mediante include en el <head> de la plantilla correspondiente. Adáptelo a su stack: escriba en .css, inserte mediante inclusión del lado del servidor, lo que funcione.
Ejecute: gulp criticalcss, y todas las páginas se procesan en una sola pasada. Enganche la tarea en CI/CD al desplegar, y el CSS crítico se mantiene actualizado.
Problemas que encontrará
El CSS crítico no está exento de aristas. Esto es lo que detectamos en la práctica.
Flash de contenido sin estilo (FOUC). El CSS crítico no cubría algún elemento, y el usuario ve un salto de estilo cuando se cargan los estilos completos. Causa: contenido posicionado fuera del viewport mediante absolute o transform, y el generador lo omitió. Solución: la bandera forceInclude con el selector del elemento problemático.
Contenido generado por JS. Casi todos los generadores (Penthouse, herramienta online) se ejecutan con JavaScript deshabilitado. Si su landing page está construida con React, Vue o Angular sin renderizado del lado del servidor, el HTML está vacío y el generador no tiene nada que analizar. La única solución fiable: habilitar SSR a nivel de framework. La alternativa es especificar selectores manualmente mediante forceInclude, pero es frágil.
Media queries. Por defecto, Penthouse elimina las reglas cuyo min-width excede el viewport especificado. Si no establece keepLargerMediaQueries: true, los estilos de escritorio se pierden y el sitio se rompe en pantallas anchas. Verifique siempre los resultados en resoluciones reales.
Caché. Generó el CSS crítico, desplegó, cambió el estilo del encabezado una semana después, pero la versión antigua permanece en el <head>. Sin automatización en CI/CD, olvidará regenerarlo. La tarea de Gulp al desplegar resuelve esto por completo.
⁉️🤔 Preguntas frecuentes
¿Es obligatorio el CSS crítico para cada sitio?
No, no para cada sitio. Si su sitio tiene un único archivo CSS de 20 KB y el FCP ya está por debajo de un segundo, el beneficio será insignificante. Pero si el
<head>contiene 3 o 4 hojas de estilo que suman alrededor de 100 KB, el CSS crítico ofrecerá una mejora medible. Para una landing page simple, el generador online toma 10 minutos. Para una tienda WordPress, WP Rocket con un par de casillas lo hace. Revise PageSpeed Insights: si «Eliminar recursos que bloquean el renderizado» aparece al principio, hágalo.
¿Puedo simplemente mover todas las etiquetas <link> al pie de página y ahorrarme la molestia?
Técnicamente no. La especificación HTML exige
<link rel="stylesheet">solo en el<head>. En la práctica, los navegadores renderizan páginas con<link>en el pie, pero obtiene un flash de contenido sin estilo (FOUC) hasta que los estilos cargan. Aceptable para un sitio tarjeta de visita simple, no para un proyecto comercial. El enfoque correcto: CSS crítico inline en el<head>, carga asíncrona para el resto medianteloadCSSomedia="print"cononload="this.media='all'". Mover al pie es un parche que funciona a costa de un salto visual.
¿Qué cambió con HTTP/3 y Early Hints?
HTTP/3 y 103 Early Hints permiten al navegador comenzar a cargar recursos críticos antes de recibir la respuesta completa del servidor. Esto reduce la latencia pero no elimina el bloqueo de renderizado: los estilos aún necesitan descargarse y parsearse. Early Hints y CSS crítico funcionan juntos, no uno en lugar del otro: Early Hints acelera la entrega, el CSS crítico acelera el primer renderizado. Las dos técnicas se refuerzan mutuamente.
Penthouse no se ha actualizado en 4 años. ¿Sigue siendo relevante?
La última versión de Penthouse (v2.3.3) salió en 2022, pero el paquete sigue siendo funcional: se ejecuta sobre Puppeteer y Chromium, que son estables. La funcionalidad principal (generar el CSS usado para un viewport dado) no requiere actualizaciones frecuentes. Una alternativa es Critical de Addy Osmani (más de 12 000 estrellas), que recibe actualizaciones más activas y también se integra con Gulp/Grunt.
¿Cómo manejo páginas dinámicas donde el contenido depende del usuario?
Para páginas con personalización (panel de usuario, carrito, panel de administración), el CSS crítico se genera no para un usuario específico sino para la estructura general: cabecera, barra lateral, cuadrícula. El contenido dinámico va a la porción asíncrona. Si los estilos de un bloque above the fold específico del usuario son esenciales, añada los selectores correspondientes mediante
forceInclude. Genere el CSS crítico basándose en la estructura general de la página y deje los bloques personalizados para carga asíncrona conforceIncludepara elementos críticos.
¿Debería implementar CSS crítico en su proyecto?
Si su sitio carga más de un archivo CSS en el <head>, el CSS crítico le dará ganancias de velocidad medibles. Para una landing de tres páginas, el generador online toma 10 minutos. Para un blog o tienda WordPress, dos casillas en WP Rocket. Para un proyecto a medida, una hora configurando Gulp y Penthouse se amortiza en el primer despliegue.
La barrera de entrada es más baja de lo que parece. Tome el generador online gratuito, copie el CSS de su página, péguelo, y en 30 segundos verá resultados. Cuando quiera automatizar, vuelva a la sección del flujo de trabajo con Gulp: resuelve el problema por completo. Duplicar la velocidad de carga con un par de horas de trabajo es un trato difícil de rechazar.
Un equipo profesional de escritores y editores especializados en la creación de contenido de calidad.