It’s rare you should need to use DNS prefetch, but why?
DNS prefetch establishes early connections to third-party domains. However, third-party code should be hosted locally or its JavaScript should be delayed. Since prefetch is irrelevant for locally hosted files (and it would be counterintuitive to prefetch something that’s already being delayed), there’s usually no need to add DNS prefetch hints to WordPress. Instead, you should look into hosting files locally (fonts, analytics, YouTube thumbnails…) and delaying JavaScript.
Some optimization plugins let you add DNS prefetch hints (such as Perfmatters), otherwise you can use the Pre* Party Resources Hints plugin or manually add this code to your header.php file:
<link rel="dns-prefetch" href="https://externaldomain.com">
1. Why Preconnect And Delaying JavaScript Is Faster
Preconnect should typically be done with CDN URLs (i.e. cdn.yourdomain.com). And if fonts aren’t hosted locally, then you should also preconnect them (usually fonts.gstatic.com). Most cache plugins automatically add preconnect hints, but check their documentation to be sure.
For most other third-party code, you should delay the JavaScript. WP Rocket does this automatically while other plugins (like FlyingPress or Perfmatters) require you to add URLs manually. You can even delay entire plugins that load below the fold, for example, consider delaying third-party comment plugins like wpDiscuz/social sharing plugins. This delays third-party requests loaded by those plugins so they won’t appear as errors in PageSpeed Insights.
For third-party code that can’t be hosted locally or delayed, that’s the only reason to use DNS prefetch. While DNS prefetch establishes earlier connections, it’s likely not as effective as preconnect or delaying, otherwise it would probably be a PageSpeed Insights recommendation.
2. Find Third-Party Domains On Your Site
The first step is to learn which domains to prefetch. Open your “reduce impact of third-party code” report to see third-party domains loading on your site. After you’ve hosted files locally and preconnected any third-party fonts + CDN URLs, the “leftovers” are what you can prefetch.
3. Add DNS Prefetch Manually
To add DNS prefetch manually, add the examples to your header.php file:
<link rel="dns-prefetch" href="https://maps.googleapis.com">
<link rel="dns-prefetch" href="https://maps.gstatic.com">
<link rel="dns-prefetch" href="https://ajax.googleapis.com">
<link rel="dns-prefetch" href="https://apis.google.com">
<link rel="dns-prefetch" href="https://google-analytics.com">
<link rel="dns-prefetch" href="https://www.google-analytics.com">
<link rel="dns-prefetch" href="https://ssl.google-analytics.com">
<link rel="dns-prefetch" href="https://ad.doubleclick.net">
<link rel="dns-prefetch" href="https://googleads.g.doubleclick.net">
<link rel="dns-prefetch" href="https://stats.g.doubleclick.net">
<link rel="dns-prefetch" href="https://cm.g.doubleclick.net">
<link rel="dns-prefetch" href="https://www.googletagmanager.com">
<link rel="dns-prefetch" href="https://www.googletagservices.com">
<link rel="dns-prefetch" href="https://adservice.google.com">
<link rel="dns-prefetch" href="https://pagead2.googlesyndication.com">
<link rel="dns-prefetch" href="https://tpc.googlesyndication.com">
<link rel="dns-prefetch" href="https://youtube.com">
<link rel="dns-prefetch" href="https://i.ytimg.com">
<link rel="dns-prefetch" href="https://api.pinterest.com">
<link rel="dns-prefetch" href="https://pixel.wp.com">
<link rel="dns-prefetch" href="https://connect.facebook.net">
<link rel="dns-prefetch" href="https://platform.twitter.com">
<link rel="dns-prefetch" href="https://syndication.twitter.com">
<link rel="dns-prefetch" href="https://platform.instagram.com">
<link rel="dns-prefetch" href="https://platform.linkedin.com">
<link rel="dns-prefetch" href="https://disqus.com">
<link rel="dns-prefetch" href="https://sitename.disqus.com">
<link rel="dns-prefetch" href="https://s7.addthis.com">
<link rel="dns-prefetch" href="https://w.sharethis.com">
<link rel="dns-prefetch" href="https://s1.wp.com">
<link rel="dns-prefetch" href="https://1.gravatar.com">
<link rel="dns-prefetch" href="https://s.gravatar.com">
<link rel="dns-prefetch" href="https://stats.wp.com">
<link rel="dns-prefetch" href="https://securepubads.g.doubleclick.net">
<link rel="dns-prefetch" href="https://ajax.microsoft.com">
<link rel="dns-prefetch" href="https://s3.amazonaws.com">
<link rel="dns-prefetch" href="https://a.opmnstr.com">
<link rel="dns-prefetch" href="https://script.hotjar.com">
<link rel="dns-prefetch" href="https://code.jquery.com">
<link rel="dns-prefetch" href="https://player.vimeo.com">
<link rel="dns-prefetch" href="https://github.githubassets.com">
<link rel="dns-prefetch" href="https://referrer.disqus.com">
<link rel="dns-prefetch" href="https://stats.buysellads.com">
<link rel="dns-prefetch" href="https://s3.buysellads.com">
4. Add DNS Prefetch With Plugins
Many cache plugins support DNS prefetch, but if it doesn’t, use Pre* Party Resource Hints.
WP Rocket’s DNS Prefetch – prefetch DNS requests is found in the Preload settings.
Perfmatters’ DNS Prefetch – prefetch DNS requests is found in the Preloading settings.
SiteGround Optimizer’s DNS Prefetch – DNS pre-fetch for external domains is found in the Frontend Optimizations settings.
LiteSpeed Cache’s DNS Prefetch – DNS prefetch and DNS prefetch control is in Page Optimizations → HTML settings (leave prefetch control on to prefetch URLs in the document).
5. Measure Effectiveness Of DNS Prefetch
Open your Waterfall chart (i.e. in GTmetrix) to see how long third-party domains take to load. Be sure to benchmark your results before & after adding DNS prefetch. Fortunately, there should be little to no penalty for prefetching third-party domains that aren’t loaded on your site (however, you have to be careful with this if using preload & preconnect). Hopefully, it’s slightly faster now.
Drop me a comment if you need help, and don’t forget to preload key requests!
Cheers,
Tom
