.png)
Introduction
L’application Smart Loading vous permet d’améliorer significativement la vitesse perçue de votre site en anticipant le chargement des ressources et le rendu des pages.
Elle repose sur deux fonctionnalités complémentaires :
- Early Hints : pour précharger les ressources critiques
- Speculation Rules : pour anticiper la navigation utilisateur
👉 Objectif : offrir une expérience plus fluide, avec des pages qui chargent plus vite… et semblent instantanées.
Quelle est la différence entre Early Hints et Speculation Rules ?
Ces deux fonctionnalités poursuivent le même objectif, mais n’agissent pas au même niveau :
- Early Hints
- Anticipe le chargement des ressources (CSS, JS, images, polices)
- Améliore l’affichage initial de la page
- Speculation Rules
- Anticipe la navigation utilisateur
- Précharge ou pré-rend les pages susceptibles d’être visitées
💡 En résumé :
Early Hints accélère le chargement d’une page,
Speculation Rules accélère le passage d’une page à une autre
Comment fonctionne Early Hints ?
Early Hints permet de demander au navigateur de charger certaines ressources critiques en avance, avant même que la page HTML ne soit complètement analysée.
Ressources concernées
Vous pouvez activer le préchargement pour :
- Scripts JavaScript
- Feuilles de style (CSS)
- Images
- Polices
Pourquoi c’est efficace ?
Cela permet de :
- Réduire le temps d’affichage initial
- Accélérer le rendu visuel de la page
- Améliorer des métriques clés :
- First Contentful Paint (FCP)
- Largest Contentful Paint (LCP)
- Speed Index
💡 Bon à savoir
Les gains sont souvent plus importants avec le CSS, puis les polices.
⚠️ Attention
Dans certains cas, le préchargement des images, des fonts et des JS peut être contre-productif.
Il est recommandé de se rapprocher du support CSE si vous avez des hésitations sur votre configuration.
Comment activer Early Hints dans la console ?
Depuis l’application Smart Loading :
- Activez la fonctionnalité Early Hints
- Sélectionnez les types de ressources à précharger :
- Script
- Style
- Image
- Polices
👉 Vous pouvez adapter finement votre configuration selon votre site et vos priorités.
Comment fonctionne Speculation Rules ?
Speculation Rules permet d’anticiper les actions des utilisateurs en préchargeant ou en pré-rendant certaines pages.
Deux comportements sont possibles :
- Préchargement (prefetch)→ La page HTML est téléchargée en arrière-plan, sans être exécutée.👉 Cela permet d’anticiper la navigation, mais le rendu final reste à faire au moment du clic.
- Prérendu (prerender)→ La page est entièrement chargée et exécutée en arrière-plan.👉 Le HTML, les ressources (JS, CSS, images) sont téléchargés, exécutés et la page est déjà rendue, prête à s’afficher instantanément.
💡 Exemple concret
Un utilisateur visite une page catégorie e-commerce :
les pages produits peuvent être anticipées pour accélérer la navigation.
Comment configurer Speculation Rules simplement ?
La configuration repose sur 3 options essentielles, accessibles directement dans la console.
Insérer le script
Active ou désactive l’injection automatique des règles dans vos pages HTML.
- ✅ Recommandé : activé
- Permet d’activer facilement la fonctionnalité sans intégration technique
Préchargement uniquement depuis le cache
Permet de limiter le préchargement aux pages déjà disponibles en cache.
- ✅ Recommandé : activé
- Évite de générer du trafic inutile
- Protège votre infrastructure
Prérendu uniquement depuis le cache
Même principe, mais appliqué au prérendu (plus coûteux en ressources).
- ✅ Recommandé : activé
- Évite une surconsommation serveur
- Garantit un comportement maîtrisé
💡 Pourquoi ces options sont importantes ?
Elles permettent de bénéficier des gains de performance sans risquer d’augmenter la charge serveur.
Bonnes pratiques pour éviter les effets de bord
Pour tirer le meilleur de Smart Loading :
- Activez progressivement les fonctionnalités
- Gardez les options “depuis le cache” activées
- Testez l’impact sur vos performances
👉 Les fonctionnalités comme les speculation rules (prefetch / prerender) peuvent impacter certaines métriques, notamment le TTFB mesuré par CrUX, car les pages sont appelées en amont.👉 Cet impact n’est pas toujours visible dans les outils de monitoring classiques.
👉 Pour une analyse plus fine, vous pouvez suivre spécifiquement les navigations en prerender dans votre monitoring Fasterize (RUM), en filtrant par type de navigation.
- Adaptez selon le comportement réel de vos utilisateurs
Conclusion
L’application Smart Loading est un levier puissant pour améliorer votre web performance :
- Early Hints accélère le chargement des ressources critiques
- Speculation Rules fluidifie la navigation entre les pages
En combinant les deux, vous offrez une expérience utilisateur plus rapide, plus fluide et plus agréable.
👉 Commencez par activer ces fonctionnalités sur une cible comme un type de page, puis ajustez selon vos résultats.