title: preconnect vs dns-prefetch resource hints
body: <p><a href="https://www.w3.org/TR/resource-hints/" rel="noreferrer">https://www.w3.org/TR/resource-hints/</a></p>
  
  <p>If I understand correctly, both are used to initiate an early connection to load resources faster at a later time.</p>
  
  <p>preconnect is just doing "more".</p>
  
  <p>Apart from a better browser support, is there any reason to use dns-prefetch over preconnect? I've also seen websites using both rel at the same link tag in order to use preconnect if possible and fall back to dns-prefetch if not.</p>
  
  <pre><code>&lt;head&gt;
    &lt;link
      rel="dns-prefetch preconnect"
      href="https://fonts.gstatic.com"
      crossorigin
    &gt;
  &lt;/head&gt;
  </code></pre>