Generador de CSS Crítico para Acelerar tu Sitio

Cómo Usar tu CSS Crítico

1. 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>

2. 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>

3. 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);
     });
   });