Sugerencias
← TIL
~3 min de lectura
#performance#astro#chrome#ux

Navegaciones instantáneas con Speculation Rules API en Astro 6

Si todavía pensás que el prefetch por JavaScript es el límite de la experiencia de navegación, hay un cambio de paradigma que tenés que conocer. En 2026, la Speculation Rules API nativa de Chromium es el estándar para lograr que las navegaciones subsecuentes se sientan prácticamente instantáneas, reduciendo drásticamente la latencia percibida sin ensuciar el thread principal con workers innecesarios.

El salto de Prefetch a Prerender

A diferencia del <link rel="prefetch"> tradicional que solo descarga el recurso en caché, la Speculation Rules API permite al navegador renderizar la página completamente antes de que el usuario haga click. Cuando la navegación ocurre, el navegador simplemente intercambia el documento actual por el ya renderizado.

En Astro 6, esto se activa manteniendo el flag experimental en tu configuración:

astro.config.mjs
export default defineConfig({
  prefetch: {
    prefetchAll: true,
    defaultStrategy: 'viewport'
  },
  experimental: {
    clientPrerender: true 
  }
});

Document Rules: Especulación por Selectores

La verdadera ventaja aparece cuando dejás que el navegador determine qué rutas prerenderizar mediante reglas declarativas. Usar Document Rules permite que el navegador identifique qué enlaces prerenderizar basados en selectores CSS o patrones de URL.

Astro 6 inyecta estas reglas automáticamente, pero podés personalizarlas para que, por ejemplo, ignore cualquier enlace con la clase .no-prerender o rutas de /admin/*.

El Peligro de los Efectos Secundarios

Como el navegador ejecuta el JS en segundo plano, tus analíticas podrían registrar visitas falsas. La solución es simple pero obligatoria:

if (document.prerendering) {
  document.addEventListener('prerenderingchange', initAnalytics, { once: true });
} else {
  initAnalytics();
}

El Spiky POV de Hugo

Dejar que Astro gestione los prefetches con workers es una buena base, pero usar la Speculation Rules API permite aprovechar capacidades nativas del navegador que antes requerían soluciones complejas en JavaScript. Si tu audiencia usa Chrome o Edge, habilitar esto es una optimización de bajo costo con un impacto masivo en la UX percibida.

¿Ya probaste la diferencia de velocidad? En una de nuestras implementaciones observamos una reducción de ~1.2s a ~320ms en la navegación hacia páginas prerenderizadas.

La mayoría de los sitios siguen optimizando la descarga de recursos. La Speculation Rules API cambia el juego: la mejor navegación es la que ya terminó de renderizarse antes de que el usuario decida visitarla.

Explorá nuestra arquitectura de performance orientada a Core Web Vitals y UX percibida.

Enlace copiado al portapapeles