DNS Prefetch and Preconnect
DNS prefetch and preconnect are resource hints that warm up connections to third-party origins (analytics, fonts, payments, embeds). Used correctly, they reduce handshake latency for assets you know you'll need early. Used incorrectly, they waste sockets and bandwidth.
What Each Hint Does
| Hint | What It Warms Up | Cost | Best Use |
|---|---|---|---|
dns-prefetch | DNS lookup | Low | A larger set of third-party domains that may be used soon |
preconnect | DNS + TCP + TLS | Medium/High | A small set of origins needed early (fonts, payments, critical CDN) |
Recommended Rule of Thumb
- Use preconnect for a few origins that are required early on the page.
- Use dns-prefetch for additional third-party origins you want to keep "warm".
caution
Preconnect is not free. Do not add dozens of preconnects "just in case".
How to Choose Origins (Practical)
- Pick the templates that matter: homepage, one content page, and checkout/cart/product if applicable.
- Open DevTools -> Network and reload with cache disabled.
- Identify third-party origins that are requested early (or that block fonts/payments).
- Add hints only for origins that actually load on that template.
Implementing in Perfmatters
In Perfmatters, add domains under the DNS Prefetch and Preconnect fields:
WP Admin -> Perfmatters -> Assets -> Preloading
Guidelines:
- Add domains only (no
https://, no paths). - Keep your preconnect list short.
Example lists (adjust to your site)
dns-prefetch-static-site.txt
fonts.googleapis.com
fonts.gstatic.com
www.googletagmanager.com
www.google-analytics.com
preconnect-static-site.txt
fonts.gstatic.com
dns-prefetch-woocommerce.txt
fonts.googleapis.com
fonts.gstatic.com
js.stripe.com
www.paypal.com
www.googletagmanager.com
www.google-analytics.com
preconnect-woocommerce.txt
fonts.gstatic.com
js.stripe.com
Manual HTML Examples
DNS prefetch:
dns-prefetch.html
<link rel="dns-prefetch" href="//fonts.gstatic.com" />
Preconnect (note the scheme):
preconnect.html
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
Validation (How to Know It Worked)
- DevTools -> Network -> click an asset from the origin -> Timing tab.
- DNS/connection/TLS time should be reduced (or already resolved) compared to a baseline run.
- View page source (or inspect the
<head>) and confirm you are not emitting duplicates from multiple tools.
Common Mistakes
| Mistake | Why It Hurts | Fix |
|---|---|---|
| Adding full URLs | Perfmatters expects domains | Use only the domain name |
| Preconnecting to everything | Wastes sockets and CPU | Keep preconnect to the few origins that matter |
| Preconnecting to delayed scripts | You warm up an origin that won't be used until later | Prefer dns-prefetch, or skip entirely |
Forgetting crossorigin for font preconnects | Can cause suboptimal font fetch behavior | Use crossorigin on fonts.gstatic.com preconnect |