¿Qué es Speculative Loading? Así carga WordPress las páginas antes del clic

Haces clic en un enlace y la siguiente página simplemente está ahí. Sin pantalla en blanco, sin esperas. Detrás de eso muchas veces no hay un servidor más rápido, sino un navegador que se ha adelantado. Eso es justamente Speculative Loading: el navegador calcula qué página vas a abrir a continuación y la va cargando por si acaso. Si acierta, el cambio de página parece instantáneo. Si se equivoca, habrá cargado unos cuantos kilobytes para nada. Desde WordPress 6.8, esta técnica viene integrada de serie en WordPress, y muchos propietarios de sitios web ni siquiera saben que el suyo ya la utiliza. Aquí descubrirás cómo funciona todo esto, qué configura WordPress de forma predeterminada y cuándo te conviene hacer ajustes.

¿Qué es Speculative Loading? Una explicación sencilla

Speculative Loading, que en español vendría a ser carga especulativa, es el término general para las técnicas con las que un navegador solicita páginas antes de que alguien las abra de verdad. Especulativa, porque nadie sabe con seguridad si el visitante llegará a hacer clic en el enlace. El navegador hace una apuesta.

Imagina al camarero atento de tu cafetería de siempre. Te ve entrar por la puerta y empieza a prepararte el capuchino antes de que hayas pedido nada. Casi siempre acierta, y tienes tu café sin esperar. Si por una vez pides un té, ese capuchino se ha preparado para nada. Speculative Loading funciona más o menos así.

La idea no es nueva. Con <link rel="prefetch"> y <link rel="prerender"> ya existían hace años indicaciones con las que los sitios web podían recomendar al navegador páginas para cargar por adelantado, y bibliotecas como instant.page o Quicklink añadían lo mismo mediante JavaScript. Nada de aquello era realmente fiable. Chrome incluso sustituyó hace tiempo el antiguo rel="prerender" por una variante recortada que ya ni siquiera renderiza. Por eso, cuando hoy se habla de Speculative Loading, casi siempre se trata de la Speculation Rules API que Google introdujo en Chrome.

¿Y por qué tanto esfuerzo? Porque el tiempo de carga influye directamente en las Core Web Vitals. Si una página se prepara por completo en segundo plano, el Largest Contentful Paint (LCP) que percibe el visitante es prácticamente cero. Más rápido, imposible.

¿Cómo funciona la Speculation Rules API?

El sitio web le da al navegador unas cuantas reglas. Estas reglas se escriben en JSON dentro de un bloque del tipo speculationrules. Así es una regla sencilla:

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

Dicho en palabras sencillas: todos los enlaces de este sitio se pueden renderizar por adelantado en cuanto el visitante muestre interés, por ejemplo al dejar el ratón un momento sobre el enlace. Las reglas de este tipo, que se refieren a los enlaces del documento, se llaman Document Rules. Además existen las List Rules, con las que le das al navegador una lista fija de URL, por ejemplo la siguiente página de una serie de artículos.

Hay dos cosas que hacen la API agradablemente sencilla. Primero, al final es el navegador quien decide si sigue la regla. Si la batería está casi agotada o la memoria anda justa, simplemente no lo hace. Segundo, los navegadores que no conocen la API ignoran este bloque sin más. Así que nada puede romperse. Por cierto, en lugar de en el HTML, las reglas también pueden enviarse mediante una cabecera en la respuesta del servidor (Speculation-Rules), algo que usan sobre todo los CDN.

Prefetch o Prerender: ¿cuál es la diferencia?

La Speculation Rules API tiene dos modos, y la diferencia entre ellos es mayor de lo que sugieren sus nombres.

Con Prefetch, el navegador solo recoge el HTML puro de la página de destino y lo guarda a mano durante un rato. Las imágenes, hojas de estilo y scripts se quedan fuera, y no se ejecuta nada. Cuando el visitante hace clic, se ahorra la espera al servidor, es decir, básicamente el Time to First Byte. El resto lo carga el navegador como siempre. Prefetch es barato y apenas tiene efectos secundarios.

