Kigo Studio
Generador deCSS Crítico paraAcelerar tu Sitio
Extrae el CSS mínimo necesario para renderizar el contenido visible encima del pliegue. Mejora la velocidad de carga, los Core Web Vitals y el posicionamiento SEO con CSS Crítico.
CSS Generado
Cómo Usar tu CSS Crítico
Paso 1: CSS Crítico en Línea
Pega el CSS generado dentro de una etiqueta <style> en el <head> de tu documento HTML. Colócalo arriba, antes de otras hojas de estilo o scripts bloqueantes.
Recuerda que podrías necesitar cambiar referencias a imágenes u otros assets
<style>
/* CSS Crítico para tu página */
/* ... El CSS Crítico aparecerá aquí ... */
</style>Paso 2: Cargar CSS No Crítico (Simple)
Coloca tus etiquetas <link> de CSS no crítico justo antes del cierre </body>. Esto permite que el navegador renderice el contenido inicial con el CSS crítico primero. ¡Recuerda eliminar estos mismos links del <head>!
<html>
...
<body>
...
<link rel="stylesheet" href="/css/vendors.min.css"> // Ejemplo
<link rel="stylesheet" href="/css/style.min.css"> // Ejemplo
</body>
</html>Paso 3 (Opcional): Diferir con JavaScript
Alternativamente, para una carga potencialmente más optimizada (especialmente en conexiones lentas), usa JavaScript en el <head> para cargar estilos no críticos después de que cargue el contenido. Usa esto en lugar del Paso 2. Actualiza el array stylesheets y asegúrate de eliminar los links originales del <head>.
window.addEventListener("DOMContentLoaded", function () {
console.log("Página cargada, ahora cargando hojas de estilo no críticas...");
// --- Define tus hojas de estilo no críticas aquí ---
let stylesheets = [
// "/css/vendors.min.css", // Ejemplo
// "/css/style.min.css", // Ejemplo
// Agrega todas las hojas de estilo que NO son CSS crítico
];
// ----------------------------------------------
let loadedCount = 0;
function checkAllStylesLoaded() {
loadedCount++;
if (loadedCount === stylesheets.length) {
console.log("Todas las hojas de estilo no críticas cargadas...");
}
}
stylesheets.forEach(function (href) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.href = href;
link.onload = checkAllStylesLoaded;
link.onerror = () => console.warn("Error al cargar hoja de estilo: " + href);
document.head.appendChild(link);
});
});Preguntas Frecuentes
¿Qué es el CSS Crítico?
El CSS Crítico se refiere al conjunto mínimo de reglas CSS requeridas para renderizar la porción visible de una página web (above the fold). Al extraer e incluir este CSS en tu HTML, el navegador puede renderizar contenido más rápido sin esperar a cargar todas las hojas de estilo, mejorando el rendimiento y los Core Web Vitals como First Contentful Paint (FCP).
¿Cómo funciona el Generador de CSS Crítico?
Nuestra herramienta usa un navegador headless para cargar tu página, analizar qué elementos son visibles en el viewport especificado, extraer sus estilos de todos los recursos CSS, y compilar un conjunto mínimo de reglas CSS necesarias para mostrar el contenido above-the-fold. Puedes personalizar las dimensiones del viewport, el tiempo de espera de renderizado y el manejo de JavaScript.
¿Por qué debería usar CSS Crítico?
El CSS Crítico mejora significativamente el rendimiento de carga de página al eliminar CSS que bloquea el renderizado y permitir que el navegador muestre contenido más rápido. Los beneficios incluyen tiempos de carga percibidos más rápidos, mejores puntuaciones de Core Web Vitals (especialmente FCP y LCP), mejor posicionamiento SEO, y mejor experiencia de usuario, particularmente en móviles o conexiones lentas.
¿Cómo implemento CSS Crítico en mi sitio web?
Para implementar CSS Crítico, agrega el CSS generado dentro de una etiqueta
<style>en el<head>de tus documentos HTML. Luego, carga tus hojas de estilo regulares al final del body (enfoque simple) o con JavaScript que las cargue después de que el contenido de la página se haya renderizado (enfoque avanzado). Nuestra herramienta proporciona snippets de código para ambos métodos.