2. Strumenti
  3. Speculation rules generator

Generatore di speculation rules

Crea uno script JSON di speculation rules con il generatore di regole

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.

Generatore di speculation rules

Questo strumento crea configurazioni di prefetch e prerender per la Speculation Rules API. Genera JSON ottimizzato per la sezione <head> del tuo documento per migliorare le prestazioni di navigazione.

Guida alla configurazione

Segui questo processo per creare speculation rules valide.

Passo 1: Seleziona la strategia

Determina in che modo il browser gestisce la risorsa speculata:

  • Prefetch: Scarica il corpo della risposta in background senza rendering. Ideale per risorse ad alta probabilità in cui l'utilizzo della memoria deve rimanere basso.
  • Prerender: Scarica ed esegue il rendering completo della pagina (incluso JavaScript) in una scheda in background. Fornisce una transizione istantanea alla navigazione.
  • Prerender (Until Script): Esegue il rendering del DOM e del CSS ma mette in pausa l'esecuzione di JavaScript fino a quando l'utente non naviga verso la pagina. Bilancia la velocità di rendering con costi di calcolo ridotti.

Passo 2: Definisci i trigger

Imposta la condizione che attiva la regola:

  • Document: Si attiva quando l'URL della pagina corrente corrisponde a un pattern definito.
  • List: Si attiva quando l'URL della pagina corrente è presente in un elenco fornito manualmente.

Passo 3: Imposta l'Eagerness

Controlla la tempistica e la priorità del recupero:

  • Immediate: Priorità più alta. Recupera non appena la regola viene analizzata.
  • Eager: Identico a immediate (attualmente funge da alias).
  • Moderate: Si attiva al passaggio del puntatore (dopo 200 ms) o in caso di eventi distinti di pressione del puntatore.
  • Conservative: Bassa priorità. Si attiva solo alla pressione del puntatore o al tocco.

Passo 4: Risorse di destinazione

Filtra i link specifici per il precaricamento utilizzando pattern URL o selettori CSS:

  • Href Matches: Includi URL che corrispondono a questi pattern con caratteri jolly (es. /product/* seleziona tutti i link nella directory dei prodotti).
  • Href Does Not Match: Escludi URL che corrispondono a questi pattern con caratteri jolly.
  • Selector Matches: Includi i link identificati dai selettori CSS (es. .nav-link seleziona gli elementi di navigazione).
  • Selector Does Not Match: Escludi i link identificati da questi selettori CSS.
  • URLs: Specifica gli URL esatti da precaricare (richiesto solo quando Source è impostato su 'List').

Implementazione

Copia il JSON generato e posizionalo all'interno di un tag <script type="speculationrules"> nella <head> del tuo sito. Per verificare, apri i DevTools di Chrome (Ctrl+Shift+I), vai al pannello Application e seleziona Speculation Rules dalla barra laterale.

Esempio di configurazione

I seguenti parametri eseguono il prerender di tutte le pagine dei prodotti:

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

Questa regola esegue il prerender degli URL all'interno della directory /product/ con priorità moderata (passaggio del mouse/interazione) quando un utente visita una pagina corrispondente.