Performance y Optimización CSS

El rendimiento CSS impacta directamente en la experiencia del usuario y en el SEO. Las malas prácticas comunes son: CSS bloqueante en el head que retrasa la primera pintura, selectores demasiado específicos que el navegador tarda en evaluar, y propiedades que causan reflow (cambiar width, height o margin obliga al navegador a recalcular todo el layout).

Las buenas prácticas incluyen: minimizar el CSS para producción, cargar fuentes con font-display: swap para evitar texto invisible durante la carga, usar will-change solo en elementos que definitivamente van a animarse, y Critical CSS (inlinar solo el CSS necesario para la primera pantalla visible). Herramientas como Lighthouse en Chrome DevTools miden el impacto.

/* 1. ANIMACIONES PERFORMANTES */
/* ✅ Usa transform y opacity - procesadas en GPU */
.bueno { transform: translateX(100px); opacity: 0; }

/* ❌ Evita animar propiedades que causan reflow */
/* .malo { width: 200px; margin: 20px; top: 50px; } */

/* 2. WILL-CHANGE - avisa al navegador de cambios */
.animacion-suave {
  will-change: transform;  /* solo cuando necesario */
}

/* 3. CONTAIN - aisla el rendering */
.componente-pesado {
  contain: layout style; /* aisla de reflows externos */
}

/* 4. CARGA CRÍTICA - CSS en head */
/* <link rel="preload" href="critical.css" as="style"> */

/* 5. VARIABLES PARA EVITAR REPETICIÓN */
:root { --color: #00E5A0; }
/* En vez de repetir el color 50 veces */