How to add DNS Prefetch, Prefetch, preload and preconnect URLs in AMP

DNS Prefetch, Prefetch, Preload, and Preconnect is a new web standard that offers more control on how particular resources are fetched and it is another performance-enhancing technique. We can use it to tell the browser which assets the user might need in the future.

DNS prefetch

This notifies the client that there are assets we’ll need later from a specific URL so the browser can resolve the DNS as quickly as possible.

Prefetch

If we’re certain that a specific resource will be required in the future, then we can ask the browser to request that item and store it in the cache for reference later.

Preload

A new spec called preload suggests that sometimes it’s best to always download an asset, regardless of whether the browser thinks that’s a good idea or not. Unlike prefetching assets, which can be ignored, preloading assets must be requested by the browser.

Preconnect

Preconnecting is another speed-optimization HTML tag, in which the browser sets up an early connection before an HTTP request is actually sent to the server.

You will find this option in the WordPress Dashboard -> Navigate to AMP option panel -> Settings -> Advance Settings

Scroll down a little to see this option

DNS Priority URL(s): In this option, four options will be displayed as per your requirement, you need to select the Option.

For eg: I’ve selected the DNS-Prefetch and in this field, you need to enter DNS-Prefetch URL and if you want to add more URLs the click on the “Add More” button and then click on the”Save Changes” button which you can see in the below screenshot.

The Output of the DNS Priority URL(s) in AMP

That’s it for this tutorial!

We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.