When a resource on a page is loaded later by a JavaScript script or CSS style, the browser cannot anticipate the necessary connection to the site (origin) and wastes time connecting to it when it has to load it instead. A preconnection is an instruction that informs the browser that this connection will be needed later, allowing it to prepare for it.
It is useful to specify these different later connections so that the browser anticipates them and improves the loading of the relevant resources when the time comes. Pre-connections therefore improve the page loading time.
Establish early connections with important external sources. To tell the browser which pre-connection to make, it is necessary to add the code at the <head> section of the HTML code.
Example for the subsequent loading of the resource "https://exemple.com/script.js" :
<link rel="preconnect" href="https://exemple.com">