When trying to improve the performance of your Shopify store, it’s essential to understand all the optimization opportunities available. One simple yet effective method is using ‘resource hints’—directives like preload, preconnect, prefetch, and dns-prefetch. These help the browser fetch important assets more efficiently, reducing load times and improving user experience.
Need this implemented for you? Check out our services page

What Are Resource Hints?

Resource hints are HTML <link> elements that give the browser instructions on how to prioritize certain resources. For example: 
<link rel="preload" href="{{ 'jquery.min.js' | asset_url }}" as="script">
<link rel="prefetch" href="{{ 'stylesheet.css' | asset_url }}">
<link rel="dns-prefetch" href="//cdn.shopify.com">
<link rel="preconnect" href="//cdn.shopify.com">

1. <link rel=”preload”> — Load Critical Resources Early

Preload tells the browser to fetch a critical resource immediately—before it’s needed. This helps prevent render-blocking and speeds up initial page load.

Example:

<link rel="preload" href="{{ 'jquery.min.js' | asset_url }}" as="script">

Use it wisely in 2025:

  • ✅ Only preload critical assets (fonts, scripts, styles used immediately).
  • ⚠️ Don’t overuse preload — it can backfire and actually hurt performance.
  • ⛔ Avoid preloading resources that won’t be used within 3 seconds, as Chrome will issue console warnings.
Font preload tip: Always include the crossorigin attribute to avoid fonts being fetched twice. 
<link rel="preload" href="<https://fonts.googleapis.com/css?family=Roboto>" as="style" crossorigin="anonymous">

2. <link rel=”prefetch”> — Load Resources You’ll Need Soon

Prefetch is great for assets not used on the current page, but likely needed soon. The browser fetches them after page load and caches them.

Example:

<link rel="prefetch" href="{{ 'next-page-script.js' | asset_url }}">
Use it for: anticipated navigation, large images on next page, or scripts needed after initial render.

3. Breaking Down a Request

To understand the next two resource hints, here’s what happens before a request is made:
  1. DNS lookup — Find the server’s IP address.
  2. TCP handshake — Establish a connection.
  3. TLS negotiation — Secure the connection via HTTPS.
Both dns-prefetch and preconnect help by handling parts (or all) of this process in advance.

4. <link rel=”dns-prefetch”> — Resolve Domains Early

This performs a background DNS lookup for external domains—no resource is loaded, just the address is cached.

Example:

<link rel="dns-prefetch" href="//cdn.shopify.com">
Use it for external services like:
  • Shopify CDN
  • Google Fonts
  • Google Analytics
  • Third-party app domains

5. <link rel=”preconnect”> — Establish Early Connections

Preconnect performs the DNS lookup, TCP handshake, and TLS negotiation—all upfront. This sets up a ready-to-use connection for when the browser actually needs to fetch the resource.

Example:

<link rel="preconnect" href="//fonts.googleapis.com" crossorigin>
Modern tip: Only use preconnect for domains where resources are fetched within 10 seconds.

6. Combine <dns-prefetch> + <preconnect> for Best Coverage

<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="preconnect" href="//fonts.googleapis.com" crossorigin>
dns-prefetch acts as a fallback if preconnect isn’t supported by the browser, ensuring some speed benefit regardless.

Bonus: Don’t Overdo It

Using too many resource hints can be counterproductive. Limit them to the most critical third-party domains. More is not always better—optimize thoughtfully and test your site with tools like Lighthouse or WebPageTest.

Final Thoughts

Resource hints are powerful tools for optimizing Shopify performance, especially when used strategically. Keep them lean, purposeful, and updated based on what your store really needs. Need help implementing these? Speed Boostr offers Shopify-specific speed optimization services tailored to your theme and app stack.