DNS Prefetch in WordPress: When to Use It and How to Implement

admin
No comments on DNS Prefetch in WordPress: When to Use It and How to Implement

What Is DNS Prefetch?

DNS prefetch hints instruct the browser to resolve third-party domain names ahead of time, reducing lookup delays when those resources load. In most cases, it’s better to host external scripts locally or defer their JavaScript, making DNS prefetch unnecessary for locally hosted files.

WordPress DNS Prefetch Illustration

1. Why Preconnect and Deferring JavaScript Are Faster

Preconnect opens early connections to critical origins like your CDN or font host (e.g., fonts.gstatic.com). Many caching plugins add these hints automatically. For other scripts, defer JavaScript so non-critical code loads after the main thread is free.

LiteSpeed Cache Preconnect Fonts

Plugins like WP Rocket handle script deferral automatically. Others (Perfmatters, Flying Script) require you to list URLs manually. Deferring third-party comment or social plugins prevents them from showing as errors in PageSpeed Insights.

Perfmatters Delay JavaScript

2. Identifying Third-Party Domains

Run a “reduce impact of third-party code” report (e.g., in PageSpeed Insights) to see which domains still load after hosting assets locally and preconnecting fonts/CDNs. Those leftover domains are the ones you could prefetch.

Reduce impact of third party code report

3. Adding DNS Prefetch Manually

To add prefetch hints by hand, insert links into your header.php before </head>:

<link rel="dns-prefetch" href="https://maps.googleapis.com">
<link rel="dns-prefetch" href="https://ajax.googleapis.com">
<link rel="dns-prefetch" href="https://www.google-analytics.com">
<!-- add other domains as needed -->

4. Adding DNS Prefetch with Plugins

If your cache plugin lacks DNS prefetch settings, install the Pre* Party Resource Hints plugin, or use built-in options:

  • WP Rocket: Preload → Prefetch DNS Requests
  • Perfmatters: Preloading → DNS Prefetch
  • SiteGround Optimizer: Frontend Optimizations → Prefetch External Domains
  • LiteSpeed Cache: Page Optimization → DNS Prefetch Control

WP Rocket DNS Prefetch

Perfmatters DNS Prefetch

SiteGround Optimizer DNS Prefetch

LiteSpeed Cache DNS Prefetch

5. Measuring DNS Prefetch Impact

Check your waterfall chart (GTmetrix, WebPageTest) before and after adding prefetch hints. You should see slightly faster domain lookups for those third-party hosts, with minimal downside if you only prefetch domains actually used by your site.

DNS Prefetch Waterfall Chart

(Kéo nội dung từ module OpenAI/Google Sheets đầu tiên vào đây)

Leave a Comment