Drop Calendly preconnect down to dns-prefetch

I was wrong in 650efab. It turns out
that the reason Chrome isn’t reusing the TCP/TLS from the `preconnect`
had nothing to do with CORS, but is down to the fact that requests made
with `Sec-Fetch-Mode: navigate` (e.g. `iframe`s) are placed into
a separate connection pool[1], meaning only their DNS can be reused.
A `preconnect` is actually quite wasteful in this scenario, and using
a humble `dns-prefetch` is the only way to get any real gains.

1. chromium.org/developers/design-documents/network-stack/preconnect

Author: csswizardry

contact.md

@@ -16,7 +16,16 @@ Or book a free call:
 <noscript><a href="https://calendly.com/csswizardry/30min" class="btn  btn--full">Book a Free Call</a></noscript>
 
 <div class="calendly-inline-widget" data-url="https://calendly.com/csswizardry/30min?background_color=f9f9f9&text_color=333333&primary_color=f43059" style="min-width:320px;height:700px;margin-bottom:1.5rem;"></div>
-<script src="https://assets.calendly.com/assets/external/widget.js" async fetchpriority=high></script>
+<script src="https://assets.calendly.com/assets/external/widget.js" async fetchpriority="high"></script>
+
+<!--
+  - Warm up the DNS for the resulting Calendly embed.
+  -
+  - It looks like Chrome puts `navigate` requests into a different connection
+  - pool, meaning the TCP/TLS phase from a `preconnect` cannot be reused. This
+  - means that `dns-prefetch` is actually going to be overall faster than
+  - a wasteful `preconnect`.
+  -->
 <link rel="dns-prefetch" href="https://calendly.com">
 
 - - -

performance-audits.md

@@ -140,5 +140,14 @@ triage the extent of performance issues with your site.
 <noscript><a href="https://calendly.com/csswizardry/ten-minute-teardown" class="btn  btn--full">Book your <i>Fix It Fast!</i></a></noscript>
 
 <div class="calendly-inline-widget" data-url="https://calendly.com/csswizardry/fix-it-fast?background_color=f9f9f9&text_color=333333&primary_color=f43059" style="min-width:320px;height:700px;margin-bottom:1.5rem;"></div>
-<script src="https://assets.calendly.com/assets/external/widget.js" defer fetchpriority=high></script>
+<script src="https://assets.calendly.com/assets/external/widget.js" defer fetchpriority="high"></script>
+
+<!--
+  - Warm up the DNS for the resulting Calendly embed.
+  -
+  - It looks like Chrome puts `navigate` requests into a different connection
+  - pool, meaning the TCP/TLS phase from a `preconnect` cannot be reused. This
+  - means that `dns-prefetch` is actually going to be overall faster than
+  - a wasteful `preconnect`.
+  -->
 <link rel="dns-prefetch" href="https://calendly.com">