.png)
Introduction
L’application Cache des pages permet de configurer la stratégie de mise en cache HTML dans Fasterize.
Elle permet notamment de :
- définir la durée de vie du cache
- activer le cache navigateur ou CDN
- exclure certaines sections dynamiques avec le SmartCache
- gérer différentes versions de cache selon le contexte utilisateur.
Cette configuration permet d’optimiser les performances tout en conservant des contenus dynamiques lorsque c’est nécessaire.
Accéder à l’application Cache des pages
Dans la console Fasterize :
Configuration > Cache des pages
Cette interface permet de définir des règles de cache pour :
- une page spécifique
- un type de page
- ou l’ensemble du site.
Configurer les politiques de cache
La section Politiques de cache permet de définir comment une page est mise en cache.
Cache navigateur
Permet de stocker la page directement dans le navigateur de l’utilisateur.
Cela permet :
- d’accélérer les visites suivantes
- de réduire les requêtes réseau.
Cache CDN
Permet de stocker la page dans le CDN (contacter le support Fasterize pour activer cette option)
TTL
Le TTL (Time To Live) définit la durée de vie de la page dans le cache.
Pendant cette durée, la page est servie depuis le cache.
Configurer les fragments dynamiques (SmartCache)
Certaines pages contiennent des éléments dynamiques qui ne doivent pas être mis en cache.
Exemples :
- compteur panier
- prix produit
- informations utilisateur.
La section Fragments dynamiques permet d’exclure ces éléments du cache HTML.
Chaque fragment est défini à l’aide d’un sélecteur CSS.
Exemple :
.header.account.minicart-wrapper.product-price
Identifier les fragments SmartCache
Lorsque plusieurs éléments correspondent au même sélecteur CSS (par exemple une liste de produits), chaque fragment doit posséder un identifiant unique.
La console Fasterize permet désormais de construire cet identifiant à partir d’un attribut HTML présent dans la page.
Cela garantit que chaque fragment reste correctement identifié même si l’ordre des éléments change dans le DOM.
Paramètres de l’identifiant de fragment
Sélecteur du conteneur ID
Sélecteur CSS permettant de trouver l’élément contenant l’attribut identifiant.
La recherche remonte depuis le fragment vers ses éléments parents.
Attribut ID
Attribut HTML contenant la valeur utilisée pour construire l’identifiant du fragment.
Exemple :
data-product-id
Préfixe ID
Préfixe ajouté à l’identifiant pour éviter les conflits entre fragments.
Exemple :
product
Un élément avec data-product-id="123" générera un fragment avec l’identifiant :
product-123
Profondeur de recherche
Nombre maximum d’éléments parents parcourus pour trouver le conteneur.
Valeur par défaut : 20
Options avancées de rendu
Conserver le contenu original
Permet de garder le contenu HTML initial pendant le chargement du fragment.
💡 Cela permet d’éviter les décalages de mise en page (CLS).
⚠️ Attention : certaines données du contenu initial peuvent rester visibles.
Placeholder
Permet d’afficher un contenu temporaire pendant le chargement du fragment.
Par exemple :
- un loader
- un skeleton
- un placeholder HTML personnalisé.
Chargement des fragments
Deux stratégies sont disponibles.
Async
Le script est chargé de manière asynchrone sans bloquer le rendu de la page.
Defer
Le script est exécuté après le parsing complet du HTML.
Configurer les variations de cache
Certaines pages nécessitent plusieurs versions de cache selon le contexte utilisateur.
La section Variation de cache permet de gérer ces cas.
Mise en cache anonyme
Permet de servir une page depuis le cache tant que l’utilisateur n’a pas encore reçu de cookies.
Types de cache
Permet de définir plusieurs versions de cache selon le type d’appareil.
Responsive
2 versions : desktop et mobile
Adaptatif
4 versions : desktop, mobile, tablette et bot
Adaptatif — Bot first
Version optimisée pour les crawlers.
Script de variation
Permet de calculer une clé de cache personnalisée en JavaScript.
Cette clé permet de différencier plusieurs versions de la page dans le cache.
Clé personnalisée (cookie)
Permet d’utiliser la valeur d’un cookie pour créer une variation de cache.
Exemple :
cookie currency
Chaque devise aura alors sa propre version de cache.
Conclusion
L’application Cache des pages permet de contrôler précisément la stratégie de cache HTML d’un site.
Elle permet notamment de :
- définir la durée de vie du cache
- gérer les fragments dynamiques avec SmartCache
- créer plusieurs versions de cache selon le contexte utilisateur.