O Astro parte de uma vantagem enorme: por padrão envia zero JavaScript ao cliente. Mas isso sozinho não garante bons Core Web Vitals; o resto depende de decisões conscientes.
LCP: a imagem que importa
O maior elemento do viewport costuma ser uma imagem. Use o componente <Image /> do Astro para servir formatos modernos e tamanhos corretos, e pré-carregue apenas a imagem do hero.
---
import { Image } from 'astro:assets';
import hero from '../assets/hero.jpg';
---
<Image src={hero} alt="..." loading="eager" fetchpriority="high" />CLS: reserve o espaço
O deslocamento de layout vem de elementos que carregam sem dimensões. Defina width e height em imagens e iframes, e evite injetar conteúdo acima da dobra após a primeira renderização.
INP: menos JS, melhor INP
É aqui que o Astro brilha. Cada componente que você evita hidratar remove trabalho da thread principal. Use ilhas apenas onde houver interação real:
<Carousel client:visible />client:visible adia a hidratação até o componente entrar na tela.
Fontes sem piscar
Baixe as fontes e sirva-as localmente com font-display: swap. Nada de bloquear a renderização esperando o Google Fonts.
Resultado
Com essas regras, os projetos que entrego saem no verde no PageSpeed sem truques: é a consequência natural de enviar menos ao navegador.