Carga especulativa

¿Qué es la carga especulativa?

La carga especulativa (speculative loading) significa que el navegador descarga, o incluso renderiza por completo, una página que el usuario aún no ha abierto, apostando a que irá allí a continuación. Si acierta, la siguiente navegación se siente casi instantánea. Si falla, se desperdician ancho de banda y memoria. En la web actual, la forma estándar de solicitarla es la Speculation Rules API.

Compatibilidad y estado

Ten cuidado antes de depender de ella. MDN marca la Speculation Rules API como experimental y no Baseline, porque no funciona en algunos de los navegadores más usados. La documentación de Chrome indica soporte en Chrome y Edge (prerenderizado desde la versión 109), ninguno en Firefox y en Safari solo tras un flag. El propio Chrome dice que las páginas prerenderizadas deben tratarse como una sugerencia y una mejora progresiva. Construye el sitio para que funcione sin ella y trata la especulación como un extra para los navegadores compatibles. Consulta las tablas de compatibilidad actualizadas en MDN y developer.chrome.com antes de fiarte de cualquier detalle de aquí.

Cómo funciona: prefetch y prerender

Declaras las reglas en un bloque <script type="speculationrules"> o en un archivo JSON externo indicado por la cabecera HTTP Speculation-Rules. Importan dos acciones:

• Prefetch descarga el cuerpo de la respuesta del documento de destino, pero no sus subrecursos. Es barato y el resultado se guarda en memoria para la siguiente navegación.
• Prerender carga y renderiza la página completa, con JavaScript y subrecursos, en una pestaña invisible. Activarla con un clic es casi instantáneo, pero cuesta memoria y ancho de banda, por lo que MDN aconseja usarla con moderación. Las URL prerenderizadas también se precargan con prefetch.

<script type="speculationrules">
{
  "prerender": [
    { "where": { "href_matches": "/pricing" }, "eagerness": "moderate" }
  ],
  "prefetch": [
    { "urls": ["/docs", "/blog"], "eagerness": "conservative" }
  ]
}
</script>

Las reglas tienen dos formas: una lista de urls explícitas o reglas de documento (where) que coinciden con los enlaces de la página. El ajuste eagerness indica cuándo empezar. Según MDN, immediate empieza lo antes posible, eager ante un leve indicio de intención, moderate cuando se pasa el cursor o el foco por un enlace durante un rato y conservative cuando el usuario empieza a hacer clic. Las reglas de lista usan immediate por defecto y las de documento conservative. Si tu sitio usa una Content Security Policy, las reglas en línea necesitan 'inline-speculation-rules' o un hash o nonce en script-src. Para detectar el soporte, usa HTMLScriptElement.supports("speculationrules").

Límites y reglas

• El prerenderizado se limita por defecto a páginas del mismo origen. El prerenderizado entre orígenes del mismo sitio requiere que el destino lo permita, y el prerenderizado entre sitios distintos no es posible por ahora (MDN).
• El prefetch entre sitios solo funciona si el usuario no tiene cookies del sitio de destino.
• Una respuesta que no sea 2xx (tras redirecciones) impide el prefetch y el prerender.
• Chrome conserva un prefetch unos cinco minutos, así que la especulación puede servir contenido algo desactualizado.
• El navegador puede omitir la especulación, por ejemplo con Save-Data, batería baja con ahorro de energía o límites de memoria (developer.chrome.com).

Relación con las pistas anteriores

Las speculation rules están pensadas para sustituir al obsoleto <link rel="prerender">, exclusivo de Chrome. Para precargar páginas completas, MDN indica que deben preferirse a <link rel="prefetch"> donde haya soporte, mientras que <link rel="prefetch"> sigue haciendo falta para subrecursos. Consulta la precarga de recursos y las pistas de recursos (resource hints). No confundas el prerenderizado del navegador con el prerenderizado en la compilación, que genera HTML estático por adelantado en tu lado.

Errores comunes

• Especular sobre URL con efectos secundarios. Cerrar sesión, añadir al carrito, códigos de un solo uso y contadores de uso no deben ejecutarse en una carga especulativa. MDN sugiere comprobar la cabecera Sec-Purpose (prefetch o prefetch;prerender) y aplazar el efecto.
• Contar los prerenders como visitas. La analítica y las impresiones publicitarias pueden dispararse en una página que nadie vio. Aplázalas hasta la activación con document.prerendering y el evento prerenderingchange.
• Prerenderizarlo todo. Usa conservative o moderate y prerenderiza solo páginas con alta probabilidad de visita.
• Depender de ello. Sin soporte en Firefox o Safari, el primer clic en esos navegadores sigue siendo una carga normal.
• Olvidar la ventana de caché. El contenido que debe estar al día requiere cuidado, o Clear-Site-Data con prefetchCache o prerenderCache.

Carga especulativa y pruebas de rendimiento

La especulación ayuda a la página siguiente, así que se nota como una navegación más rápida, a menudo en el Largest Contentful Paint, en las páginas sobre las que se especuló. Una prueba de laboratorio que abre una URL en frío normalmente no se beneficia, y mide la base que aún debes optimizar. Mantén primero sana esa base. La monitorización de velocidad de página de LoadFocus ejecuta auditorías Lighthouse desde 25 regiones en la nube y sigue las Core Web Vitals a lo largo del tiempo, y el verificador gratuito de Core Web Vitals da una instantánea rápida. Para los fundamentos de las páginas lentas, consulta cómo arreglar páginas que cargan despacio (en inglés).

Preguntas frecuentes: carga especulativa

¿Todos los navegadores admiten la Speculation Rules API?

No. MDN la marca como experimental y no Baseline. Según la documentación de Chrome, la admiten Chrome y Edge, Firefox no, y Safari la tiene tras un flag. Úsala como mejora progresiva.

¿Cuál es la diferencia entre prefetch y prerender?

Prefetch descarga solo el HTML de la página. Prerender carga y renderiza la página completa, JavaScript incluido, en una pestaña oculta para mostrarla al instante cuando el usuario hace clic.

¿Tiene algún coste la carga especulativa?

Sí. La especulación que no se usa desperdicia ancho de banda, memoria y CPU, tanto del visitante como de tu servidor. Prerenderiza solo páginas con alta probabilidad de visita.

¿Puede romper mi analítica?

Puede, si tu analítica se dispara al cargar. Una página prerenderizada ejecuta sus scripts antes de que el usuario la vea, así que aplaza el seguimiento de visitas hasta la activación.

¿Es lo mismo que la carga diferida?

No. La carga diferida retrasa recursos que la página actual quizá aún no necesita. La carga especulativa obtiene recursos de una página que el usuario podría abrir a continuación.