# Preconnect and DNS Prefetch: Warming Up Third Party Origins Source: https://storefrontspeedjournal.com/blog/2026-10-27-preconnect-dns-prefetch-shopify-origins.html Reviewed October 27, 2026 Every third party origin costs connection time before it delivers anything. Resource hints can start that work early. Which origins deserve a hint on Shopify, and which do not. ## The hidden cost before the first byte Before a browser can download a file from a new origin, it must look up the domain, open a connection, and negotiate encryption. On a fast network that sequence is easy to ignore. On a mobile connection it can cost hundreds of milliseconds per origin, paid before any content moves. A modern storefront touches many origins: the platform CDN, font services, analytics, review and chat providers, payment and video hosts. Each one that is needed early in the page pays its connection cost at the worst possible moment, in series with rendering. Resource hints are the browsers way of doing that setup work in advance. A DNS prefetch starts the lookup early. A preconnect goes further, completing the connection and encryption handshake so the eventual request starts immediately. Used on the origins a page genuinely needs early, hints reclaim real time. Used indiscriminately, they waste connection resources on origins the page may never touch, and browsers limit how many they honor, so hints are a budget to spend on the critical few. ## Which origins earn a hint on a storefront Candidates are origins that serve render critical or near critical resources on that specific template: a font host supplying your headline font, the CDN domain serving product images if it differs from the main asset host, and payment or checkout related origins at the point of purchase. Analytics, chat, and social tools load late by design and gain little from early connection, since their requests will happen after the critical work anyway; hinting them spends budget to warm a connection that had time to warm itself. The discipline is per template, not site wide. A video host matters on the one landing page with the hero video and is dead weight hinted on every product page. A reviews origin matters on product pages. Hints pasted into a global header by an app, for the apps convenience, accumulate exactly like scripts do, and a header carrying eight preconnects is a header where none of them are truly prioritized. Audit hints the same way you audit scripts: list them, name the resource each serves, and delete the ones nobody can justify for that page type. ## Implementation details that decide whether hints work A preconnect for an origin that serves fonts needs the crossorigin attribute set correctly, because fonts are fetched in a different mode and a hint without it warms the wrong connection type, leaving the real request to pay full setup anyway. That single attribute mismatch is the most common reason a correctly identified hint produces no measurable gain. Similarly, hinting an origin over a protocol or subdomain variant the page does not actually use wastes the hint entirely, so copy origins exactly from the network panel of a real page load rather than from documentation. Measure hints like any other change. Compare the timing of the first request to the hinted origin before and after, on a throttled mobile profile, across several runs, because single runs are noisy. The expected gain is the connection portion of that request collapsing toward zero. If the request was not on the critical path, total page metrics may not move even when the hint works perfectly, which tells you the origin was never your bottleneck and the hint can be retired to keep the budget clean. ## Hints are seasoning, not the meal It is worth stating the hierarchy plainly. Removing an unnecessary third party saves its connection cost, its download, and its execution all at once, and beats hinting it earlier. Reducing what the critical origins must deliver beats warming them. Hints come third, as fine tuning for origins that have earned their place and are needed early. Stores reach for hints because they are one line of code and feel like progress; the audit that justifies them is the real work, and it usually finds deletions worth ten times the hint gains. Add a line to your quarterly script audit for resource hints: list every preconnect and prefetch in the theme, match each to a current early resource, and remove orphans left by uninstalled apps and finished campaigns. Connection budgets, like script budgets, only stay honest when somebody owns the total. ## Related reading If this topic is useful, these earlier guides go deeper on connected questions: [Unused JavaScript in Shopify Themes: Finding and Cutting It Safely](https://storefrontspeedjournal.com/blog/2026-10-26-unused-javascript-shopify-themes-audit.md), [Preloading Your Hero Image: The LCP Win Most Stores Miss](https://storefrontspeedjournal.com/blog/2026-10-26-preloading-hero-image-shopify-lcp.md), and [Redirect Chains: The Invisible Delay in Front of Your Store](https://storefrontspeedjournal.com/blog/2026-10-25-redirect-chains-slowing-shopify-store.md). ## Frequently asked questions ### What is the difference between dns-prefetch and preconnect? DNS prefetch only resolves the domain name early. Preconnect also opens the connection and completes the encryption handshake, so the real request can start immediately. Preconnect is stronger and more expensive, so reserve it for origins needed early. Prefetch suits origins likely to be needed later in the page. ### How many preconnect hints should a page have? Very few, typically two to four at most, aimed at origins serving critical early resources on that template. Browsers limit concurrent setup work, and long hint lists dilute the benefit. If everything is marked critical, nothing is. Audit hints per template and remove any whose resource loads late anyway. ### Why did my font preconnect not help? Font fetches use a different connection mode, so a preconnect to a font origin needs the crossorigin attribute to warm the right connection. Without it the browser opens a connection the font request cannot use. Also verify the hinted origin matches the exact host the font actually loads from in a real page view. ### Should I preconnect analytics and chat origins? Generally no. They load late by design, so their connections have time to set up without blocking rendering, and hinting them spends limited browser connection budget for no critical path gain. Spend hints on font, image, and checkout related origins that a page needs in its first moments.