Astro parte de una ventaja brutal: por defecto envía cero JavaScript al cliente. Pero eso no garantiza buenos Core Web Vitals; el resto depende de decisiones conscientes.
LCP: la imagen que importa
El elemento más grande del viewport suele ser una imagen. Usa el componente <Image /> de Astro para servir formatos modernos y tamaños correctos, y precarga solo la imagen del hero.
---
import { Image } from 'astro:assets';
import hero from '../assets/hero.jpg';
---
<Image src={hero} alt="..." loading="eager" fetchpriority="high" />CLS: reserva el espacio
El desplazamiento de diseño viene de elementos que cargan sin dimensiones. Define width y height en imágenes e iframes, y evita inyectar contenido por encima del fold después del primer render.
INP: menos JS, mejor INP
Aquí Astro brilla. Cada vez que evitas hidratar un componente, eliminas trabajo del hilo principal. Aplica islas solo donde haya interacción real:
<Carousel client:visible />client:visible retrasa la hidratación hasta que el componente entra en pantalla.
Fuentes sin parpadeo
Descarga las fuentes y sírvelas localmente con font-display: swap. Nada de bloquear el render esperando a Google Fonts.
Resultado
Con estas reglas, los proyectos que entrego salen en verde en PageSpeed sin trucos: es la consecuencia natural de enviar menos al navegador.