Preconnect, Preload, and DNS-Prefetch for Shopify App-Heavy Stores
Most Shopify stores have 10–20 third-party app domains injecting resources on every page load. A targeted resource-hint strategy can cut 200–500ms off LCP by giving the browser an early start on the connections that actually matter — without making things worse.
A typical Shopify product page in 2026 loads resources from 12–20 third-party domains: Klaviyo, Bold, Loox, Privy, Tidio, Recharge, Stamped, Searchspring, Vimeo, Cloudinary, plus Shopify's own subdomains for theme assets, Shop Pay, and analytics. Each domain requires DNS resolution + TCP handshake + TLS negotiation before the first byte arrives — 100–300ms of dead time per origin on mobile networks. A strategic resource-hint policy reclaims most of that time without removing any apps. Done wrong, the same hints can make things slower.
The Four Resource Hints (and What Each Does)
dns-prefetch
Cheapest hint. Tells the browser to resolve a domain's DNS in the background. Saves 20–120ms per origin on first contact. No connection is opened; just the name resolution. Safe to apply liberally — even 30 dns-prefetch hints rarely cause harm.
<link rel="dns-prefetch" href="https://cdn.shopify.com">preconnect
Stronger hint. DNS + TCP + TLS, all done eagerly. Saves 100–300ms per origin when the resource is needed soon after page load. Limit to 4–6 origins maximum — too many preconnects compete for bandwidth on mobile and slow down the critical path.
<link rel="preconnect" href="https://cdn.shopify.com">
<link rel="preconnect" href="https://cdn.shopify.com" crossorigin>The crossorigin attribute matters: fonts and CORS-fetched assets need crossorigin; same-origin or simple GETs don't. When in doubt, declare both variants (browsers will deduplicate the actual connection).
preload
Imperative. Tells the browser to fetch a specific resource right now, at high priority, with the correct type. Used for hero images, critical fonts, and render-blocking CSS. Misuse is common: preloading non-critical resources steals bandwidth from the LCP image.
<link rel="preload" as="image" href="/hero.avif" type="image/avif" fetchpriority="high">
<link rel="preload" as="font" href="/font.woff2" type="font/woff2" crossorigin>prefetch
Low-priority background fetch for resources likely needed on the next navigation (e.g., the cart page from a product page). Browsers may ignore prefetch on slow networks or save-data mode. Useful for ecommerce funnels but rarely critical.
The Shopify App Audit Process
Before adding hints, identify which apps are actually on the LCP critical path. Steps:
- Open your product page in Chrome DevTools → Network tab
- Filter by "Initiator" — sort by "Time"
- Identify the LCP image (typically the largest above-fold image)
- Note every domain that loads in the first 1.5 seconds of the page lifecycle
- Identify which apps own those domains — Klaviyo's signup popups, Loox's review widget, Bold's options, etc.
From scans of 2,000+ Shopify stores, the domains that consistently appear on the LCP critical path are:
- cdn.shopify.com — theme JS/CSS, product images (always)
- fonts.shopifycdn.com — webfonts (always)
- your-cdn.com — if using a custom image CDN like Cloudinary or imgix
- klaviyo.com / static.klaviyo.com — if Klaviyo signup forms are above the fold
- loox.io / cdn.loox.io — if Loox reviews are above the fold
- shopifycloud.com / pay.shopify.com — Shop Pay button (always on product pages)
The Right Hint Strategy
Place these in your theme.liquid <head>, before any other <link> tags but after any <meta> charset/viewport:
<!-- Preconnect: the 4-6 most critical origins -->
<link rel="preconnect" href="https://cdn.shopify.com" crossorigin>
<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
<link rel="preconnect" href="https://shopifycloud.com">
<link rel="preconnect" href="https://cdn.loox.io" crossorigin>
<!-- DNS-prefetch: every other third-party domain (safe to be liberal) -->
<link rel="dns-prefetch" href="https://static.klaviyo.com">
<link rel="dns-prefetch" href="https://www.google-analytics.com">
<link rel="dns-prefetch" href="https://googletagmanager.com">
<link rel="dns-prefetch" href="https://connect.facebook.net">
<link rel="dns-prefetch" href="https://www.googletagmanager.com">
<link rel="dns-prefetch" href="https://i.cdn.bold-commerce.com">
<!-- Preload: only the LCP image and primary webfont -->
<link rel="preload" as="image" href="{{ product.featured_image | image_url: width: 1200, format: 'auto' }}" fetchpriority="high">
<link rel="preload" as="font" type="font/woff2" href="{{ 'font-body.woff2' | asset_url }}" crossorigin>Common Mistakes That Make Things Slower
1. Preconnecting Everything
Stores with 15+ preconnects routinely have worse LCP than stores with no preconnects. The browser opens too many parallel TCP connections, all competing for mobile bandwidth. Limit to 4–6 origins. Use dns-prefetch (cheaper) for the rest.
2. Preloading the Wrong Image
Themes often preload a fixed "hero.jpg" path that doesn't match the actual LCP image on every page. On product pages where the featured image is dynamic, the preload steals bandwidth from the actual LCP image and loads a JPEG that's never used. Always preload the actual LCP image for the current page, using Liquid logic to determine which image that is.
3. Missing crossorigin on Font Preconnects
Fonts loaded with crossorigin (which is automatic for CORS-fetched fonts) need a matching preconnect with crossorigin. Without it, the browser opens a second connection to the same origin to fetch the font — defeating the preconnect entirely. The fix is including both variants:
<link rel="preconnect" href="https://fonts.shopifycdn.com">
<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>4. Preloading Non-Critical CSS
Some optimization plugins blindly preload every stylesheet. The result: render-blocking CSS files fight each other for bandwidth, and the LCP-critical stylesheet arrives later than it would have without any preload at all. Only preload CSS that contains the above-fold styles — for most stores, that's the main theme.css file, nothing else.
5. Preloading Below-the-Fold Images
Lazy-loaded images shouldn't be preloaded. They consume bandwidth before they're needed and delay above-fold rendering. Only preload images that the user will see in the first viewport.
6. Resource Hints in JS-Injected DOM
Some apps inject <link rel="preconnect"> tags via JavaScript after page load. These hints arrive too late to help — the browser has already started downloading everything else. Hints only work if they're in the initial HTML, not added later by JS.
App-Specific Hint Recommendations
Klaviyo
If Klaviyo signup forms appear above the fold (popup or embedded), preconnect to static.klaviyo.com. If forms are exit-intent or scroll-triggered, dns-prefetch is sufficient.
Loox / Stamped / Judge.me Reviews
Review widgets are LCP-critical only if star ratings appear above the fold. For most stores that show stars next to the product title, preconnect to the review CDN.
Recharge / Bold Subscriptions
Subscription apps inject scripts that modify the buy button. Preconnect if the subscription widget is above the fold; dns-prefetch otherwise.
Shopify Inbox / Tidio / Gorgias Chat
Chat widgets are below-the-fold (bottom-right corner) on first paint. Use dns-prefetch only. Some chat apps load 200–800 KB of JavaScript — preloading them is counterproductive.
Vimeo / YouTube Embeds
Video embeds on product pages are heavy. Preconnect only if the video is above the fold; dns-prefetch otherwise. Consider lazy-loaded video poster images instead of full embeds for product pages.
Measuring Success
Before deploying hints, baseline:
- Run PageSpeed Insights on 3 representative pages — note LCP, total connection time, and number of third-party origins
- Use Chrome DevTools Performance panel to capture a recording — note time-to-first-byte for each third-party domain
After deploying, re-measure. Expected results from a correctly-implemented strategy:
- LCP improvement: 150–400ms on mobile
- Connection time savings: 100–300ms for each preconnected origin
- No regressions elsewhere (if you preconnected the right 4–6 origins, not 15)
If LCP got worse, you preconnected too many origins. Reduce to the 4 most critical (typically Shopify CDN, fonts, Shop Pay, and your image CDN if you have one), and move the rest to dns-prefetch.
The Maintenance Question
Resource hints need maintenance. When you install a new app or remove an old one, the hint list should change. Quarterly audit recommended:
- Run a Network tab inspection on a product page
- Identify all third-party domains active in the first 2 seconds
- Cross-check against your hint list — add new ones, remove ones for uninstalled apps
The Bigger Win: Removing Apps
Resource hints are tactical optimization. The strategic move is removing apps you don't need. Every Shopify store has 2–5 apps that are no longer used but still injecting scripts on every page. Auditing your app stack quarterly and uninstalling unused apps will deliver more performance improvement than any resource hint strategy. The hints are for the apps you actively use; the apps you don't use should be deleted, not optimized.
Run a StoreVitals scan to see exactly which third-party domains are loading on your Shopify store, which apps own them, which are on the LCP critical path, and which resource hints would deliver the largest measurable performance gain.