Optimize What Caching Can't Fix — Automatically
Shopify's caching handles asset delivery efficiently. The performance bottleneck most stores face is what happens after cached assets arrive — render-blocking JavaScript, unoptimized CSS, and poorly ordered resource loading. Run a free speed test on your store to see where your loading time is actually spent.
Thunder Page Speed Optimizer focuses on these post-cache optimizations:
- Defers non-critical JavaScript so the browser renders visible content first
- Inlines critical CSS — no extra round trip needed even on a cold cache
- Optimizes resource loading order for faster Largest Contentful Paint
- Manages third-party app scripts that bypass Shopify's caching layer
Understanding caching helps you make better decisions about theme choice, app management, and performance priorities. Let's break down each caching layer.
Layer 1: Browser Caching on 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.
What Shopify Caches in the Browser
| Asset Type | Cache Duration | Domain |
|---|---|---|
| Theme CSS/JS | 1 year (versioned filenames) | cdn.shopify.com |
| Product images | 1 year | cdn.shopify.com |
| Fonts | 1 year | cdn.shopify.com |
| App static assets | Varies (app-dependent) | Various CDN domains |
| HTML pages | No browser cache (or very short) | yourstore.myshopify.com |
Shopify uses content-addressed URLs for theme assets. When you edit your theme CSS, Shopify generates a new filename (like theme.css?v=123456), which forces browsers to download the new version. The old version's 1-year cache becomes irrelevant because the URL changed.
This means you never have to worry about visitors seeing stale CSS or JavaScript after a theme update — Shopify's cache busting handles it automatically.
Why HTML Isn't Browser-Cached
HTML pages contain dynamic content: cart item count, customer name, recently viewed products, and pricing that might change. Caching HTML in the browser would show stale data. Shopify sends Cache-Control: no-cache or short max-age headers for HTML to ensure visitors always get fresh page content.
This is where Shopify's CDN edge cache takes over — serving fresh HTML quickly without hitting the origin server every time.
Layer 2: Cloudflare CDN Edge Caching
Shopify partners with Cloudflare, whose CDN has 300+ edge nodes worldwide. This is the layer that makes Shopify's Time to First Byte (TTFB) so competitive — typically 200-600ms, with edge-cached pages responding in 50-150ms.
How CDN Edge Caching Works
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.
Request Flow: Edge Cache Hit vs Miss
What Gets Edge-Cached (and What Doesn't)
Since 2023, Shopify has expanded HTML edge caching for anonymous visitors. Here's what qualifies:
✅ Edge-Cacheable
- Homepage (anonymous visitors)
- Collection pages
- Product pages (anonymous)
- Blog posts and articles
- Static pages (About, Contact)
- All static assets (images, CSS, JS, fonts)
❌ Not Edge-Cacheable
- Logged-in customer pages
- Cart page (unique per session)
- Checkout (always dynamic)
- Pages with unique session cookies
- Theme preview mode
- Pages with dynamic Liquid forcing no-cache
You can verify cache status by checking the cf-cache-status response header in DevTools. See our Shopify speed benchmarks for how caching affects real-world performance numbers.
Layer 3: App-Level Caching
Individual Shopify apps may implement their own caching strategies for the data they serve. This is the most variable layer — and the one that can either help or hurt your store's performance.
How App Caching Works
Apps that display content on your storefront (review widgets, product recommendations, upsell popups) typically make API calls to their own servers. Well-built apps cache these responses:
- Good apps cache API responses on their CDN, serve static widget HTML where possible, and load asynchronously so they don't block page rendering
- Poorly built apps make fresh API calls on every page load, inject synchronous scripts that block rendering, and don't cache anything
The problem: you have no visibility into how apps handle caching internally. A review widget might cache reviews for 5 minutes or fetch them fresh every time — there's no way to tell without inspecting network requests.
App Scripts and the Caching Bypass Problem
Most Shopify apps inject JavaScript via ScriptTag or app embed blocks. These scripts load from external domains (not cdn.shopify.com), which means:
- They require separate DNS lookups and connections (adds 100-300ms per domain)
- Their cache headers are controlled by the app developer, not Shopify
- They can inject additional requests that bypass all Shopify caching
- Some apps add render-blocking scripts that delay page rendering even when the page itself is cached
This is exactly why a store can have perfect CDN caching and still feel slow — third-party scripts from apps create performance bottlenecks that caching alone can't solve.
When Shopify Caching Breaks: Common Scenarios
Understanding when caching doesn't apply helps you diagnose performance issues:
Theme Preview Mode
When you're previewing theme changes, Shopify disables edge caching entirely. This is why your store feels slower in the theme editor — you're seeing uncached origin responses. Don't judge performance based on preview mode.
Immediately After Content Updates
When you update a product, edit a page, or publish a blog post, Shopify invalidates the relevant CDN cache. The first visitor after an update sees a cache MISS (origin response). Subsequent visitors get the updated cached version. This typically resolves within seconds.
Geolocation and Currency Detection
Stores using geolocation-based pricing, currency switching, or region-specific content may see reduced edge cache effectiveness. If each geographic region sees different pricing, the CDN needs separate cached versions per region — reducing cache hit rates.
A/B Testing and Personalization Apps
Apps that modify page content based on visitor segments (A/B tests, personalized recommendations) effectively create unique page variants. This can prevent edge caching because the content varies per visitor. The more personalization you add, the less effective CDN caching becomes.
Low-Traffic Pages
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.
What Merchants Can Actually Optimize Beyond Caching
Since you can't configure Shopify's caching directly, focus on what you can control — the front-end performance that determines how quickly your store renders after cached assets arrive.
| Optimization | Impact | Your Control |
|---|---|---|
| CDN cache configuration | High | None — Shopify manages it |
| Browser cache headers | Medium | None — automatic for Shopify assets |
| Render-blocking resource deferral | Very High | Full — via theme code or Thunder |
| Critical CSS inlining | High | Full — via theme code or Thunder |
| Image optimization | High | Full — sizing, lazy loading, formats |
| App script management | High | Partial — remove unused apps, defer scripts |
| Resource hints (preconnect, preload) | Medium | Full — via theme code |
The pattern is clear: server-side caching is Shopify's job; front-end performance is your job. Even with perfect caching, a theme that loads 2MB of render-blocking JavaScript will feel slow. Even with zero caching, a well-optimized front-end renders fast.
Thunder Page Speed Optimizer automates the front-end optimizations in the green rows above — the ones that have the biggest impact and that you actually control. See our complete speed optimization guide for the full strategy.
Shopify Caching Optimization Checklist
While you can't configure caching directly, these actions maximize its effectiveness:
- Audit your installed apps — Remove any that aren't actively generating revenue. Fewer apps = fewer third-party scripts bypassing the cache layer.
- Check cache hit rates — Use Chrome DevTools to verify
cf-cache-status: HITon your key pages. Low hit rates suggest personalization or dynamic content is preventing caching. - Minimize personalization on landing pages — Keep your homepage and collection pages as "anonymous-friendly" as possible for maximum edge cache benefit.
- Use lazy loading for images — Even cached images take rendering time. Lazy loading defers off-screen images so the browser focuses on visible content first.
- Install Thunder for front-end optimization — Automate JavaScript deferral, critical CSS inlining, and resource prioritization. Install now
- Test from your customers' perspective — Use our free speed test or WebPageTest from geographic locations matching your customer base.
- Don't judge speed in theme preview — Preview mode disables caching. Test on the live store or use PageSpeed Insights.
Frequently Asked Questions About Shopify Caching
Does Shopify use browser caching?
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.
Can I control Shopify's CDN caching?
No. Shopify manages its Cloudflare CDN configuration automatically. You cannot set custom cache headers, purge the CDN cache, or configure edge caching rules. Shopify determines which pages qualify for edge caching based on whether the visitor is anonymous (cacheable) or logged in (not cacheable). The upside is that you don't need to worry about cache invalidation — Shopify handles it when you update products, collections, or theme files.
Why does my Shopify store show different content to different users if caching is 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.
Do Shopify apps affect caching performance?
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.
Does clearing my browser cache affect my Shopify store's speed for customers?
No. Clearing your own browser cache only affects your local experience. Your customers' browser caches are independent. However, if you're testing your store's speed, clearing your cache gives you a 'first visit' experience — useful for understanding what new visitors experience. For accurate speed testing, use incognito mode or tools like PageSpeed Insights that simulate uncached visits.
Caching Is Shopify's Strength — Front-End Performance Is Yours
Shopify's three-layer caching system — browser, CDN edge, and app-level — handles the server and delivery side automatically. Static assets get year-long browser cache headers. Anonymous HTML pages get edge-cached across 300+ Cloudflare nodes. You don't need to configure any of it.
The real performance opportunity is front-end optimization — how your theme renders content after cached resources arrive. Render-blocking resources, unoptimized CSS delivery, and heavy third-party scripts are the bottlenecks caching can't solve.
Test your store speed now to see how efficiently your store renders — then let Thunder optimize the parts that caching leaves on the table. For the complete optimization strategy, check our full Shopify speed optimization guide.
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