Optimiser ce que la mise en cache ne peut pas corriger – automatiquement
La mise en cache de Shopify gère efficacement la livraison des actifs. Le goulot d'étranglement en matière de performances auquel la plupart des magasins sont confrontés est ce qui se produit Les actifs mis en cache après arrivent : JavaScript bloquant le rendu, CSS non optimisé et chargement des ressources mal ordonné. Exécutez un test de vitesse gratuit sur votre boutique pour voir où est réellement passé votre temps de chargement.
Thunder Page Speed Optimizer se concentre sur ces optimisations post-cache :
- Diffère le JavaScript non critique afin que le navigateur rende le contenu visible en premier
- CSS critique en ligne — aucun aller-retour supplémentaire nécessaire, même sur un cache froid
- Optimise l'ordre de chargement des ressources pour une plus grande peinture de contenu plus rapide
- Gère les scripts d'applications tierces qui contournent la couche de mise en cache de Shopify
Comprendre la mise en cache vous aide à prendre de meilleures décisions concernant le choix du thème, la gestion des applications et les priorités de performances. Décomposons chaque couche de mise en cache.
Couche 1 : mise en cache du navigateur sur Shopify
La mise en cache du navigateur stocke les fichiers localement sur l'appareil du visiteur après le premier téléchargement. Lorsqu'ils visitent à nouveau (ou naviguent vers une autre page), le navigateur charge ces fichiers depuis le disque au lieu de les retélécharger. C'est la couche de mise en cache la plus impactante pour les visiteurs récurrents.
Ce que Shopify met en cache dans le navigateur
| Type d'actif | Durée du cache Domaine | |
|---|---|---|
| Thème CSS/JS | 1 an (noms de fichiers versionnés) | cdn.shopify.com |
| Images du produit | 1 an | cdn.shopify.com |
| Polices | 1 an | cdn.shopify.com |
| Actifs statiques de l'application | Varie (en fonction de l'application) | Divers domaines CDN |
| Pages HTML | Pas de cache navigateur (ou très court) | votreboutique.myshopify.com |
Shopify utilise URL adressées par le contenu pour les actifs thématiques. Lorsque vous modifiez le CSS de votre thème, Shopify génère un nouveau nom de fichier (comme theme.css?v=123456), qui oblige les navigateurs à télécharger la nouvelle version. Le cache d'un an de l'ancienne version n'est plus pertinent car l'URL a changé.
Cela signifie que vous n'avez jamais à vous soucier du fait que les visiteurs voient du CSS ou du JavaScript obsolète après une mise à jour du thème - le contournement du cache de Shopify le gère automatiquement.
Pourquoi le HTML n'est pas mis en cache dans le navigateur Les pages HTML
contiennent du contenu dynamique : nombre d'articles du panier, nom du client, produits récemment consultés et prix susceptibles de changer. La mise en cache HTML dans le navigateur afficherait des données obsolètes. Shopify envoie Cache-Control : pas de cache ou court âge maximum
En-têtes pour HTML pour garantir que les visiteurs obtiennent toujours un nouveau contenu de page.
C'est là que le cache périphérique CDN de Shopify prend le relais : il sert rapidement du nouveau HTML sans toucher le serveur d'origine à chaque fois.
Couche 2 : mise en cache périphérique Cloudflare CDN
Shopify s'associe à Cloudflare, dont le CDN a Plus de 300 nœuds périphériques dans le monde. C'est la couche qui rend Shopify Temps jusqu'au premier octet (TTFB) si compétitif : généralement 200 à 600 ms, avec des pages mises en cache périphérique répondant en 50 à 150 ms.
Fonctionnement de la mise en cache CDN Edge
Lorsqu'un visiteur demande une page, la requête est acheminée vers le nœud périphérique Cloudflare le plus proche. Si ce nœud dispose d'une copie en cache, il répond immédiatement — aucun aller-retour vers les serveurs d’origine de Shopify n'est nécessaire. Si ce n'est pas le cas, le nœud périphérique récupère la page depuis Shopify, la sert au visiteur, et en stocke une copie pour les requêtes ultérieures.
Flux de requête : succès du cache Edge ou échec
Qu'est-ce qui est mis en cache en périphérie (et ce qui ne l'est pas)
Depuis 2023, Shopify a étendu la mise en cache HTML Edge pour les visiteurs anonymes. Voici ce qui est admissible :
✅ Edge-Cacheable
- Page d'accueil (visiteurs anonymes)
- Pages de collecte
- Pages produits (anonymes)
- Billets et articles de blog
- Pages statiques (A propos, Contact)
- Tous les actifs statiques (images, CSS, JS, polices)
❌ Non compatible avec le cache Edge
- Pages clients connectés
- Page panier (unique par session)
- Caisse (toujours dynamique)
- Pages avec cookies de session uniques
- Mode aperçu du thème
- Pages avec forçage dynamique Liquid sans cache
Vous pouvez vérifier l'état du cache en vérifiant le cf-cache-statut
En-tête de réponse dans DevTools. Voir notre Benchmarks de vitesse Shopify pour savoir comment la mise en cache affecte les chiffres de performances réels.
Couche 3 : mise en cache au niveau de l'application
Les applications Shopify individuelles peuvent mettre en œuvre leurs propres stratégies de mise en cache pour les données qu'elles servent. Il s'agit de la couche la plus variable et celle qui peut soit améliorer, soit nuire aux performances de votre magasin.
Comment fonctionne la mise en cache des applications
Les applications qui affichent du contenu sur votre vitrine (widgets d'avis, recommandations de produits, fenêtres contextuelles de vente incitative) effectuent généralement des appels API vers leurs propres serveurs. Les applications bien conçues mettent en cache ces réponses :
- Bonnes applications met en cache les réponses de l'API sur leur CDN, sert du HTML de widget statique lorsque cela est possible et se charge de manière asynchrone afin qu'elles ne bloquent pas le rendu des pages
- Applications mal construites effectue de nouveaux appels d'API à chaque chargement de page, injecte des scripts synchrones qui bloquent le rendu et ne mettent rien en cache
Le problème : vous n'avez aucune visibilité sur la façon dont les applications gèrent la mise en cache en interne. Un widget d'avis peut mettre en cache les avis pendant 5 minutes ou les récupérer à chaque fois — il n'y a aucun moyen de le savoir sans inspecter les requêtes du réseau.
Scripts d'application et problème de contournement de la mise en cache
La plupart des applications Shopify injectent du JavaScript via Balise de script
Références ou des blocs d'intégration d'applications. Ces scripts se chargent depuis des domaines externes (pas cdn.shopify.com), ce qui signifie :
- Ils nécessitent des recherches et des connexions DNS distinctes (ajoute 100 à 300 ms par domaine)
- Leurs en-têtes de cache sont contrôlés par le développeur de l'application, et non par Shopify
- Ils peuvent injecter des requêtes supplémentaires qui contournent toute la mise en cache Shopify
- Certaines applications ajoutent scripts bloquant le rendu qui retarde le rendu de la page même lorsque la page elle-même est mise en cache
C’est précisément pour cela qu’une boutique peut bénéficier d’une mise en cache CDN parfaite et rester lente : les scripts tiers provenant d’applications créent des goulots d’étranglement que la mise en cache seule ne peut pas résoudre.
Lorsque la mise en cache de Shopify est interrompue : scénarios courants
Comprendre quand la mise en cache ne s'applique pas vous aide à diagnostiquer les problèmes de performances :
Mode aperçu du thème
Lorsque vous prévisualisez les modifications du thème, Shopify désactive entièrement la mise en cache périphérique. C'est pourquoi votre boutique semble plus lente dans l'éditeur de thème : vous voyez des réponses d'origine non mises en cache. Ne jugez pas les performances en fonction du mode aperçu.
Immédiatement après les mises à jour du contenu
Lorsque vous mettez à jour un produit, modifiez une page ou publiez un article de blog, Shopify invalide le cache CDN correspondant. Le premier visiteur après une mise à jour voit un cache MISS (réponse d'origine). Les visiteurs suivants obtiennent la version mise en cache mise à jour. Cela se résout généralement en quelques secondes.
Géolocalisation et détection de devises
Les magasins utilisant une tarification basée sur la géolocalisation, le changement de devise ou un contenu spécifique à une région peuvent constater une efficacité réduite du cache périphérique. Si chaque région géographique connaît des tarifs différents, le CDN a besoin de versions mises en cache distinctes par région, ce qui réduit les taux d'accès au cache.
Applications de tests A/B et de personnalisation
Les applications qui modifient le contenu des pages en fonction des segments de visiteurs (tests A/B, recommandations personnalisées) créent efficacement des variantes de page uniques. Cela peut empêcher la mise en cache périphérique, car le contenu varie selon le visiteur. Plus vous ajoutez de personnalisation, moins la mise en cache CDN devient efficace.
Pages à faible trafic
Les caches périphériques ont un stockage limité. Les pages rarement visitées peuvent être expulsées du cache entre les visites, ce qui entraîne davantage de MISS de cache. Les pages à fort trafic (page d'accueil, produits populaires) maintiennent des caches chauds ; les pages de produits à longue traîne avec peu de visiteurs peuvent constamment manquer.
Ce que les commerçants peuvent réellement optimiser au-delà de la mise en cache
Puisque vous ne pouvez pas configurer directement la mise en cache de Shopify, concentrez-vous sur ce que vous Contrôle peut — les performances frontales qui déterminent la rapidité avec laquelle votre boutique s'affiche après l'arrivée des actifs mis en cache.
| Optimisation | Impact | Votre contrôle |
|---|---|---|
| Configuration du cache CDN | Élevé | Aucun — Shopify le gère |
| En-têtes de cache du navigateur | Moyen | Aucun — automatique pour les actifs Shopify |
| Report des ressources bloquant le rendu | Très élevé | Complet — via le code de thème ou Thunder |
| Inline CSS critique | Élevé | Complet — via le code de thème ou Thunder |
| Optimisation des images | Élevé | Complet — dimensionnement, chargement différé, formats |
| Gestion des scripts d'application | Élevé | Partiel — supprimez les applications inutilisées, différez les scripts |
| Conseils sur les ressources (préconnexion, précharge) | Moyen | Complet — via le code du thème |
Le modèle est clair : La mise en cache côté serveur est le travail de Shopify ; la performance frontale est votre travail. Même avec une mise en cache parfaite, un thème qui charge 2 Mo de JavaScript bloquant le rendu semblera lent. Même sans mise en cache, un frontal bien optimisé s’affiche rapidement.
Thunder Page Speed Optimizer automatise les optimisations frontales dans les lignes vertes ci-dessus – celles qui ont le plus grand impact et que vous contrôlez réellement. Voir notre guide complet d'optimisation de la vitesse pour la stratégie complète.
Liste de contrôle pour l'optimisation de la mise en cache Shopify
Bien que vous ne puissiez pas configurer directement la mise en cache, ces actions maximisent son efficacité :
- Auditez vos applications installées — Supprimez ceux qui ne génèrent pas activement de revenus. Moins d'applications = moins scripts tiers contournant la couche de cache.
- Vérifier les taux de réussite du cache — Utilisez Chrome DevTools pour vérifier
cf-cache-statut : HITsur vos pages clés. De faibles taux de réussite suggèrent que la personnalisation ou le contenu dynamique empêche la mise en cache. - Réduire la personnalisation sur les pages de destination — Gardez votre page d'accueil et vos pages de collection aussi « conviviales pour les anonymes » que possible pour un bénéfice maximal du cache périphérique.
- Utilisation chargement paresseux pour les images — Même les images mises en cache prennent du temps de rendu. Le chargement paresseux diffère les images hors écran afin que le navigateur se concentre d'abord sur le contenu visible.
- Installez Thunder pour l'optimisation du front-end — Automatisez le report de JavaScript, l'intégration CSS critique et la priorisation des ressources. Installer maintenant
- Testez du point de vue de vos clients — Utilisation notre test de vitesse gratuit ou WebPageTest depuis des emplacements géographiques correspondant à votre clientèle.
- Ne jugez pas la vitesse dans l'aperçu du thème — Le mode Aperçu désactive la mise en cache. Testez sur la boutique en direct ou utilisez PageSpeed Insights.
Questions fréquemment posées sur la mise en cache Shopify
Shopify utilise-t-il la mise en cache du navigateur ?
Oui. Shopify sert des ressources statiques (images, CSS, JavaScript, polices) avec des en-têtes Cache-Control longs — généralement max-age=31536000 (1 an) pour les ressources versionnées sur cdn.shopify.com. Cela signifie que les visiteurs récurrents chargent ces fichiers depuis le cache local de leur navigateur au lieu de les télécharger à nouveau. Les pages HTML reçoivent des durées de cache plus courtes ou des en-têtes no-cache car elles contiennent du contenu dynamique comme l'état du panier et des éléments personnalisés.
Puis-je contrôler la mise en cache CDN de Shopify ?
Non. Shopify gère automatiquement sa configuration Cloudflare CDN. Vous ne pouvez pas définir d'en-têtes de cache personnalisés, purger le cache CDN ou configurer des règles de mise en cache Edge. Shopify détermine quelles pages sont éligibles à la mise en cache périphérique selon que le visiteur est anonyme (mis en cache) ou connecté (non mis en cache). L'avantage est que vous n'avez pas à vous soucier de l'invalidation du cache : Shopify la gère lorsque vous mettez à jour des produits, des collections ou des fichiers de thème.
Pourquoi ma boutique Shopify affiche-t-elle un contenu différent à différents utilisateurs si la mise en cache est active ?
La mise en cache de Shopify est intelligente en matière de personnalisation. La mise en cache HTML en périphérie ne s'applique qu'aux visiteurs anonymes. Lorsqu'un client se connecte, ajoute des articles à son panier ou a des cookies qui indiquent une session unique, Shopify contourne le cache en périphérie et génère une nouvelle page à partir du serveur d'origine. Cela garantit que les clients connectés voient leur panier correct, les détails de leur compte et leurs recommandations personnalisées, tandis que les navigateurs anonymes obtiennent la version rapide mise en cache.
Les applications Shopify affectent-elles les performances de mise en cache ?
Oui, de deux manières. Premièrement, les applications qui injectent du contenu dynamique et personnalisé (comme les produits récemment consultés ou la tarification basée sur la géolocalisation) peuvent empêcher la mise en cache des pages en périphérie car le contenu varie selon le visiteur. Deuxièmement, les applications ajoutent leurs propres fichiers JavaScript et CSS que le navigateur doit télécharger — bien que ces ressources statiques d'application soient généralement mises en cache sur le CDN de Shopify après le premier chargement. La réduction des applications inutiles améliore à la fois les taux d'accès au cache et le temps de chargement global.
Comment savoir si vos pages Shopify sont servies depuis le cache ?
Ouvrez Chrome DevTools (F12), allez dans l'onglet Network et rechargez votre page. Cliquez sur la requête du document HTML principal et vérifiez les en-têtes de réponse. Recherchez 'cf-cache-status' — une valeur 'HIT' signifie que Cloudflare a servi la page depuis le cache en périphérie, 'MISS' signifie qu'elle est allée au serveur d'origine de Shopify, et 'DYNAMIC' signifie que la page n'est pas éligible à la mise en cache en périphérie. Pour les ressources statiques sur cdn.shopify.com, vous verrez généralement 'HIT' après le premier chargement.
La suppression du cache de mon navigateur affecte-t-elle la vitesse de ma boutique Shopify pour les clients ?
Non. Vider le cache de votre propre navigateur n'affecte que votre expérience locale. Les caches des navigateurs de vos clients sont indépendants. Cependant, si vous testez la vitesse de votre boutique, vider votre cache vous offre une expérience de « première visite », utile pour comprendre ce que vivent les nouveaux visiteurs. Pour des tests de vitesse précis, utilisez le mode navigation privée ou des outils comme PageSpeed Insights qui simulent des visites non mises en cache.
La mise en cache est la force de Shopify — les performances frontales sont les vôtres
Le système de mise en cache à trois couches de Shopify – navigateur, bord CDN et niveau application – gère automatiquement le côté serveur et livraison. Les actifs statiques reçoivent des en-têtes de cache du navigateur pendant un an. Les pages HTML anonymes sont mises en cache sur plus de 300 nœuds Cloudflare. Vous n’avez pas besoin de configurer quoi que ce soit.
La véritable opportunité de performances est l'optimisation frontale : la façon dont votre thème restitue le contenu après l'arrivée des ressources mises en cache. Ressources bloquant le rendu, non optimisé Livraison CSS, et lourd scripts tiers sont les goulots d'étranglement que la mise en cache ne peut pas résoudre.
Testez la vitesse de votre magasin maintenant pour voir l'efficacité du rendu de votre boutique - puis laissez Thunder optimise les parties que la mise en cache laisse sur la table. Pour la stratégie d'optimisation complète, consultez notre guide complet d'optimisation de la vitesse Shopify.
Optimisation de vitesse experte pour votre boutique
Notre équipe gère tout — optimisation du thème, nettoyage des apps, garantie Core Web Vitals. La plupart des boutiques optimisées en 2 semaines.
✅ Garantie Core Web Vitals · ⚡ Livraison en 2 semaines · 🎁 6 mois Thunder offerts
À partir de 1 500 € · En savoir plus