Générateur de règles de spéculation

Générez un script JSON de speculation rules avec le générateur de règles.

Arjen Karel Core Web Vitals Consultant
Arjen Karel - linkedin
Last update: 2026-02-08

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.

Générateur de Speculation Rules

Cet outil génère des configurations de prefetch et de prerender pour l'API Speculation Rules. Générez un JSON optimisé pour le <head> de votre document pour améliorer les performances de navigation.

Guide de configuration

Suivez ces étapes pour générer des règles de spéculation valides.

Étape 1 : Choisir la stratégie

Déterminez comment le navigateur gère la ressource spéculée :

  • Prefetch : télécharge le corps de la réponse en arrière-plan sans effectuer de rendu. Idéal pour les ressources très probables quand l'utilisation de la mémoire doit rester faible.
  • Prerender : télécharge et effectue le rendu complet de la page (JavaScript inclus) dans un onglet en arrière-plan. Offre une transition instantanée lors de la navigation.
  • Prerender (Until Script) : effectue le rendu du DOM et du CSS mais suspend l'exécution de JavaScript jusqu'à la navigation. Équilibre vitesse de rendu et coût de calcul.

Étape 2 : Définir les déclencheurs

Définissez la condition qui active la règle :

  • Document : s'active lorsque l'URL de la page actuelle correspond à un motif défini.
  • List : s'active lorsque l'URL de la page actuelle figure dans une liste fournie manuellement.

Étape 3 : Définir l'empressement

Contrôlez le moment et la priorité du chargement :

  • Immediate : priorité maximale. Se charge dès l'analyse de la règle.
  • Eager : identique à immediate (sert actuellement d'alias).
  • Moderate : se déclenche au survol du pointeur (après 200 ms) ou lors d'un événement pointerdown.
  • Conservative : priorité basse. Se déclenche uniquement lors d'un pointerdown ou d'un touchstart.

Étape 4 : Cibler les ressources

Filtrez les liens spécifiques à précharger à l'aide de motifs d'URL ou de sélecteurs CSS :

  • Href Matches : inclut les URL correspondant à ces motifs avec caractères génériques (par exemple, /product/* cible tous les liens du répertoire product).
  • Href Does Not Match : exclut les URL correspondant à ces motifs avec caractères génériques.
  • Selector Matches : inclut les liens identifiés par des sélecteurs CSS (par exemple, .nav-link cible les éléments de navigation).
  • Selector Does Not Match : exclut les liens identifiés par ces sélecteurs CSS.
  • URLs : spécifie les URL exactes à précharger (requis uniquement lorsque Source est défini sur « List »).

Implémentation

Copiez le JSON généré et placez-le dans une balise <script type="speculationrules"> du <head> de votre site. Pour vérifier, ouvrez Chrome DevTools (Ctrl+Shift+I), accédez au panneau Application, puis sélectionnez Speculation Rules dans la barre latérale.

Exemple de configuration

Les paramètres suivants effectuent le prerender de toutes les pages produit :

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

Cette règle effectue le prerender des URL du répertoire /product/ avec une priorité modérée (survol/interaction) lorsqu'un utilisateur visite une page correspondante.

Générateur de règles de spéculation Core Web Vitals Générateur de règles de spéculation