Renderización previa de reglas de especulación hasta la prueba de origen del script

Publicado el 23 de enero de 2026

A partir de Chrome 144, se lanzará una nueva prueba de origen para la incorporación de prerender until script a la API de Speculation Rules. Esta prueba de origen permite que los sitios prueben la nueva incorporación con usuarios reales. El objetivo es probar la función en el campo y proporcionar comentarios al equipo de Chrome para ayudar a darle forma y decidir si es algo que deberíamos agregar a la plataforma web.

¿Qué problema se busca abordar con esto?

La API de Speculation Rules permite que las cargas de páginas se inicien antes de que los usuarios naveguen a las páginas. Esto puede mejorar las cargas de páginas futuras, ya que se completa parte del trabajo o todo el trabajo con anticipación. Hasta ahora, permitía dos tipos de especulaciones: la recuperación previa y la renderización previa.

La recuperación previa solo recupera el documento HTML. Esto permite obtener ese primer recurso crítico con anticipación, lo que luego proporciona un aumento del rendimiento cuando se navega a una URL. No carga ningún subrecurso (por ejemplo, CSS, JavaScript o imágenes) ni ejecuta JavaScript, por lo que es posible que el navegador aún tenga mucho trabajo por realizar cuando se carguen las páginas.

Sin embargo, la renderización previa hace mucho más. Recupera los recursos secundarios y comienza a renderizar la página y a ejecutar JavaScript, casi como si la página se hubiera abierto en una pestaña oculta en segundo plano. Cuando el usuario hace clic en el vínculo, puede obtener una navegación instantánea si el navegador completó todo el trabajo necesario para renderizar la página.

Usar la opción de renderización previa puede ser mucho mejor para el rendimiento, pero conlleva un costo de implementación adicional, así como costos de recursos adicionales. Si no se considera con cuidado, esto también puede causar efectos secundarios inesperados cuando se realiza la renderización previa completa de una página antes de que un usuario navegue a ella. Por ejemplo, Analytics puede activarse antes de que un usuario haya navegado, lo que sesga las estadísticas, si el proveedor de Analytics no tiene en cuenta las especulaciones.

Los sitios que usan la renderización previa también deben tener cuidado de no mostrar a los usuarios una página obsoleta. Por ejemplo, si especulas una página en un sitio de comercio electrónico, luego agregas algo a tu carrito y, luego, cargas la página especulada anteriormente, es posible que veas la cantidad anterior del carrito si el sitio no tiene especial cuidado para garantizar que se actualice.

Estas complicaciones también existen para la recuperación previa si parte de esta administración de estados ocurre del lado del servidor, pero a menudo es un problema mayor para la renderización previa. Puede ser más complicado usar la renderización previa en sitios más complejos.

Sin embargo, los desarrolladores nos comentan que ya están viendo las mejoras de rendimiento que ofrece la carga previa de la página y que quieren ir más allá con las reglas de especulación para obtener aún más beneficios. Aquí es donde entra en juego la opción de renderización previa hasta la secuencia de comandos.

¿Qué es prerender until script?

La función de renderización previa hasta la secuencia de comandos es un nuevo punto intermedio entre la recuperación previa y la renderización previa. Realiza una recuperación previa del documento HTML (como lo hace la recuperación previa) y, luego, comienza a renderizar la página, lo que incluye la recuperación de todos los recursos secundarios (como lo hace la renderización previa). Sin embargo, y esto es fundamental, el navegador evitará ejecutar elementos <script> (tanto para secuencias de comandos intercaladas como para secuencias de comandos src). Cuando encuentra una etiqueta <script> de bloqueo, pausa el analizador y espera hasta que el usuario navega a la página antes de continuar. Mientras tanto, el escáner de precarga puede continuar y recuperar los recursos secundarios que necesita la página para que estén listos para usarse cuando la página pueda seguir cargándose.

Al retener cualquier elemento de bloqueo de <script>, se evita gran parte de la complejidad de la implementación. Al mismo tiempo, al iniciar el proceso de renderización y recuperar los recursos secundarios, se obtiene una gran ventaja sobre la recuperación previa, potencialmente casi tanta como la que se obtiene con una renderización previa completa.

En el mejor de los casos (cuando no hay secuencias de comandos en la página), esta opción realizará una renderización previa de toda la página. O bien, cuando una página solo tiene elementos de secuencia de comandos en el pie de página o solo secuencias de comandos con atributos async o defer, la página se generará previamente por completo sin ese JavaScript. Incluso en el peor de los casos (en los que hay una secuencia de comandos de bloqueo en <head>), el inicio de la renderización de la página y, en particular, la recuperación previa de los recursos secundarios deberían mejorar considerablemente la carga de la página.

¿Cómo usar la opción de renderización previa hasta la secuencia de comandos?

Primero, habilita la función y, luego, realiza la renderización previa hasta que se use la secuencia de comandos de la misma manera que las otras opciones de la API de Speculation Rules con una nueva clave prerender_until_script (ten en cuenta los guiones bajos para que sea un nombre de clave JSON válido).

Se puede usar con reglas de lista de URLs estáticas:

