La nueva Speculation Rule Prerender Until Script

Estado de Origin Trial: Esta función es actualmente un Origin Trial. Para implementarlo, debes registrarte para obtener un token de Origin Trial o habilitarlo localmente a través de chrome://flags. A pesar de su naturaleza experimental, los comentarios iniciales de la comunidad de ingeniería indican una estabilidad excepcional y mejoras de rendimiento.

Prerender Until Script: El nuevo modo para Speculative Loading

La latencia es el cuello de botella. Lo he dicho durante años y sigue siendo el mayor problema en web performance. 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 round-trip time (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, hemos tenido dos herramientas principales, y ninguna era perfecta:

• prefetch: Seguro y ligero, pero solo obtiene el HTML. El navegador todavía 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, lo peor de todo, desencadena "efectos secundarios", disparando píxeles de analytics y ejecutando código para páginas que el usuario tal vez nunca vea.

Obviamente necesitábamos un término medio. Necesitábamos la preparación visual de un prerender sin el costo computacional y el riesgo de ejecutar la lógica de la aplicación.

prerender_until_script.

La brillantez de prerender_until_script radica en cómo desacopla el análisis de la ejecución.Cuando utilizas esta Speculation Rule específica, estás instruyendo al navegador para que:

• Obtenga el documento (como un prefetch).
• Analice el flujo 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 LCP.

Sin embargo, en el momento en que el analizador encuentra un punto de ejecución de JavaScript, pueden suceder 2 cosas:

• Synchronous Scripts: El analizador se detiene inmediatamente.
• Async/Defer Scripts: Se descargan y se ponen en cola, pero no se ejecutan.

El navegador construye el "shell" visual de la página: el diseño, la tipografía, las imágenes, pero deja la lógica de la aplicación congelada. La página permanece en la memoria, químicamente estable, esperando a que el usuario haga clic.

Cuando ocurre el clic, la página se intercambia instantáneamente y se levanta el estado de "pausa". El JavaScript se ejecuta, los controladores de eventos se adjuntan y tus analytics se disparan exactamente cuando deberían.

La Implementación

Implementamos esto usando la Speculation Rules API. Debido a que prerender_until_script es una función experimental (llegando en Chrome 144), debemos asegurar la compatibilidad con versiones anteriores.

Los navegadores que no reconozcan la clave prerender_until_script la ignorarán. Por lo tanto, una implementación responsable define un prefetch de respaldo para el mismo conjunto de URLs. Chrome deduplicará automáticamente estas reglas y aplicará la acción más capaz disponible.

Aquí está la estructura JSON para una implementación lista para producción::

<script type="speculationrules">
{
  "prerender_until_script": [
    {
      "source": "document",
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": { "href_matches": "/logout" } },
          { "not": { "href_matches": "/cart" } }
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

Consejo: si deseas generar rápidamente tu propio conjunto personalizado de speculation rules, puedes usar el generador de speculation rules

Consideraciones

Eagerness: Recomiendo casi exclusivamente moderate. Esto activa la speculation al pasar el mouse (específicamente, cuando el puntero se detiene durante 200ms). immediate es demasiado agresivo para la mayoría de las implementaciones y corre el riesgo de desperdiciar el ancho de banda del usuario en conexiones móviles.

Exclusions: Debes ser disciplinado aquí. Nunca especules en URLs que cambian el estado como /logout o /add-to-cart. Aunque prerender_until_script protege contra la ejecución de scripts, una buena arquitectura dicta que ni siquiera deberíamos obtener estos endpoints innecesariamente.

Debilidad (Parser Blocking): El analizador se detiene inmediatamente al encontrar una etiqueta <script> síncrona. Esto anula mejoras como <script>loadWhileIdle(chat.js)</script> si aparecen temprano en el DOM. Es posible que necesites refactorizar el código existente para colocar estos scripts en la parte inferior de la página.

Inline Handlers: Ten en cuenta que prerender_until_script solo pausa los elementos <script>. Los controladores de eventos en línea en otros elementos (por ejemplo, <img onload="track()">) aún se ejecutarán si el analizador los alcanza antes de un script de bloqueo. Asegúrate de que tus píxeles de analytics y lógica de seguimiento no sean activados por estos controladores en línea durante la fase de speculation.