{"id":15610,"date":"2020-01-16T05:51:44","date_gmt":"2020-01-16T05:51:44","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&p=15610"},"modified":"2020-02-13T12:13:50","modified_gmt":"2020-02-13T12:13:50","slug":"how-to-add-dns-prefetch-prefetch-preload-and-preconnect-urls-in-amp","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-add-dns-prefetch-prefetch-preload-and-preconnect-urls-in-amp\/","title":{"rendered":"How to add DNS Prefetch, Prefetch, preload and preconnect URLs in AMP"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

DNS prefetch<\/h4>\n\n\n\n

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.<\/p>\n\n\n\n

<\/pre>\n\n\n\n
Prefetch<\/h4>\n\n\n\n
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.<\/p>\n\n\n\n
<\/pre>\n\n\n\n
Preload<\/h4>\n\n\n\n
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.<\/p>\n\n\n\n
<\/pre>\n\n\n\n
Preconnect<\/h4>\n\n\n\n
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.<\/p>\n\n\n\n
<\/pre>\n\n\n\n
You will find this option in the WordPress Dashboard<\/strong> -> Navigate to AMP option panel<\/strong> -> Settings<\/strong> -> Advance Settings<\/strong><\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
Scroll down a little to see this option<\/p>\n\n\n\n
DNS Priority URL(s):<\/strong> In this option, four options will be displayed as per your requirement, you need to select the Option.  <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
For eg:\u00a0<\/strong>I\u2019ve 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<\/strong>” button and then click on the”Save Changes<\/strong>” button which you can see in the below screenshot. <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
The Output of the DNS Priority URL(s) in AMP<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n
That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n
We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n\n\n\n

<\/p>\n
\n\t\t\tAsk your Questions Directly!<\/strong>
\n\t\t\t
If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t