Created attachment 367623 [details]
Test page with preconnect and dns-prefetch
Safari doesn't preconnect to an origin if both the preconnect and dns-prefetch hints are included in the same rel attribute e.g.
<link rel="preconnect dns-prefetch" href="https://www.wikipedia.org/">
I've used this pattern in the past as a graceful degradation for browsers that didn't support preconnect
Tests both using WebPageTest and Safari Inspector using the two attached pages - when the preconnect is successfully made a message appears in the Inspector Console
Work around is to specify the resource hints separately
Created attachment 367624 [details]
Test page with just preconnect resource hint
Should have also mentioned that this pattern works in Chrome
Looking at the code, it looks like we don't support multiple values in "rel" at all.
We do seem to support multiple rel attributes though. Andy, can you try 'rel="preconnect" rel="dns-prefetch"'?
Created attachment 367746 [details]
Single link element with rel=preconnect and then rel=dns-prefetch
Created attachment 367747 [details]
Single link element with rel=dns-prefetch and then rel=preconnect
Two new test pages attached where the link element has multiple rel attributes
<link rel="dns-prefetch" rel="preconnect" href="https://www.wikipedia.org/">
<link rel="preconnect" rel="dns-prefetch" href="https://www.wikipedia.org/">
In the case where the preconnect rel attribute comes first then Safari preconnects - get message in the console to indicate it, and the WebPageTest waterfall is missing the connection setup (which is normal for Safari when it preconnects)
dns-prefetch then preconnect - https://www.webpagetest.org/result/190418_WQ_58c2423b8532c6e12e73677b22a2cffe/
preconnect then dns-prefetch https://www.webpagetest.org/result/190418_15_a09ce74e9616ee5555cc5faaba33cb3c/
For comparison Chrome preconnects in both test cases (preconnect in Firefox appears broken ATM)
Resource Hints can also be signaled by HTTP headers with multiple rel types. Is that properly supported as well?