Con Prerender, el navegador va a por todas. Carga la página completa con imágenes, CSS y JavaScript en una pestaña invisible y la deja totalmente montada. Al hacer clic, simplemente cambia la página visible por esa. Para el visitante es como si la página hubiera estado ahí desde siempre. El precio: más consumo de datos, más potencia de cálculo, y JavaScript se ejecuta aunque quizá el visitante nunca llegue a ver la página. Por motivos de seguridad, Prerender solo funciona de forma predeterminada con páginas del mismo dominio.

Como regla general: Prefetch es la opción segura por defecto, y Prerender es el turbo para las páginas que muy probablemente se abrirán a continuación.

No debes confundir ninguno de los dos con preload y preconnect. Estas indicaciones aceleran archivos de la página actual, como las fuentes o la imagen más grande. Cómo usarlas correctamente te lo explicamos en nuestro artículo Usar preload y preconnect para fuentes y recursos en WordPress.

¿Cuándo carga el navegador por adelantado? Los cuatro niveles de eagerness

Con eagerness (en español, algo así como afán o impaciencia) decides con cuánta antelación puede empezar el navegador. Cuanto antes empiece, más tiempo se gana, pero también más a menudo se equivoca.

• immediate: de inmediato, en cuanto el navegador lee la regla. Solo tiene sentido para un puñado de URL de las que estés muy seguro.
• eager: casi igual de pronto. Chrome ha afinado este comportamiento en las últimas versiones, de modo que este nivel queda ahora entre immediate y moderate.
• moderate: en el ordenador, la especulación empieza cuando el puntero del ratón se detiene unos 200 milisegundos sobre un enlace, o antes si se pulsa el botón del ratón. En los smartphones, donde no existe el hover, Chrome se fija en otras señales, como el toque en la pantalla.
• conservative: solo cuando el visitante hace clic de verdad, o más exactamente, en el momento en que se pulsa el botón del ratón o el dedo toca la pantalla. Hasta que el clic termina pasa apenas una fracción de segundo. La ventaja es pequeña, pero a cambio casi ninguna especulación cae en saco roto.

Además, Chrome se encarga por sí mismo de que nadie se pase. Con moderate y conservative, el navegador mantiene como máximo dos especulaciones a la vez y descarta la más antigua en cuanto llega una nueva. Con immediate y eager se permiten hasta 50 Prefetch y 10 Prerender. En modo de ahorro de energía, con el ahorro de datos activado, cuando queda poca memoria o si el usuario ha desactivado la precarga de páginas en los ajustes, Chrome no especula en absoluto. Google describe los detalles en la documentación para Chrome.

Speculative Loading en WordPress: qué ocurre automáticamente desde la versión 6.8

El Performance Team de WordPress probó primero la función como plugin independiente con el nombre Speculative Loading. Llegó a funcionar en más de 50.000 sitios web y, según los datos de HTTP Archive y del Chrome UX Report, la tasa de aprobación del Largest Contentful Paint de esos sitios mejoró alrededor de un 1,9 por ciento en la mediana. Parece poco, pero para una función que no te da ningún trabajo es una ganancia nada despreciable. Con WordPress 6.8, en abril de 2025, todo ello pasó al núcleo. La configuración predeterminada es prudente a propósito:

• Modo prefetch, eagerness conservative. Es decir, solo se carga el HTML, y únicamente cuando el clic ya ha empezado.
• Solo para visitantes que no han iniciado sesión. Quien ha iniciado sesión ve la barra de herramientas y a menudo contenido personal. Esas páginas no acaban en ninguna caché y sería caro cargarlas por adelantado.
• Solo con Pretty Permalinks. Si en Ajustes › Enlaces permanentes sigue seleccionada la opción Simple, la función permanece desactivada.
• Ninguna URL con parámetros. Todo lo que lleve un signo de interrogación en la dirección queda excluido, por ejemplo la búsqueda o un enlace como ?add-to-cart=123 en una tienda online. También quedan vetados el área de administración, la página de inicio de sesión y los enlaces con rel="nofollow".
• Excepciones mediante clase. Los enlaces con la clase no-prefetch, o los enlaces dentro de un bloque con esa clase, nunca se cargan por adelantado. La clase no-prerender solo excluye el renderizado por adelantado.

