Generador de Speculation Rules
Crea un script JSON de Speculation Rules con el generador de reglas
Speculation Rules Generator
Your Rules
No rules saved yet.
Output
Add rules above to generate output.
Generador de Speculation Rules
Esta herramienta genera configuraciones de prefetch y prerender para la Speculation Rules API. Genera JSON optimizado para el <head> de tu documento para mejorar el rendimiento de navegación.
Guía de configuración
Sigue este proceso para generar Speculation Rules válidas.
Paso 1: Seleccionar estrategia
Determina cómo el navegador gestiona 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 completamente la página (incluyendo 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 costos de computación reducidos.
Paso 2: Definir activadores
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: Configurar Eagerness
Controla el momento y la prioridad de la descarga:
- Immediate: Máxima prioridad. Descarga tan pronto como se analiza la regla.
- Eager: Idéntico a Immediate (actualmente funciona como un alias).
- Moderate: Se activa al pasar el cursor (después de 200ms) o en eventos de pointer down distintos.
- Conservative: Baja prioridad. Se activa solo con pointer down o touch start.
Paso 4: Recursos objetivo
Filtra enlaces específicos para la precarga usando patrones de URL o selectores CSS:
- Href Matches: Incluye URLs que coincidan con estos patrones comodín (por ejemplo, /product/* apunta a todos los enlaces en el directorio product).
- Href Does Not Match: Excluye URLs que coincidan con estos patrones comodín.
- Selector Matches: Incluye enlaces identificados por selectores CSS (por ejemplo, .nav-link apunta a elementos de navegación).
- Selector Does Not Match: Excluye enlaces identificados por estos selectores CSS.
- URLs: Especifica las URLs exactas a precargar (requerido solo cuando Source está configurado como '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 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 prerrenderizan todas las páginas de producto:
- Mode: Prerender
- Trigger: Document
- Eagerness: Moderate
- Href Matches: /product/*
Esta regla prerenderiza URLs dentro del directorio /product/ con prioridad moderada (hover/interacción) cuando un usuario visita una página coincidente.
