Rendimiento web: Core Web Vitals en verde

1. Mide antes de optimizar

Usa PageSpeed Insights y mide en móvil con 4G lento. Anota LCP (carga), INP (interactividad) y CLS (estabilidad). Sin número inicial, optimizas a ciegas.

2. Imágenes: el 60% del peso

<!-- Responsive + lazy + dimensiones = sin CLS -->
<img src="cover-1.jpg" width="800" height="500"
     loading="lazy" decoding="async" alt="...">

• SVG para ilustraciones/logos, WebP/AVIF para fotos.
• Nunca subas fotos de 4MB: redimensiona a 1600px máx y comprime.
• loading="lazy" en todo lo que esté bajo el fold.

3. CSS y JS mínimos

<!-- JS al final y solo el necesario -->
<script src="../js/main.js" defer></script>

Este sitio: 1 CSS (~9KB) + 1 JS pequeño, cero frameworks. Resultado: carga < 1s en local.

4. Fuentes sin bloqueo

Sistema primero (system-ui). Si usas Google Fonts: display=swap + preload solo de la principal.

5. Presupuesto de rendimiento ✅

• HTML < 100KB, CSS+JS < 150KB
• Imágenes < 1MB total por página
• LCP < 2.5s, CLS < 0.1, INP < 200ms
• Cero errores en consola
• Funciona con red lenta (prueba DevTools → Slow 4G)