¿Por qué tanta cautela? El plugin todavía usaba por defecto Prerender con moderate y así lograba más velocidad. Pero con millones de sitios web y un sinfín de combinaciones de temas y plugins, al equipo le pareció demasiado alto el riesgo de que se ejecutara JavaScript en páginas que nadie llega a visitar. Así lo explica también el equipo en el anuncio oficial. Si quieres más, puedes seguir instalando el plugin Speculative Loading. Este añade en Ajustes › Lectura una interfaz en la que puedes cambiar el modo y el nivel de eagerness sin código y, si lo deseas, activar la función también para los usuarios que han iniciado sesión.

Cómo ajustar o desactivar Speculative Loading en WordPress

Sin el plugin, se hace mediante filtros. Los siguientes fragmentos van en el functions.php de tu Child Theme o, mejor aún, en un pequeño plugin propio, para que sobrevivan a un cambio de tema.

Usar Prerender en lugar de Prefetch:

add_filter( 'wp_speculation_rules_configuration', function ( $config ) {
	if ( is_array( $config ) ) {
		$config['mode']      = 'prerender';
		$config['eagerness'] = 'moderate';
	}
	return $config;
} );

La comprobación con is_array() es importante. Para los usuarios que han iniciado sesión y para los sitios sin Pretty Permalinks, WordPress pasa aquí null, y gracias a la comprobación la función sigue desactivada en esos casos.

Excluir determinadas secciones:

add_filter( 'wp_speculation_rules_href_exclude_paths', function ( $paths, $mode ) {
	$paths[] = '/go/*';
	if ( 'prerender' === $mode ) {
		$paths[] = '/carrito/*';
	}
	return $paths;
}, 10, 2 );

Candidatos típicos son las redirecciones de enlaces de afiliado que cuentan un clic al abrirse, un carrito de la compra o páginas cuyo contenido cambia constantemente. Las rutas se indican en relación con la página de inicio; si hay un subdirectorio, WordPress lo añade por sí solo. Con el segundo parámetro puedes excluir rutas solo para un modo, en el ejemplo, el carrito solo para el renderizado por adelantado.

Excluir enlaces concretos: Dale al enlace o al bloque que lo contiene la clase no-prefetch. En el editor de bloques puedes hacerlo en Avanzado, en el campo de clases CSS adicionales, sin tocar nada de código.

Desactivar Speculative Loading por completo:

add_filter( 'wp_speculation_rules_configuration', '__return_null' );

Solo deberías desactivar la función del todo si tienes un motivo concreto. Con la configuración predeterminada, prácticamente no cuesta nada.

¿Qué inconvenientes tiene Speculative Loading?

La ganancia de velocidad no sale del todo gratis. Estos son los puntos que deberías conocer:

Más carga en el servidor. Cada especulación es una petición real. Si un Page Cache entrega la página ya lista, el servidor apenas lo nota. Sin caché, cada Prefetch pone en marcha PHP y consultas a la base de datos como si hubiera llegado un visitante de verdad. Por eso, en un Shared Hosting con recursos justos, una configuración agresiva como immediate o eager puede notarse. A pequeña escala, lo mismo vale para los visitantes con un volumen de datos limitado.

Enlaces que desencadenan algo. En teoría, un enlace normal nunca debería cambiar nada. En la práctica, algunos lo hacen igualmente: enlaces para cerrar sesión, contadores de enlaces de afiliado, valoraciones con un clic o un rápido «Añadir al carrito». Al excluir todas las URL con parámetros, WordPress intercepta muchos de estos casos, pero no las direcciones bonitas como /go/proveedor/. Esas conviene que las excluyas de forma expresa.

