Automatic DNS prefetch WordPress plugin released

External resources such as external scripts and stylesheets are almost unavoidable in modern WordPress design. Even if you are concatenating all of your local CSS and JavaScript files, it’s likely that you are at least loading some resources from external servers; for example Google Analytics, Google Fonts, perhaps jQuery, Disqus and social scripts.

When a user loads your site it must download each of these external resources, but before accessing the external resource it must perform a DNS lookup on the domain hosting the resource, if it does not already have a DNS result cached for that domain. Each of these DNS requests can add additional load time for these external scripts, and to your website.

Modern browsers have implemented an HTML tag that allows us to specify which external domains we are using, and prefetch the DNS for those domains. We include these tags in the head of our site, and by the time that the browser comes to request the resource, the DNS queries for these domains has already run in the background as the rest of the page downloads.

I am releasing a WordPress plugin today to automate this process for you, and speed up your WordPress site. The plugin looks through the wp_scripts and wp_styles arrays, which contain scripts and styles that have been added by themes and plugins using wp_enqueue_script / wp_enqueue_style functions. It looks for only scripts hosted on external domains, and outputs a DNS prefetch tag for each unique external domain it finds.

If you are interested in how DNS prefetching works, you can read more about this technique from the browser makers themselves, at the Chromium project, or on Mozilla’s developer site. However, with the Automatic DNS prefetch plugin, you do not necessarily need to understand fully the technical details, as the plugin will handle the details and speed up loading of your site automatically for you.

The plugin is available now from the WordPress plugin directory. Alternatively, you can grab the plugin from GitHub, or if using a Composer enabled build, by running composer require mabujo/automatic-dns-prefetch.