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
Browser caching stores files locally on the visitor's device after the first download. When they visit again (or navigate to another page), the browser loads these files from disk instead of re-downloading them. This is the most impactful caching layer for returning visitors.
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
When a visitor requests a page, the request goes to the nearest Cloudflare edge node. If that node has a cached copy, it responds immediately — no round trip to Shopify's origin servers needed. If not, the edge node fetches the page from Shopify, serves it to the visitor, and stores a copy for subsequent requests.
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 or app embed blocks. These scripts load from external domains (not cdn.shopify.com), which means:
- 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 exactement pourquoi un magasin peut avoir une mise en cache CDN parfaite tout en se sentant lent — third-party scripts from apps crée des goulots d'étranglement en termes de performances que la mise en cache à elle 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
Edge caches have limited storage. Pages that rarely get visited may be evicted from the cache between visits, resulting in more cache MISSes. High-traffic pages (homepage, popular products) maintain warm caches; long-tail product pages with few visitors may consistently miss.
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
- Test from your customers' perspective — Utilisation notre test de vitesse gratuit or WebPageTest from geographic locations matching your customer base.
- 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 ?
Yes. Shopify serves static assets (images, CSS, JavaScript, fonts) with long Cache-Control headers — typically max-age=31536000 (1 year) for versioned assets on cdn.shopify.com. This means repeat visitors load these files from their browser's local cache instead of re-downloading them. HTML pages receive shorter cache durations or no-cache headers because they contain dynamic content like cart state and personalized elements.
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 ?
Shopify's caching is smart about personalization. HTML edge caching only applies to anonymous visitors. When a customer logs in, adds items to their cart, or has cookies that indicate a unique session, Shopify bypasses the edge cache and generates a fresh page from the origin server. This ensures logged-in customers see their correct cart, account details, and personalized recommendations while anonymous browsers get the fast cached version.
Les applications Shopify affectent-elles les performances de mise en cache ?
Yes, in two ways. First, apps that inject dynamic, personalized content (like recently viewed products or geolocation-based pricing) can prevent pages from being edge-cached because the content varies per visitor. Second, apps add their own JavaScript and CSS files that the browser must download — though these static app assets are typically cached on Shopify's CDN after the first load. Reducing unnecessary apps improves both cache hit rates and overall load time.
How do I know if my Shopify pages are being served from cache?
Open Chrome DevTools (F12), go to the Network tab, and reload your page. Click the main HTML document request and check the response headers. Look for 'cf-cache-status' — a value of 'HIT' means Cloudflare served the page from edge cache, 'MISS' means it went to Shopify's origin server, and 'DYNAMIC' means the page isn't eligible for edge caching. For static assets on cdn.shopify.com, you'll typically see 'HIT' after the first load.
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.
Expert Speed Optimization for Your Store
Our team handles everything — theme optimization, app cleanup, Core Web Vitals guarantee. Most stores optimized in 2 weeks.
✅ Core Web Vitals Guarantee · ⚡ 2-Week Delivery · 🎁 6 Months Free Thunder
Starting from €1,500 · Learn more