I am trying to use a preconnect link (or a dns-prefetch link) to get Chrome to perform DNS resolution and ideally open the connection to the remote server. From the network timeline this does not seem to be working. I did confirm this works on Safari. Are there some Chrome specific restrictions on this? Here is the minimal page that gives an issue:
<!DOCTYPE html>
<html>
<head>
<link rel="dns-prefetch" href="https://www.googletagmanager.com" />
<link rel="preconnect" href="https://www.googletagmanager.com" />
</head>
<body>
<script type="text/javascript">
setTimeout(() => {
var myScript = document.createElement("script");
myScript.setAttribute(
"src",
"https://www.googletagmanager.com/gtag/js?id=G-XXXXX"
);
myScript.setAttribute("async", "");
document.head.appendChild(myScript);
}, 1000);
</script>
</body>
</html>
I am simulating the delayed injection or delayed running of a script tag using a setTimeout.
On Chrome (in Private mode; fresh window), you can see the time spent in the "DNS Lookup", "Initial Connection" and "SSL":
and on Safari:
