Mirá cómo hice que mi web vuele en el móvil (Itapúa Speed Connect)
Testear tu web con fibra óptica y 5G en la oficina no sirve de nada si tu usuario real está en una ruta de Itapúa con 3G intermitente. La verdadera prueba ácida de performance es la latencia rural. Si dependés de React o cualquier framework cargado de JavaScript para renderizar tu contenido 'Above the Fold', el usuario ya cerró la pestaña antes de ver el logo. En campa.dev logré bajar el LCP de 4.5s a menos de 1.2s en conexiones inestables aplicando tres reglas innegociables de performance frontend.
La trampa de Lighthouse
Lighthouse te puede dar 100/100 en el entorno de laboratorio, pero en el terreno las cosas cambian. Cuando el ancho de banda es escaso, el navegador tiene que priorizar qué dibuja primero. Si no le das instrucciones claras, descarga scripts que bloquean el renderizado del texto y la imagen principal.
| Aspecto | Sin Optimizar | Con Astro 6 + Priority |
|---|---|---|
| Largest Contentful Paint (LCP) | 4.5s | 1.2s |
| First Contentful Paint (FCP) | 2.8s | 0.9s |
| Resource Load Delay | 810ms | 95ms |
La solución técnica
El fix más rápido y con mayor impacto que podés aplicar hoy es el uso de fetchpriority="high" combinado con los componentes de optimización nativos de Astro.
---
import { Image } from "astro:assets";
import heroImage from "../assets/hero.jpg";
---
<!-- Precarga de tipografía crítica en el Head -->
<link rel="preload" href="/fonts/manrope-var.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
<!-- Hero Image con prioridad máxima -->
<Image
src={heroImage}
alt="Dashboard de métricas agrícolas"
fetchpriority="high"
loading="eager"
/>La clave acá es loading="eager" más fetchpriority="high". Con esto le decís al navegador: "Soltá todo lo que estés haciendo y bajá esta imagen ya mismo".
Ojo: esta técnica es una bala de plata solo si tu CSS crítico es ligero (<10KB). En redes 3G saturadas, si la imagen 'prioritaria' compite con un CSS pesado por el poco ancho de banda disponible, podés terminar retrasando el primer pintado (FCP). Por suerte, Astro genera CSS atómico y mínimo por defecto, lo que nos permite usar este acelerador sin riesgos de contención.
Si querés profundizar en el atributo específicamente, el TIL fetchpriority="high": una línea que acelera tu web desglosa cuándo usarlo y cuándo puede ser contraproducente. Y si querés medir el impacto en un pipeline de CI, el de Lighthouse CI automatizado te da el setup completo.