Extractor y compresor de CSS crítico
Extrae el CSS mínimo necesario para renderizar el contenido visible inicial y comprímelo para insertarlo en línea. El extractor de css crítico analiza los elementos de tu HTML, los compara con tu hoja de estilos CSS completa y genera CSS crítico minificado listo para insertar en línea en tu <head>, eliminando el CSS que bloquea el renderizado y mejorando las puntuaciones de Largest Contentful Paint (LCP). Todo el procesamiento ocurre en tu navegador y no requiere registro.
Critical CSS Extractor & Compressor
Paste your HTML and CSS, click "Extract Critical CSS", and get the minimal CSS needed to render above-the-fold content - minified and ready to inline in your <head>. All processing happens locally in your browser. Your code never leaves your device.
HTML Markup
Paste your above-the-fold HTML
Full CSS Stylesheet
Paste your full CSS file
What is critical CSS?
Critical CSS is the minimal set of CSS rules needed to render above-the-fold content without waiting for the full stylesheet to load. Inlining it in your <head> eliminates render-blocking CSS and improves Largest Contentful Paint (LCP) scores.
¿Por qué usar nuestro extractor de CSS crítico?
- Extracción instantánea de CSS crítico en tu navegador: extrae el CSS crítico al instante en tu navegador, sin subir nada a un servidor, sin Puppeteer y sin navegador headless. El extractor de css crítico analiza los elementos de tu HTML y los compara con tus reglas CSS en milisegundos, enteramente en tu dispositivo.
- Extractor de CSS crítico online seguro: tu HTML y tu CSS nunca salen de tu dispositivo. El extractor de css crítico funciona por completo en tu navegador: sin subidas a servidores, sin transmisión de datos, 100 % privado. Seguro para hojas de estilos propietarias, herramientas internas y bases de código de producción.
- Tres formatos de salida para cada flujo de trabajo: el extractor de css crítico genera CSS minificado, un fragmento <style> listo para pegar o CSS formateado y legible, y puedes cambiar de formato con un clic. Muestra el número exacto de reglas y el ahorro en bytes para que puedas medir el impacto en el LCP.
- 100 % gratis para siempre: el extractor de css crítico es totalmente gratis, sin registro, sin plan premium, sin límites de tamaño de archivo y sin anuncios. Extrae CSS crítico de páginas ilimitadas sin ningún coste, para siempre.
Casos de uso habituales del extractor de CSS crítico
- Optimización del LCP en Core Web Vitals: elimina el CSS que bloquea el renderizado para mejorar las puntuaciones de Largest Contentful Paint (LCP), una métrica clave de Core Web Vitals. El extractor de css crítico identifica el CSS mínimo necesario para renderizar el contenido visible inicial, que insertas en línea en tu <head> mientras cargas la hoja de estilos completa de forma asíncrona.
- Optimización del rendimiento en Next.js y React: extrae CSS crítico para páginas de Next.js, React y Vue para reducir el Time to First Byte (TTFB) y el First Contentful Paint (FCP). El extractor de css crítico funciona con cualquier framework: pega el HTML renderizado y tu bundle CSS para obtener los estilos críticos listos para insertar en línea.
- Optimización de velocidad en Shopify y comercio electrónico: mejora las puntuaciones de velocidad de las páginas de una tienda Shopify insertando en línea el CSS crítico de páginas de producto, páginas de colección y la página de inicio. El extractor de css crítico ayuda a identificar qué reglas CSS del tema de Shopify se necesitan inicialmente para eliminar las peticiones de hojas de estilos que bloquean el renderizado.
- Mejora de la velocidad de páginas WordPress: extrae CSS crítico para temas de WordPress y reduce los recursos que bloquean el renderizado señalados por Google PageSpeed Insights. El extractor de css crítico funciona con cualquier tema de WordPress: pega el HTML de la página y el CSS de tu tema para obtener los estilos críticos en línea.
- Optimización del rendimiento de landing pages: maximiza la velocidad de carga de las landing pages insertando en línea solo el CSS necesario para el contenido visible inicial. El extractor de css crítico es ideal para landing pages de marketing, donde cada milisegundo de mejora en el LCP repercute directamente en la tasa de conversión.
- Optimización de generadores de sitios estáticos: automatiza la extracción de CSS crítico para sitios Astro, Hugo, Eleventy y Jekyll: pega el HTML generado y tu CSS para obtener los estilos críticos en línea. El extractor de css crítico te ayuda a implementar el patrón de CSS crítico sin depender de Puppeteer en tiempo de compilación.
¿Qué es el CSS crítico?
El CSS crítico es el conjunto mínimo de reglas CSS necesarias para renderizar el contenido visible inicial de una página web, es decir, la parte visible sin desplazarse. Cuando un navegador encuentra una etiqueta <link rel="stylesheet">, bloquea el renderizado hasta que se descarga y analiza toda la hoja de estilos. Si insertas el CSS crítico directamente en el <head> y cargas la hoja de estilos completa de forma asíncrona, eliminas el CSS que bloquea el renderizado, una de las optimizaciones con más impacto en las puntuaciones de Largest Contentful Paint (LCP) y First Contentful Paint (FCP). Nuestro extractor de css crítico identifica qué reglas CSS coinciden con los elementos de tu HTML y genera una hoja de estilos minificada y lista para insertar en línea.
Cómo funciona nuestro extractor de CSS crítico
- 1 Pega tu HTML y tu CSS: introduce el marcado HTML visible inicial y tu hoja de estilos CSS completa en los dos paneles de entrada. Usa «Cargar ejemplo» para probar el extractor con un ejemplo realista. Sube archivos .html y .css directamente con los botones de carga.
- 2 Haz clic en «Extraer CSS crítico»: el extractor analiza tu HTML para identificar todos los elementos (etiquetas, clases, ID, atributos) y luego compara cada regla CSS con esos elementos. Las reglas que coinciden se incluyen en la salida de CSS crítico. Las reglas base (html, body, *, :root), @keyframes y @font-face siempre se incluyen. El procesamiento se ejecuta por completo en tu navegador.
- 3 Elige el formato de salida y copia: cambia entre CSS minificado, un fragmento <style> listo para pegar o CSS formateado y legible. Cópialo al portapapeles o descárgalo. Inserta el fragmento <style> en línea en tu <head> y carga la hoja de estilos completa de forma asíncrona.
Qué se incluye en el CSS crítico
- Selectores coincidentes: reglas CSS cuyos selectores coinciden con elementos presentes en tu HTML, por nombre de etiqueta, clase, ID o atributo. Los selectores separados por comas se comprueban individualmente.
- Estilos base: las reglas dirigidas a html, body, *, :root, ::before y ::after se incluyen siempre, ya que afectan a toda la maquetación de la página y deben estar disponibles de inmediato.
- @keyframes y @font-face: los fotogramas clave de animación y las declaraciones @font-face se incluyen siempre, ya que otras reglas críticas los referencian y deben estar disponibles antes del renderizado.
- Reglas de @media: los bloques de consultas de medios se incluyen si sus selectores internos coinciden con tus elementos HTML, garantizando que los estilos adaptables visibles inicialmente estén disponibles en todos los tamaños de pantalla.
Limitaciones importantes
El extractor de css crítico usa análisis estático del HTML: compara los selectores CSS con los elementos HTML que le proporcionas. No ejecuta JavaScript, por lo que no detecta clases y elementos añadidos dinámicamente. Para obtener los resultados más precisos, pega el HTML renderizado en el servidor de tu página (el HTML inicial antes de que se ejecute JavaScript). Los selectores CSS complejos con combinadores descendientes (por ejemplo, .parent .child ) se comparan solo con el último token, lo que puede incluir algunas reglas no críticas. Revisa siempre la salida antes de insertarla en línea en producción.
Preguntas frecuentes
Un extractor de css crítico identifica el conjunto mínimo de reglas CSS necesarias para renderizar el contenido visible inicial y las genera como una hoja de estilos minificada y lista para insertar en línea. Nuestro extractor de css crítico online gratuito analiza los elementos de tu HTML y los compara con tus reglas CSS enteramente en tu navegador.
Copia la salida del fragmento <style> y pégalo dentro de tu etiqueta <head>. Después carga tu hoja de estilos completa de forma asíncrona: <link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">. Así eliminas el CSS que bloquea el renderizado y garantizas que la hoja completa se cargue para el contenido situado por debajo del pliegue.
Sí, por completo. El extractor de css crítico funciona enteramente en tu navegador. Tu HTML y tu CSS nunca se suben a ningún servidor y nunca salen de tu dispositivo.
Sí, 100 % gratis para siempre. Sin registro, sin cuenta, sin plan premium, sin límites de tamaño de archivo y sin anuncios.
El extractor de css crítico usa análisis estático del HTML. Los selectores descendientes complejos se comparan solo con el último token, lo que puede incluir algunas reglas de elementos que no son visibles inicialmente. Revisa siempre la salida antes de insertarla en línea en producción.
No: el extractor de css crítico usa análisis estático del HTML y no ejecuta JavaScript. Para obtener los resultados más precisos, pega el HTML renderizado en el servidor de tu página antes de que se ejecute JavaScript.
El extractor de css crítico admite selectores de etiqueta, clase, ID, atributo, separados por comas y de pseudoclase o pseudoelemento. Los combinadores complejos se admiten comparando con el último token de la cadena del selector.
Las páginas típicas logran una reducción del tamaño del CSS del 60 al 90 % para la ruta crítica: una hoja de estilos de 100 KB suele tener solo entre 5 y 15 KB de CSS crítico. El extractor muestra el número exacto de reglas y el ahorro en bytes.
No hay ningún límite artificial de tamaño de archivo. El límite práctico depende de la memoria disponible de tu navegador. Con hojas de estilos típicas, el extractor de css crítico las procesa al instante.