Générateur de Speculation Rules
Créez un script JSON de Speculation Rules avec le générateur de règles
Speculation Rules Generator
Your Rules
No rules saved yet.
Output
Add rules above to generate output.
Générateur de Speculation Rules
Cet outil crée des configurations de prefetch et prerender pour l'API Speculation Rules. Générez du JSON optimisé pour le <head> de votre document afin d'améliorer les performances de navigation.
Guide de configuration
Suivez ce processus pour créer des Speculation Rules valides.
Étape 1 : Sélectionner 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 le rendu. Idéal pour les ressources à forte probabilité d'accès lorsque l'utilisation de la mémoire doit rester faible.
- Prerender : Télécharge et effectue le rendu complet de la page (y compris JavaScript) 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'à ce que l'utilisateur navigue vers la page. Équilibre la vitesse de rendu avec des coûts de calcul réduits.
É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 courante correspond à un modèle défini.
- List : S'active lorsque l'URL de la page courante existe dans une liste fournie manuellement.
Étape 3 : Définir l'empressement
Contrôlez le timing et la priorité du fetch :
- Immediate : Priorité la plus élevée. Effectue le fetch dès que la règle est analysée.
- Eager : Identique à immediate (agit actuellement comme un alias).
- Moderate : Se déclenche au survol du pointeur (après 200 ms) ou lors d'événements pointer down distincts.
- Conservative : Priorité faible. Se déclenche uniquement lors d'un pointer down ou touch start.
Étape 4 : Cibler les ressources
Filtrez des liens spécifiques pour le préchargement à l'aide de modèles d'URL ou de sélecteurs CSS :
- Href Matches : Inclut les URL correspondant à ces modèles avec caractères génériques (par ex., /product/* cible tous les liens du répertoire product).
- Href Does Not Match : Exclut les URL correspondant à ces modèles avec caractères génériques.
- Selector Matches : Inclut les liens identifiés par des sélecteurs CSS (par ex., .nav-link cible les éléments de navigation).
- Selector Does Not Match : Exclut les liens identifiés par ces sélecteurs CSS.
- URLs : Spécifiez les URL exactes à précharger (requis uniquement lorsque la source est définie sur « List »).
Implémentation
Copiez le JSON généré et placez-le dans une balise <script type="speculationrules"> dans le <head> de votre site. Pour vérifier, ouvrez Chrome DevTools (Ctrl+Shift+I), accédez au panneau Application et 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 dans le répertoire /product/ avec une priorité modérée (survol/interaction) lorsqu'un utilisateur visite une page correspondante.
