dns-prefetchとpreconnectのブラウザのサポートが違うため、同じlinkタグ内で使用するとSafariでpreconnectがキャンセルされるバグが発生します。
アンチパターン
<div class="code-block-container"><pre class="language-html"><code class="language-html">&lt;link rel="preconnect dns-prefetch" href="http://example.com"&gt;
</code></pre></div>正しい書き方
<div class="code-block-container"><pre class="language-html"><code class="language-html">&lt;link rel="preconnect" href="http://example.com"&gt;
&lt;link rel="dns-prefetch" href="http://example.com"&gt;
</code></pre></div><h2 id="%E5%8F%82%E8%80%83">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83" aria-hidden="true"></a> 参考</h2>
<a href="https://web.dev/preconnect-and-dns-prefetch/" target="_blank" rel="nofollow noopener noreferrer">Establish network connections early to improve perceived page speed</a>

dns-prefetchとpreconnectは同じlinkタグで使用しない

corewebvitals

Discussion