Making a website faster can sometimes be a very tricky process—especially a WordPress site. There are many variables to consider like images, plugins, bloated JavaScript, etc.
However I recently discovered a fantastic way to slightly improve the speed of any website. The best part? It doesn’t take much effort to implement.
Let’s take a look.
Introducing, DNS-prefetch
The technique is called DNS-prefetch, and involves adding some extra HTML code to your site’s <head> section.
It looks like this:
<link rel="preconnect" href="https://cdn.shopify.com" crossorigin />
<link rel="dns-prefetch" href="https://cdn.shopify.com" />Let’s break this down.
There are two <link> tags in the above code snippet, one for preconnect and the other for dns-pretetch.
The dns-prefetch link tag will attempt to “prefetch” the DNS resolution made to any third-party domain that your site connects to. A great example of this would be including icons from Font Awesome, or custom fonts from Google fonts. Our ShopWP plugin also leverages this technique.
The preconnect link tag, if supported by the user’s browser, will attempt to establish a full connection to the third-party server. This includes:
- 🔍 DNS resolution
- đź”’ Establishing the TCP connection
- 🤝 Performing the TLS handshake (if applicable)
So using dns-prefetch and preconnect together will help the most.
Now let’s discover why this works.
Why does this help boost WordPress performance?
So why does this help boost performance? To understand this, let’s take a quick look at how a website works.
If you load any asset (image, font, script, css, etc) from a third-party server, a bunch of things have to take place before that asset is actually loaded into your site.
- The first thing that has to happen is your site will perform a “DNS resolution” for the third-party server. This essentially converts the domain name to a real IP address. This takes time to do.
- Your site will then send an HTTP request to the third-party server, asking for the specific resource. This also takes time.
- If you’re connecting to a server via
https, the secure connection, or handshake, needs to happen. This will take more time.
So by implementing DNS prefetching, your site will run the above steps before the assets are even requested; essentially front-running all of the expensive work. This can potentially shave off hundreds of milliseconds—which definitely adds up—depending on how large your site is!
A great resource to learn more about this process can be found on the MDN docs.
Things to consider
There are a couple things to consider before implementing DNS prefetching:
- This technique will only work for cross-origin (third-party) domains. This means the speed of any asset or network request made internally won’t be improved. This will only apply to third-party domains.
- If you’re using a premium WordPress theme, the theme developer may have already implemented this for you. If you’re not sure, the best way to check is to simply ask them. If you’re comfortable, you could also create a child theme and make the changes yourself. See the WordPress hook section below.
Before you copy and paste, be sure to read more about how to customize this for your needs.
Under the hood, ShopWP will fetch your Shopify data from two third-party domains:
- cdn.shopify.com
- .myshopify.com
In the example below, we’re using both rel="preconnect" and rel="dns-prefetch" for the best possible results. The https://cdn.shopify.com domain is used when loading product images, and .myshopify.com is used when fetching product data.
Using DNS prefetch to speed up ShopWP
ShopWP is built to be fast, and by leveraging DNS prefetching you can make it even faster. Here’s how to configure things.
ShopWP makes requests for two domains:
- cdn.shopify.com
- <yourstore>.myshopify.com
The <yourstore> part is your specific Shopify domain. This is the same domain you use to login to Shopify. You’ll want to replace that with your own domain.
The full code snippet will look something like this:
<link rel="preconnect" href="https://cdn.shopify.com" crossorigin />
<link rel="dns-prefetch" href="https://cdn.shopify.com" />
<link rel="preconnect" href="https://<yourstore>.myshopify.com" crossorigin />
<link rel="dns-prefetch" href="https://<yourstore>.myshopify.com" />Using a WordPress hook
To add this HTML to your WordPress theme, you can leverage the wp_head action hook inside your theme like this:
<?php
function add_dns_prefetch() { ?>
<link rel="preconnect" href="https://cdn.shopify.com" crossorigin/>
<link rel="dns-prefetch" href="https://cdn.shopify.com" />
<link rel="preconnect" href="https://<yourstore>.myshopify.com" crossorigin/>
<link rel="dns-prefetch" href="https://<yourstore>.myshopify.com" />
<?php }
add_action( 'wp_head', 'add_dns_prefetch' );Conclusion
While this won’t make your site load instantly, it is something you can do to improve the overall speed of your site. It’s a simple and easy technique you can implement, which is definitely rare in the world of web performance!
If you’d like to learn more about how this works, including a technical deepdive, I highly recommend this MDN article on DNS prefetching to learn more about how it works.