The Fastest Way to Optimize Resource Loading
Manual resource hints require editing your theme's Liquid code and understanding which resources are critical. If you'd rather skip the code changes, Thunder Page Speed Optimizer automatically manages resource loading priority:
- Defers non-critical scripts so critical resources (images, CSS, fonts) load first
- Manages third-party script execution order automatically
- No theme code editing required — install and go
Test your store's speed to see your current resource loading performance, then read on for the manual approach.
What Are Resource Hints and Why Do They Matter for Shopify?
When a browser loads your Shopify store, it reads the HTML top-to-bottom and discovers resources (images, CSS, fonts, scripts) as it goes. Some critical resources — like your hero image or primary font — are buried deep in CSS files or loaded via JavaScript. The browser won't find them until it's already parsed a lot of code.
Resource hints let you tell the browser: "Hey, start working on these resources now — don't wait to discover them naturally." They're <link> elements placed in the <head> of your HTML.
There are four types, each with different use cases:
| Hint | What It Does | When to Use |
|---|---|---|
| preload | Downloads a specific file immediately | Hero images, critical fonts, key CSS |
| preconnect | Opens a connection to a domain (DNS + TCP + TLS) | Third-party domains you'll definitely use |
| dns-prefetch | Resolves a domain's DNS only | Third-party domains you might use |
| prefetch | Downloads a file for a future navigation | Resources needed on the next likely page |
Each hint has a different cost-benefit profile. Used wisely, they accelerate LCP, reduce connection latency, and improve perceived performance. Used carelessly, they waste bandwidth and can actually slow down your most important resources.
Preload: Prioritize Critical Resources on Shopify
preload is the most powerful resource hint — and the most commonly misused. It tells the browser: "Download this file right now, it's critical for the current page." The browser treats it as mandatory and fetches the resource with high priority.
Preloading Your Hero Image (Biggest LCP Win)
The hero image is usually the Largest Contentful Paint element on your homepage and landing pages. Without preload, the browser discovers it only after downloading and parsing your theme's CSS — which can delay LCP by 1-2 seconds. Here's how to preload it in Shopify:
{% comment %} Add to theme.liquid inside <head> {% endcomment %}
{'
'}
{'{% if template == "index" %}'}{'
'}
{' {% comment %} Preload hero image on homepage {% endcomment %}'}{'
'}
{' '}{'
'}
{'{% endif %}'}{'
'}
{'
'}
{'{% if template contains "product" %}'}{'
'}
{' {% comment %} Preload main product image {% endcomment %}'}{'
'}
{' {% if product.featured_image %}'}{'
'}
{' '}{'
'}
{' {% endif %}'}{'
'}
{'{% endif %}'}}This technique typically improves LCP by 500ms-1.5s because the browser starts downloading the hero image in parallel with CSS and JavaScript instead of waiting. Shopify's Performance team recommends this approach specifically.
Preloading Fonts
If your theme uses custom web fonts, preloading the most critical font file prevents the browser from blocking text rendering while it discovers the font through CSS. See our full font optimization guide for details. The basic implementation:
{% comment %} Preload primary body font {% endcomment %}
{''}} Important: The crossorigin attribute is required for font preloads, even when the font is on the same domain. Without it, the browser downloads the font twice.
Using Shopify's Liquid Preload Filters
Shopify's Liquid templating provides built-in preload support through the image_tag and stylesheet_tag filters:
{% comment %} Preload via Liquid image_tag filter {% endcomment %}
{"{{ section.settings.hero_image | image_url: width: 1200 | image_tag: preload: true, fetchpriority: 'high' }}"}{'
'}
{'
'}
{'{% comment %} Preload critical stylesheet {% endcomment %}'}{'
'}
{"{{ 'critical.css' | asset_url | stylesheet_tag: preload: true }}"}}
These Liquid filters automatically generate the correct <link rel="preload"> tags along with the actual resource reference, which is cleaner than writing the preload hints manually.
Preconnect: Reduce Third-Party Connection Time
Every time your browser needs a resource from a new domain, it performs three steps: DNS resolution (50-200ms), TCP handshake (50-150ms), and TLS negotiation (100-200ms). That's 200-550ms of connection setup before a single byte downloads.
preconnect tells the browser to complete these steps early, so when the resource is actually needed, the connection is already established.
Common Preconnect Targets for Shopify Stores
{% comment %} Add to theme.liquid <head> — before stylesheet and script tags {% endcomment %}
{'
'}
{'{% comment %} Shopify CDN — your images, fonts, and assets {% endcomment %}'}{'
'}
{''}{'
'}
{'
'}
{'{% comment %} Google Fonts (if used) {% endcomment %}'}{'
'}
{''}{'
'}
{''}{'
'}
{'
'}
{'{% comment %} Google Analytics/GTM {% endcomment %}'}{'
'}
{''}{'
'}
{'
'}
{'{% comment %} YouTube embeds (if used) {% endcomment %}'}{'
'}
{''}{'
'}
{''}} When to use crossorigin: Add the crossorigin attribute when the resources from that domain will be fetched with CORS (fonts, images loaded via <img> with crossorigin, fetch API calls). If unsure, include it — the worst case is an extra connection.
Preconnect Limits
Each preconnect uses a browser connection slot and a small amount of CPU/memory. Browsers typically have 6 connections per domain and a limited total. Limit preconnects to 3-5 domains — only the ones your page will definitely use.
For domains you might use (e.g., a chat widget that only loads for some visitors), use the lighter dns-prefetch instead.
DNS-Prefetch: Lightweight Connection Prep
dns-prefetch is the lightest resource hint — it only resolves the domain's IP address (50-200ms savings) without establishing a full connection. Use it for third-party domains that your page might need:
{% comment %} DNS-prefetch for optional third-party services {% endcomment %}
{''}{'
'}
{''}{'
'}
{''}{'
'}
{''}} Best practice: Use preconnect for your top 3-5 critical domains. Use dns-prefetch as a fallback for all other third-party domains. A common pattern is to include both:
{% comment %} Belt and suspenders: preconnect with dns-prefetch fallback {% endcomment %}
{''}{'
'}
{''}}
Older browsers that don't support preconnect will still benefit from the dns-prefetch. Modern browsers use the preconnect and ignore the redundant dns-prefetch. This is especially relevant for Shopify stores with visitors on older mobile devices.
Prefetch: Preloading Resources for the Next Page
prefetch tells the browser: "The user will probably visit this page or need this resource next — download it in the background during idle time." This is useful for multi-page journeys like browsing collections → product pages.
{% comment %} On collection pages: prefetch the first few product pages {% endcomment %}
{'{% for product in collection.products limit: 3 %}'}{'
'}
{' '}{'
'}
{'{% endfor %}'}{'
'}
{'
'}
{'{% comment %} Prefetch critical CSS for product pages {% endcomment %}'}{'
'}
{""}}Use prefetch carefully: Prefetched resources download using idle bandwidth, so they don't block critical content. But on mobile with limited data plans, unnecessary prefetching wastes bandwidth. Only prefetch resources with high navigation probability.
Good candidates for prefetch on Shopify: the product page when a user hovers over a collection item, the checkout stylesheet on the cart page, and product images that are visible in a collection grid.
5 Common Resource Hint Mistakes on Shopify
Resource hints can backfire when implemented incorrectly. These are the mistakes we see most often when auditing Shopify stores (run a speed test and check your page's <head> to spot these):
❌ Mistake 1: Preloading everything
Adding preload to 10+ resources defeats the purpose. When everything is "critical," nothing is prioritized. The browser's limited connections get split across all preloads equally, slowing down the truly important ones.
Fix: Preload only 2-4 resources: hero image, primary font, and critical above-the-fold CSS.
❌ Mistake 2: Missing crossorigin on font preloads
Fonts require the crossorigin attribute on preload links, even when served from the same domain. Without it, the browser downloads the font twice — once from the preload (without CORS) and once from the CSS (with CORS).
Fix: Always add crossorigin to font preloads: <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />
❌ Mistake 3: Preloading resources that aren't used
Chrome DevTools Console shows "The resource was preloaded but not used within a few seconds" if you preload something the page doesn't actually need. This wastes bandwidth and connection slots.
Fix: Only preload resources the current page actually uses. Use conditional Liquid logic: {% if template == "index" %} for homepage-only preloads.
❌ Mistake 4: Preconnecting to unused domains
A preconnect that goes unused holds open a connection for ~10 seconds before timing out. This wastes browser resources and can actually delay connections to domains you do need.
Fix: Audit which third-party domains your page actually loads (Chrome DevTools → Network → sort by domain). Only preconnect to domains with resources in the critical path.
❌ Mistake 5: Wrong image URL in hero preload
Shopify's responsive image system serves different sizes based on viewport width. If your preload URL doesn't match the URL the CSS/HTML actually requests, the preload is wasted and the browser downloads the image twice.
Fix: Match the preload URL exactly to what the browser will request. Use Shopify's image_url filter with the same width parameter your theme uses for the hero image.
Where to Place Resource Hints in Shopify Themes
Placement order matters. Resource hints in the <head> of your theme.liquid should follow this order for maximum effectiveness:
<head>
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' {% if template == "index" %}'}{'
'}
{' '}{'
'}
{' {% endif %}'}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' {{ "theme.css" | asset_url | stylesheet_tag }}'}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' ...'}{'
'}
{''}}
Preconnects should come as early as possible in the <head> because the browser starts the connection immediately. Preloads should follow, then stylesheets, then dns-prefetch hints. Read our render-blocking resources guide for the complete picture of how to structure your theme's <head> for optimal loading order.
Manual Resource Hints vs Thunder: Comparison
| Factor | Manual Resource Hints | Thunder |
|---|---|---|
| Setup | Edit theme.liquid, understand resource priorities | One-click install |
| LCP improvement | 500ms-1.5s (hero image preload) | Similar gains via automatic optimization |
| Covers script deferral | No — hints don't defer scripts | Yes — full script management |
| Risk of over-optimization | High if too many hints added | Low — automatic prioritization |
| Maintenance | Update when theme changes or apps change | Automatic |
For maximum speed, combine both: manual hero image preload + Thunder for comprehensive script optimization. See pricing for plan details.
How to Measure Resource Hint Impact
After adding resource hints, measure the improvement using these tools:
- Thunder's free speed test — Quick before/after comparison of your store's overall performance.
- Chrome DevTools Network tab — Look at the waterfall chart. Preloaded resources should start downloading earlier (further left in the chart). Preconnected domains should show shorter connection bars.
- Lighthouse — Check if the "Preload Largest Contentful Paint image" audit passes after adding hero image preload. Also verify no "unused preloads" warnings appear.
- WebPageTest — The waterfall view shows exactly when each resource starts downloading. Compare waterfalls before and after adding hints to see the timing shift.
For a comprehensive guide to interpreting these results, read our speed test results guide and our complete speed optimization guide.
Frequently Asked Questions About Shopify Resource Hints
What are resource hints in Shopify?
Resource hints are HTML link elements that tell the browser to prepare resources before they're needed. The four types are: preload (download this resource immediately — it's needed for the current page), preconnect (establish a connection to this domain — we'll need it soon), dns-prefetch (resolve this domain's DNS — a lighter version of preconnect), and prefetch (download this resource for a future page navigation). On Shopify, resource hints go in the <head> of your theme.liquid file or are applied through Liquid filters like image_tag with preload.
Should I preload my hero image on Shopify?
Yes — preloading your hero image is one of the most effective ways to improve Largest Contentful Paint (LCP). The hero image is typically the LCP element on homepage and landing pages. Without preload, the browser discovers the image only after downloading and parsing the HTML and CSS. With preload, the browser starts downloading the hero image immediately, often shaving 500ms-1.5s off LCP time. Use <link rel='preload' as='image'> in your theme.liquid head for the hero image.
What's the difference between preload and preconnect?
Preload tells the browser to download a specific file immediately — you know the exact URL of the resource. Preconnect tells the browser to establish a connection (DNS + TCP + TLS) to a domain — you know you'll need resources from that domain but don't know the exact URLs yet. Use preload for known critical resources like hero images and key fonts. Use preconnect for third-party domains like Google Fonts, YouTube, or analytics services.
Can too many resource hints hurt Shopify performance?
Yes. Every preload and preconnect competes for the browser's limited connection slots and bandwidth. If you preload 10+ resources, you're essentially telling the browser everything is critical — which means nothing is prioritized. Best practice: preload only 2-4 truly critical resources (hero image, primary font, critical CSS), preconnect to 2-3 key third-party domains, and use prefetch sparingly for likely next-page navigations. Over-hinting is worse than no hints at all.
Does Thunder Page Speed Optimizer handle resource hints?
Thunder optimizes resource loading priority automatically, which includes managing how and when third-party resources connect and download. Rather than adding manual preconnect or preload tags, Thunder's script deferral and resource prioritization ensures critical resources load first while non-critical third-party scripts wait. This achieves similar results to manual resource hints without requiring theme code changes.
How do I preload fonts on Shopify?
Add a preload link in your theme.liquid <head> section for your most critical font file (typically the body text font in WOFF2 format). The syntax is: <link rel='preload' href='your-font.woff2' as='font' type='font/woff2' crossorigin>. The crossorigin attribute is required for fonts even if they're on the same domain. Only preload 1-2 font files — preloading all font weights wastes bandwidth on files the current page may not need.
Make Every Millisecond Count with Resource Hints
Resource hints are one of the lowest-effort, highest-impact Shopify speed optimizations you can implement. A single hero image preload can improve LCP by over a second. Strategic preconnects eliminate hundreds of milliseconds of connection setup time. The key is restraint — preload only what's truly critical, and let the browser handle the rest.
Start with the two highest-impact changes: preload your hero image and preconnect to your most-used third-party domains. Then use Thunder Page Speed Optimizer for comprehensive resource prioritization and third-party script management across your entire Shopify store.
Test your store's speed now to see where resource loading is slowing you down, and use the techniques in this guide to fix it.
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