Los invisibles de la CDN

Speculation rules, tu web anticipando el siguiente clic de tus visitantes

Hay una verdad incómoda en el comercio electrónico: por mucho que optimices tu web, el usuario percibe lentitud en el momento exacto en que hace clic y espera. Ese pequeño parón entre que pulsa un enlace y la página nueva aparece es donde se pierden conversiones, donde la gente se impacienta y donde un competidor más rápido te gana la venta.

En Transparent Edge llevamos tiempo dándole vueltas a este problema desde el borde de la red, y hemos incorporado una de las herramientas más interesantes que ha llegado a la web en los últimos años: las Speculation Rules. Ya las tienes disponibles en nuestros plugins para Magento 2, WordPress y PrestaShop, y hoy queremos contarte qué son, por qué importan y, sobre todo, qué cambian para tus clientes.

Qué son exactamente las Speculation Rules

La idea es simple y potente: el navegador prepara la siguiente página antes de que el usuario haga clic en ella.

La Speculation Rules API es un estándar moderno que permite indicarle al navegador qué enlaces tienen más probabilidad de ser visitados a continuación por el usuario, para que vaya adelantando trabajo. 

Existen dos modos:

  • Prefetch: el navegador descarga por adelantado el HTML de la página candidata. Cuando el usuario hace clic, buena parte del trabajo ya está hecho.
  • Prerender: el navegador va más allá y renderiza la página completa en segundo plano. Al hacer clic, la transición es prácticamente instantánea, como si la página ya estuviera ahí.

La diferencia con técnicas anteriores como <link rel="prefetch"> es que las Speculation Rules son mucho más inteligentes y configurables. Permiten definir reglas por la probabilidad de clic, excluir rutas concretas y dejar la decisión final al navegador según las condiciones del dispositivo y la conexión.

El problema de hacerlo manualmente

Aquí está el matiz que justifica nuestro trabajo. Las Speculation Rules son fantásticas, pero mal configuradas pueden meterte en problemas serios:

  • Si haces prerender de un enlace de «añadir al carrito», puedes acabar disparando acciones que el usuario no ha confirmado.
  • Si prerenderizas la página de logout, puedes cerrarle la sesión sin querer.
  • Si adelantas demasiadas páginas, consumes ancho de banda y recursos del servidor de forma innecesaria.

En un e-commerce hay decenas de URL que no deberían especularse. Configurarlas correctamente requiere conocer bien la plataforma y mantener esas reglas actualizadas con cada cambio de la tienda. Es justo el tipo de tarea tediosa y propensa a errores que no debería recaer sobre ti.

Qué hemos hecho nosotros

Hemos integrado las Speculation Rules directamente en nuestros plugins, con la configuración pensada para cada plataforma y aplicada desde el edge. En la práctica, esto significa tres cosas para ti:

Cero configuración. Activas el plugin y las reglas se generan e inyectan automáticamente. No tienes que tocar código ni entender la API.

Exclusiones inteligentes de serie. Las rutas sensibles (carrito, checkout, cuenta de usuario, logout, paneles de administración)  quedan excluidas por defecto. Adelantamos lo que acelera la navegación, no lo que puede romperla.

Aplicación en el borde. Como inyectamos las reglas desde nuestra red de distribución, no añadimos peso ni lógica adicional a tu servidor de origen. El trabajo lo hace la infraestructura que ya tienes con nosotros.

Qué gana tu sitio web, y tu negocio

Para el visitante, la navegación se siente instantánea. Pasará de la página de categoría a la ficha de producto, o de la ficha al siguiente producto y dejará de tener esa pequeña espera que, sumada clic a clic, agota la paciencia.

Esa sensación de fluidez tiene consecuencias medibles en el sitio donde se activa: una navegación más rápida tiende a traducirse en más páginas vistas por sesión, menos abandono y mejores ratios de conversión. Y como las métricas de rendimiento percibido influyen en el posicionamiento, también es una palanca que juega a favor de tu SEO.

La mejor parte es que todo esto sucede sin que tengas que hacer nada distinto a lo que ya haces, puedes seguir usando tu tienda con normalidad.

Las Speculation Rules son avances transparentes al usuario, que no los verá como una funcionalidad y sin embargo, podrá notar en cada clic. Nosotros nos hemos encargado de la parte difícil, la de configurarlas, evitar los riesgos y aplicarlas desde el edge, para que tú solo tengas que disfrutar de una web más rápida.

Diego Suárez es director de Tecnología de Transparent Edge.

Si alguna vez buscas a Diego, lo encontrarás con casi toda probabilidad donde haya un sistema operativo y no lo hallarás buscando el camino fácil, sino afrontando la alternativa más compleja. Estar siempre en el filo de la navaja le confiere la versatilidad y la visión necesarias para desarrollar la estrategia de tecnología que es el centro gravitacional de Transparent Edge. A caballo siempre entre desarrollo y sistemas, no por ello ha dejado de lado otras áreas, preocupándose por mantener el contacto con el usuario, que es para quien trabaja toda empresa tecnológica.


Preguntas frecuentes

Los navegadores basados en Chromium (Chrome, Edge, Opera) tienen soporte nativo desde versiones recientes. Firefox y Safari aún no implementan la API. En los navegadores sin soporte, el bloque de reglas se ignora sin afectar al comportamiento de la página: los visitantes desde esos navegadores no se benefician del prerenderizado, pero la experiencia es idéntica a la que ya tienen.

Las páginas prerenderizadas solo registran visita y disparan etiquetas de seguimiento cuando el usuario navega efectivamente a esa URL, no cuando el navegador las prepara en segundo plano. Los navegadores que soportan la API exponen document.prerendering para que los scripts de terceros puedan detectar ese estado y diferir su ejecución hasta la activación real. Aun así, si usas una implementación de analítica personalizada, conviene verificarlo antes de activar prerender en páginas con conversiones críticas.

Las peticiones especulativas pasan por la red de Transparent Edge igual que cualquier otra petición. Si la URL tiene una respuesta cacheada en el edge, el prerenderizado la sirve desde ahí sin llegar al origen. Si la URL no está en caché o tiene cabeceras Cache-Control: no-store o private, la petición sube al servidor de origen. Por eso la configuración que hemos aplicado excluye por defecto rutas como el carrito o el checkout, que habitualmente son privadas o tienen caché desactivada. Prerenderizarlas generaría carga innecesaria en el origen sin beneficio real para el visitante.