How to Use DNS Prefetch to Speed Up Third Party Requests

Every third party request on your page starts with a chain of work the browser has to do before it can ask for the actual file. DNS lookup, TCP handshake, TLS negotiation. On a good connection, that is still tens of milliseconds per origin, and it all happens serially for each new domain.

Resource hints let you tell the browser about these origins up front so it can start that work in parallel with parsing your HTML. It is a small change with a measurable payoff. For the other side of the same coin, see web fonts optimization and render blocking CSS.

Step 1: List every third party origin

Open DevTools, go to the Network tab, and reload your page with the cache disabled. Group the rows by domain. The result is usually longer than you expect. Typical third party origins include analytics platforms, font providers, marketing tags, embedded video players, chat widgets, and CDN subdomains for images or scripts.

Our Website Optimizer builds the same list for you and flags origins without a matching hint in the head. Write each origin down and tag it either critical or optional.

Step 2: Decide between dns-prefetch and preconnect

The two hints do different amounts of work. Read the full MDN reference for rel values if you want the complete picture, but the short version is this:

• preconnect resolves DNS, opens the TCP connection, and completes TLS. It is the most eager option.
• dns-prefetch only resolves the domain name. It is the cheapest option.

Use preconnect for the handful of origins you are confident the browser will need early, such as your font host and your primary analytics endpoint. Use dns-prefetch for everything else, for example marketing tags that only fire after user interaction.

Step 3: Add the resource hints in the head

Drop the link tags into your document head, before any stylesheet or script that triggers a request to the same origin. Order matters, since the browser starts processing hints as it parses the head.

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="dns-prefetch" href="https://www.googletagmanager.com" />
<link rel="dns-prefetch" href="https://cdn.example.com" />

The crossorigin attribute is required for origins that serve fonts or anything else fetched with CORS. Without it, the browser opens a second connection when the real request runs, which wastes the hint entirely. The web.dev guide on preconnect has the full rationale.

If you build in Webflow or Framer, paste these link tags into the custom code head field in your site settings. The builder inserts them into the rendered head for every page. For a Webflow specific walkthrough that includes the preconnect hint for the Webflow CDN, see our Webflow performance guide.

Step 4: Verify the hints fired

Reload your page with a cold cache, then hover over any third party request in the Network tab. The timing breakdown shows DNS lookup and TLS negotiation. If the hint worked, both should be near zero. If they are still full size, the hint is not firing in time or the URL does not exactly match the origin of the real request.

Common mistakes include typos in the origin, missing crossorigin on a font host, and placing the link tag after a script that already triggered the connection. The connection view in WebPageTest, a free browser-based performance testing service, is a clean way to see exactly when each origin connected.

Step 5: Keep the hint list short

Resource hints are not free. Each preconnect holds open a connection the browser could have used for something else, and each dns-prefetch still triggers a small DNS query. Browsers have an implicit budget, and past a certain point more hints make your page slower rather than faster.

Audit your hints every few months. Remove origins you no longer use. Leave dns-prefetch in place for occasional origins, and reserve preconnect for the small set you always need. The Website Optimizer will flag origins without hints and unused hints for removed origins so you do not have to track the list manually.