Preconnect to Required Origins in WordPress
Preconnect to required origins is a PageSpeed recommendation that you may see if your site loads files from external domains. It can be satisfied by adding either preconnect
or dns-prefetch
directives to your page.
preconnect
and dns-prefetch
are types of “resource hints” which are used to try and speed up the loading of files hosted on 3rd party domains.
Resource hints are small pieces of HTML that are added to the page, to communicate to the browser to start specific tasks as soon as possible.
This is what resource hints look like in the HTML of a page:
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link href='https://fonts.gstatic.com' crossorigin rel='preconnect' />
Code language: HTML, XML (xml)
Don’t get this confused with preload
, another type of resource hint, which is used for specific files.
In this article I’ll explain the difference between preconnect and prefetch, which you should use, and how to add these to your site.