Estadísticas distorsionadas. Prefetch no ejecuta JavaScript, así que las herramientas de analítica como Matomo o Google Analytics ni se enteran. Sin embargo, las estadísticas que se generan a partir de los archivos de registro del servidor, como las del panel de cliente de muchos proveedores de hosting, puede que cuenten esas peticiones como visitas. Con Prerender, JavaScript se ejecuta de verdad. Google Analytics y Google Publisher Tag esperan por sí solos hasta que la página se muestra realmente. Las herramientas que no lo hacen cuentan visitas que nunca se produjeron. Para tus propios scripts hay una comprobación sencilla:

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

En el servidor puedes reconocer las peticiones especulativas por la cabecera Sec-Purpose, que lleva el valor prefetch o prefetch;prerender.

El contenido puede estar algo desactualizado. Chrome conserva las páginas cargadas por adelantado durante unos minutos. Con conservative eso no importa, porque el clic llega enseguida. Con los niveles más tempranos, una página cuyo contenido cambia rápido, como un directo minuto a minuto, puede tener ya unos minutos de antigüedad al abrirse.

¿Qué navegadores son compatibles con Speculative Loading?

Chrome es totalmente compatible con la Speculation Rules API, igual que Edge, Opera y otros navegadores basados en Chromium. Safari está trabajando en su propia implementación, aunque en las versiones recientes todavía está escondida tras una opción para desarrolladores. Firefox, de momento, no es compatible con la API.

Parece una carencia, pero en la práctica no es ningún problema. Como los navegadores ignoran las reglas que no entienden, se benefician todos los que usan Chrome, y para el resto sencillamente no cambia nada. En la mayoría de los sitios web, Chrome se lleva de todos modos, y con diferencia, la mayor parte del tráfico. Ya a principios de 2025, es decir, antes de su llegada a WordPress, más del 8 por ciento de todas las visitas a páginas en Chrome pasaban por Speculation Rules, según el WordPress Performance Team.

¿Cómo compruebo si Speculative Loading está activo en mi sitio web?

Tres formas rápidas:

1. Mira el código fuente. Abre tu sitio en una ventana privada, para no tener la sesión iniciada, y busca speculationrules en el código fuente. WordPress coloca las reglas en el pie de página.
2. Usa las Chrome DevTools. En la pestaña Application encontrarás, dentro de Background services, la sección Speculative loads. Allí ves las reglas activas, qué URL se han cargado por adelantado y por qué una especulación no ha salido bien.
3. Revisa las cabeceras. Si un CDN añade sus propias reglas, por ejemplo Cloudflare con la función Speed Brain, no aparecen en el HTML, sino en la cabecera Speculation-Rules de la respuesta. En ese caso puede que haya dos conjuntos de reglas funcionando en paralelo. No hace daño, pero conviene que lo sepas antes de tocar algo en un sitio y preguntarte por qué no cambia nada.

Cómo te ayuda InspectWP a vigilar el tiempo de carga y los resource hints

El informe de InspectWP te muestra en primer lugar qué versión de WordPress usa tu sitio web. A partir de la 6.8 sabrás así que Speculative Loading está activo de forma predeterminada para los visitantes sin sesión iniciada, siempre que los Pretty Permalinks estén activados. En la sección HTML, el informe también enumera los resource hints clásicos, es decir, Prefetch, DNS Prefetch, Preconnect y Prerender, y marca las entradas que aparecen varias veces en el código fuente. Eso suele indicar plugins que se estorban entre sí. Si ahí aparece todavía un antiguo rel="prerender", es un buen momento para pasarte a la Speculation Rules API. Como las páginas cargadas por adelantado cuestan mucho menos con caché, también merece la pena echar un vistazo a los plugins de Caching detectados y a las cabeceras de la respuesta del servidor. Un informe gratuito te muestra en poco tiempo en qué punto está tu sitio web.