2. Herramientas
  3. Speculation rules generator

Generador de reglas de especulación

Crea un script JSON de reglas de especulación con el generador de reglas.

Speculation Rules Generator

AND = all must match. OR = any can match. 
Add matches to see preview...

Your Rules

No rules saved yet.

Output 

Add rules above to generate output.

Generador de Speculation Rules

Esta herramienta crea configuraciones de prefetch y prerender para la Speculation Rules API. Genera un JSON optimizado para el <head> de tu documento y mejora el rendimiento de navegación.

Guía de configuración

Sigue este proceso para crear speculation rules válidas.

Paso 1: Selecciona la estrategia

Determina cómo el navegador maneja el recurso especulado:

  • Prefetch: Descarga el cuerpo de la respuesta en segundo plano sin renderizar. Ideal para recursos de alta probabilidad donde el uso de memoria debe mantenerse bajo.
  • Prerender: Descarga y renderiza la página por completo (incluido JavaScript) en una pestaña en segundo plano. Proporciona una transición instantánea al navegar.
  • Prerender (Until Script): Renderiza el DOM y CSS pero pausa la ejecución de JavaScript hasta que el usuario navega a la página. Equilibra la velocidad de renderizado con menores costos de computación.

Paso 2: Define los disparadores

Establece la condición que activa la regla:

  • Document: Se activa cuando la URL de la página actual coincide con un patrón definido.
  • List: Se activa cuando la URL de la página actual existe dentro de una lista proporcionada manualmente.

Paso 3: Establece el eagerness

Controla el tiempo y la prioridad del fetch:

  • Immediate: Máxima prioridad. Hace el fetch tan pronto como se analiza la regla.
  • Eager: Idéntico a immediate (actualmente funciona como un alias).
  • Moderate: Se dispara en pointer hover (después de 200ms) o en eventos concretos de pointer down.
  • Conservative: Baja prioridad. Se dispara solo en pointer down o touch start.

Paso 4: Selecciona los recursos

Filtra enlaces específicos para precargar usando patrones de URL o selectores CSS:

  • Href Matches: Incluye URLs que coincidan con estos patrones de comodín (ej. /product/* apunta a todos los enlaces en el directorio de productos).
  • Href Does Not Match: Excluye URLs que coincidan con estos patrones de comodín.
  • Selector Matches: Incluye enlaces identificados por selectores CSS (ej. .nav-link apunta a elementos de navegación).
  • Selector Does Not Match: Excluye enlaces identificados por estos selectores CSS.
  • URLs: Especifica URLs exactas para precargar (solo requerido cuando Source es 'List').

Implementación

Copia el JSON generado y colócalo dentro de una etiqueta <script type="speculationrules"> en el <head> de tu sitio. Para verificar, abre las Chrome DevTools (Ctrl+Shift+I), navega al panel Application y selecciona Speculation Rules en la barra lateral.

Ejemplo de configuración

Los siguientes parámetros hacen prerender de todas las páginas de producto:

  • Mode: Prerender
  • Trigger: Document
  • Eagerness: Moderate
  • Href Matches: /product/*

Esta regla hace prerender de las URLs dentro del directorio /product/ con prioridad moderate (hover/interacción) cuando un usuario visita una página coincidente.