Speculation Rules API: Navegación Instantánea en Sitios Multi-Página sin JavaScript

La Speculation Rules API permite que tu sitio multi-página (MPA) se sienta tan rápido como una SPA — sin cargar un solo kilobyte extra de JavaScript. En lugar de convertir todo tu sitio en una aplicación React con client-side routing, le dices al navegador qué páginas prerenderizar antes del clic. El resultado: navegaciones en 0ms percibidos, mejora de INP de hasta 40%, y cero complejidad adicional. En Mintec lo implementamos en tres sitios Astro + Cloudflare Pages durante julio de 2026. Esto es lo que aprendimos.

El problema que nadie quiere admitir

Las SPAs (Single Page Applications) resolvieron un problema real en 2016: las navegaciones entre páginas eran lentas. La solución fue cargar todo en JavaScript y manejar el routing en el cliente. Funcionó — pero a un costo altísimo.

La tabla muestra el dilema: las MPAs ganan en JavaScript, rendimiento inicial y simplicidad. Pero pierden en la velocidad de navegación entre páginas. La Speculation Rules API elimina esa desventaja.

Cómo funciona: prefetch vs prerender

La API acepta un script JSON dentro de tu HTML que declara qué URLs el navegador debe preparar proactivamente:

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "document",
      "where": {
        "href_matches": "/blog/*"
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

Dos modos de operación:

El campo eagerness controla cuándo se activa:

Dato clave: La diferencia entre moderate (hover) y conservative (mousedown) puede ser de 300-500ms. Con moderate, la página ya está renderizada cuando el dedo toca la pantalla. Con conservative, apenas empieza.

Astro 6 lo activa con una línea

Astro 6 incluye integración nativa con Speculation Rules a través de clientPrerender. En lugar de escribir el JSON manualmente, Astro analiza los enlaces de tu sitio y genera las reglas óptimas automáticamente:

// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  prefetch: true,
  experimental: {
    clientPrerender: true,
  },
});

Con esta configuración, Astro 6 automáticamente:

• Prerenderiza enlaces en el viewport (eagerness: moderate)
• Detecta navegación primaria y aplica eagerness: eager
• Respeta los límites de Chrome (máximo 2 prerenders simultáneos)
• Omite recursos protegidos por autenticación

Para afinarlo por página, usas el atributo data-astro-prefetch en enlaces individuales:

<a href="/producto/destacado" data-astro-prefetch="hover">
  Ver producto destacado
</a>

Lo que medimos en tres proyectos Mintec

Implementamos Speculation Rules en tres sitios Astro durante julio 2026. Aquí están los números reales:

El hallazgo más importante: La mejora es mayor cuanto más pesada es la página. En el portfolio de marca con galerías 4K y videos de fondo — donde cada navegación completa tomaba 720ms — el prerenderizado redujo la latencia percibida en casi un 90%. Justo donde los presupuestos de rendimiento para sitios multimedia son más difíciles de cumplir, más ayuda.

El costo: casi invisible

Chrome impone límites prudentes para evitar abusos:

En nuestros tres sitios, el impacto en el servidor fue nulo (todo es estático en Cloudflare Pages, con TTFB de 50-120ms desde cualquier región). El impacto en el cliente fue imperceptible — los usuarios en dispositivos de gama media (Moto G, Galaxy A series) no reportaron diferencia en consumo de batería o datos.

Cuándo activarlo (y cuándo no)

Regla general: si tu sitio tiene más de 5 páginas y los usuarios navegan entre ellas, Speculation Rules aporta valor medible.

El stack que recomendamos

En Mintec, el stack que mejor aprovecha Speculation Rules es:

1. Astro 6+ (generación estática) → HTML mínimo, sin JavaScript base
2. Cloudflare Pages (CDN global) → TTFB de 50-120ms desde cualquier región
3. clientPrerender: true → prerenderizado automático en Chromium CSS View Transitions como complemento → animaciones nativas entre páginas sin JS

Con este stack, un sitio de contenido multi-página se siente idéntico a una SPA para el ~70% de usuarios en Chrome/Edge — pero sin cargar los 85-150KB de React, sin hidratación, y con Lighthouse 99-100.

Para el 30% restante en Safari/Firefox, la experiencia es simplemente una MPA normal (que ya es excelente en Astro). La mejora progresiva perfecta: los que pueden, ganan; los que no, no pierden nada.

Lo que aprendimos implementándolo

Tres lecciones de nuestras implementaciones en julio 2026:

1. No prerenderices formularios ni páginas POST. Si prerenderizas una página que espera un token CSRF o datos de sesión, Chrome la descartará silenciosamente al activarse (porque el contexto de prerender está aislado). Excluye rutas como /checkout, /admin, /account de las reglas de speculation.

2. Combínalo con View Transitions, no compitas con ellas. La Speculation Rules API elimina la latencia de red. La View Transitions API hace que la transición se vea bien. Juntas, crean una experiencia que los usuarios describen como "más rápida que una app nativa". Pero no uses animaciones JavaScript pesadas en páginas prerenderizadas — el navegador ya está al límite de memoria.

3. Mide lo que importa. No midas "tiempo de prerender" — el usuario nunca ve eso. Mide INP (Interaction to Next Paint) en navegaciones reales con datos de campo (CrUX/RUM). En nuestros tres proyectos, la mejora de INP fue el indicador más honesto: de 98-145ms a 62-88ms. Eso es lo que el usuario siente.

Implementamos Speculation Rules en tres proyectos Astro entre junio y julio de 2026. Los datos de rendimiento provienen de mediciones reales con Chrome User Experience Report y Web Vitals en producción. ¿Quieres saber si tu sitio se beneficiaría? En Mintec ofrecemos una auditoría gratuita de 30 minutos: analizamos tu estructura de navegación, medimos tu INP actual, y te decimos exactamente qué páginas prerenderizar.