<script type="speculationrules">
{
  "prerender_until_script": [{
    "urls": ["next.html", "next2.html"]
  }]
}
</script>

También se puede usar con reglas del documento en las que las URLs para especular están disponibles como vínculos en la página:

<script type="speculationrules">
{
  "prerender_until_script": [{
    "where": { "href_matches": "/*" }
  }]
}
</script>

Luego, se puede usar la función de renderización previa hasta que se cargue la secuencia de comandos con las opciones habituales de la API de Speculation Rules, incluidos los diversos valores de urgencia.

Como no se ejecutará JavaScript, no se podrá leer document.prerendering ni el evento prerenderingchange. Sin embargo, el tiempo de activationStart no será cero.

En el siguiente ejemplo, se muestra cómo implementar el ejemplo anterior con una resguardo para la recuperación previa para los navegadores que no admiten prerender_until_script:

<script type="speculationrules">
{
  "prerender_until_script": [{
    "where": { "href_matches": "/*" }
  }],
  "prefetch": [{
    "where": { "href_matches": "/*" }
  }]
}
</script>

Chrome controlará esta duplicación sin problemas y ejecutará la regla más adecuada para cada parámetro de configuración de urgencia.

Como alternativa, puedes usar estos con diferentes niveles de urgencia para realizar una recuperación previa anticipada y, luego, actualizar a la renderización previa hasta que se ejecute la secuencia de comandos con más indicadores como se sugirió anteriormente con la recuperación previa y la renderización previa:

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

Ten en cuenta que no puedes actualizar un script de renderización previa a una renderización previa completa de esta manera, pero avísanos si ese es un patrón que te interesa que Chrome admita destacando este error.

¿Se detuvo todo el código JavaScript?

No, solo los elementos <script> hacen que se detenga el analizador. Esto significa que los controladores de secuencias de comandos intercalados (por ejemplo, onload) o las URLs javascript: no causarán una pausa y se pueden ejecutar.

Por ejemplo, esto puede registrar Hero image is now loaded en la consola antes de que se navegue a la página:

<img src="hero.jpg"
     onload="console.log('Hero image is now loaded!')"
     alt="Example Photo">

En cambio, si el objeto de escucha de eventos se agrega con un <script>, Hero image is now loaded no se registrará en la consola hasta que se active la página:

<img src="hero.jpg" id="hero-image" alt="Example Photo">
<script>
  const heroImage = document.querySelector('#hero-image');
  if (heroImage.complete) {
        console.log('Hero image is now loaded');
  } else {
    heroImage.addEventListener('load',
      (event) => {
        console.log('Hero image is now loaded');
      }
    );
  }
</script>

Esto puede parecer contradictorio, pero, en muchos casos (como en el ejemplo anterior), es mejor tomar la medida de inmediato, ya que retrasarla puede generar complicaciones más inesperadas.

Además, la mayoría de los eventos intercalados requieren una acción del usuario (por ejemplo, onclick, onhover), por lo que no se ejecutarán hasta que el usuario pueda interactuar con la página.

Por último, las secuencias de comandos de bloqueo previas pausarán el analizador y, de este modo, evitarán que se descubran los controladores de eventos intercalados. Por lo tanto, no se cargará el mensaje en la consola hasta la activación, a pesar de ser un controlador de eventos intercalado:

<script>...</script>
<img src="hero.jpg"
     onload="console.log('Hero image is now loaded!')"
     alt="Example Photo">

Esto es especialmente relevante para los controladores de secuencias de comandos intercaladas que usan código definido previamente, que seguirá funcionando según lo previsto:

<script>
imageLoadFunction() = {
   ...
}
</script>
<img src="hero.jpg" onload="imageLoadFunction" alt="Example Photo">

¿Qué sucede con los atributos async y defer?

Las secuencias de comandos con atributos async y defer se retrasan hasta la activación, pero no impiden que el analizador siga procesando el resto de la página. Las secuencias de comandos se descargan, pero no se ejecutan hasta que se navega a la página.

¿Cómo habilitar la opción de renderización previa hasta la secuencia de comandos?

El prerrenderizado hasta la secuencia de comandos es una nueva opción en la que estamos trabajando y que está sujeta a cambios, por lo que no está disponible para su uso sin habilitarla primero para habilitar la opción.

Se puede habilitar de forma local para desarrolladores con la marca de Chrome chrome://flags/#prerender-until-script o con la marca de línea de comandos --enable-features=PrerenderUntilScript.

La función de renderización previa hasta que se ejecute la secuencia de comandos también está disponible como prueba de origen a partir de Chrome 144. Los orígenes de prueba permiten que los propietarios de sitios habiliten una función en sus sitios para que los usuarios reales la utilicen sin tener que habilitarla de forma manual. Esto permite medir el impacto de la función en usuarios reales para garantizar que actúe según lo previsto.

Pruébala y comparte tus comentarios

Nos entusiasma mucho esta incorporación propuesta a la API de Speculation Rules y alentamos a los propietarios de sitios a que la prueben.

Comparte tus comentarios sobre la propuesta en el repo de GitHub. Para enviar comentarios sobre la implementación de Chrome, informa un error de Chromium.