Prerender Until Script: El punto medio entre Prefetch y Prerender
Carga subrecursos y construye el DOM sin ejecutar scripts ni contaminar las analíticas
Origin Trial: prerender_until_script está disponible como un Origin Trial en Chrome 144 hasta la versión 150. Necesitas registrarte para obtener un token o habilitarlo localmente a través de chrome://flags/#prerender-until-script. Aún no se ha presentado un Intent to Ship.
Última revisión por Arjen Karel en marzo de 2026
Prerender Until Script: El nuevo modo para la carga especulativa
La latencia es el cuello de botella. Lo he dicho durante años, y sigue siendo el mayor problema en el rendimiento web. No importa cuánto optimicemos nuestro Critical Rendering Path o reduzcamos kilobytes de nuestros bundles, en última instancia estamos limitados por las leyes de la física y el tiempo de ida y vuelta (RTT) de la red.
Durante mucho tiempo, hemos intentado engañar a estas leyes usando Speculative Loading: adivinando a dónde irá el usuario a continuación y cargándolo de antemano. Hasta ahora, teníamos dos herramientas principales, y ninguna era perfecta:
- prefetch: Seguro y ligero, pero solo obtiene el HTML. El navegador aún tiene que analizar, construir el DOM y descubrir subrecursos (CSS, imágenes) después de que el usuario hace clic. Resuelve la espera de la red, pero no el trabajo de renderizado.
- prerender: La opción nuclear. Carga todo, ejecuta JavaScript y renderiza la página en una pestaña oculta en segundo plano. Es instantáneo, pero es costoso. Consume ancho de banda, memoria, y dispara píxeles de analíticas y ejecuta código para páginas que el usuario podría no ver nunca.
Necesitábamos un punto medio. La disponibilidad visual de un prerender sin el costo y el riesgo de ejecutar la lógica de la aplicación.
Cómo funciona prerender_until_script
prerender_until_script desacopla el análisis (parsing) de la ejecución. Cuando utilizas esta regla de especulación (Speculation Rule), le indicas al navegador que:
- Obtenga el documento (como un prefetch).
- Analice el flujo de HTML y construya el DOM.
- Ejecute el Preload Scanner. Esta es la parte crítica. El navegador descubre y descarga subrecursos como CSS de alta prioridad y la imagen de LCP.
En el momento en que el parser encuentra un punto de ejecución de JavaScript, pueden suceder dos cosas:
- Scripts síncronos: El parser se detiene inmediatamente.
- Scripts async/defer: Se descargan y se ponen en cola, pero no se ejecutan.
El navegador construye el esqueleto visual de la página: el diseño (layout), la tipografía, las imágenes. Pero la lógica de la aplicación permanece congelada. La página se queda en memoria, completamente maquetada, esperando a que el usuario haga clic.
Cuando ocurre el clic, la página se intercambia instantáneamente. El JavaScript se ejecuta, los manejadores de eventos se asocian y tus analíticas se disparan exactamente cuando deberían.
Prefetch vs prerender_until_script vs prerender
| Acción | Obtiene HTML | Analiza HTML | Obtiene subrecursos | Ejecuta scripts | Dispara analíticas |
|---|---|---|---|---|---|
prefetch | Sí | No | No | No | No |
prerender_until_script | Sí | Sí | Sí | No | No |
prerender | Sí | Sí | Sí | Sí | Sí* |
* El prerender completo puede protegerse contra analíticas prematuras usando document.prerendering, pero tienes que agregar ese código tú mismo.
Por eso prerender_until_script es importante. Obtienes la carga de subrecursos y la construcción del DOM de un prerender completo, pero sin la contaminación de analíticas y el costo de memoria de ejecutar JavaScript. Para los sitios de contenido con pesados scripts de terceros, este es el punto óptimo.
La Implementación
Implementamos esto usando la Speculation Rules API. Debido a que prerender_until_script es experimental (Origin Trial, Chrome 144 hasta 150), necesitas compatibilidad hacia atrás.
Los navegadores que no reconocen la clave prerender_until_script la ignorarán. Añade un fallback de prefetch para el mismo conjunto de URLs. Chrome deduplicará estas reglas y aplicará la acción más capaz disponible.
<script type="speculationrules">
{
"prerender_until_script": [
{
"source": "document",
"where": {
"and": [
{ "href_matches": "/*" },
{ "not": { "href_matches": "/logout" } },
{ "not": { "href_matches": "/cart" } }
]
},
"eagerness": "moderate"
}
],
"prefetch": [
{
"source": "document",
"where": {
"and": [
{ "href_matches": "/*" },
{ "not": { "href_matches": "/logout" } },
{ "not": { "href_matches": "/cart" } }
]
},
"eagerness": "moderate"
}
]
}
</script>
El bloque prefetch es el fallback. En los navegadores que soportan prerender_until_script, Chrome elige automáticamente la acción más capaz. En los navegadores que no lo hacen, la regla de prefetch se sigue ejecutando. Obtienes el mejor comportamiento disponible sin tener que analizar el user-agent.
Si quieres generar tu propio conjunto personalizado de speculation rules, usa el generador de speculation rules.
Cómo habilitar prerender_until_script
Dado que esto es un Origin Trial, tienes dos opciones:
- Regístrate para obtener un token de Origin Trial en el panel de Origin Trials de Chrome. Añade el token como una etiqueta
<meta>en tu<head>:<meta http-equiv="origin-trial" content="YOUR_TOKEN"> - Prueba localmente navegando a
chrome://flags/#prerender-until-scripty habilitando la flag.
El Origin Trial se ejecuta desde Chrome 144 (enero de 2026) hasta Chrome 150 (aproximadamente a mediados de 2026). Si el equipo de Chrome lo lanza como una característica estable después de eso, el token ya no será necesario. La publicación oficial en el blog de Chrome cubre todos los detalles.
Rendimiento de las speculation rules en el mundo real
Nadie ha publicado benchmarks de prerender_until_script aún (es demasiado nuevo). Pero la Speculation Rules API en general tiene datos duros de implementaciones importantes:
- Ray-Ban implementó speculation rules de prerender y vio una mejora del 43% en el LCP en dispositivos móviles (de 4.69s a 2.66s). Las tasas de conversión se duplicaron.
- Shopify implementó speculation rules de prefetch en todas las tiendas Liquid y midió 130ms más rápido en escritorio y 180ms más rápido en dispositivos móviles en todas las métricas de carga.
- Cloudflare Speed Brain usa speculation rules con un modelo de predicción de aprendizaje automático (ML) y reporta una reducción del 45% en el LCP en prefetches exitosos.
La adopción está creciendo rápidamente. Según el Web Almanac 2025, el 35% de los sitios web móviles ahora usan la Speculation Rules API. La mayor parte de ese crecimiento proviene de WordPress 6.8, que integró las speculation rules en su núcleo en marzo de 2025.
prerender_until_script debería ofrecer resultados entre prefetch y un prerender completo. Los subrecursos ya están en caché y el DOM está construido. El único trabajo restante al momento de la activación es la ejecución de scripts. En los sitios monitoreados por CoreDash, típicamente veo que las speculation rules reducen el LCP de las navegaciones subsecuentes entre un 30 y un 50%.
Consideraciones
Eagerness: Recomiendo casi exclusivamente moderate. Esto activa la especulación al pasar el cursor (cuando el puntero permanece durante 200ms). immediate es demasiado agresivo para la mayoría de los sitios y corre el riesgo de desperdiciar ancho de banda en conexiones móviles.
Exclusiones: Sé disciplinado aquí. Nunca especules en URLs que cambien el estado como /logout o /add-to-cart. Aunque prerender_until_script protege contra la ejecución de scripts, ni siquiera deberías hacer fetch de estos endpoints innecesariamente.
Bloqueo del parser: El parser se detiene inmediatamente al encontrar una etiqueta <script> síncrona. Si tienes scripts en línea (inline) al principio del DOM (por ejemplo, <script>loadWhileIdle(chat.js)</script>), el prerender se detendrá ahí. Mueve los scripts al final de la página o usa defer para maximizar la cantidad de DOM que se preconstruye.
Manejadores en línea (Inline handlers): prerender_until_script solo pausa los elementos <script>. Los manejadores de eventos en línea en otros elementos (como <img onload="track()">) aún se ejecutarán si el parser los alcanza antes que a un script bloqueante. Asegúrate de que tus analíticas y tracking no se disparen por manejadores en línea.
Puedes depurar las speculation rules en Chrome DevTools bajo el panel Application. El panel Network de Chrome DevTools también mostrará los fetches especulativos con un ícono distintivo. Usa Real User Monitoring para verificar el impacto real en el INP y el LCP después de implementar las speculation rules en producción.
I have done this before at your scale.
Complex platforms, large dev teams, legacy code. I join your team as a specialist, run the performance track, and hand it back in a state you can maintain.
Discuss Your Situation
