Bug 197010 – Safari doesn't preconnect to origin when using rel="preconnect dns-prefetch"

• Status: NEW
• Component: Page Loading

[Andy Davies]

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

[Andy Davies]

Created attachment 367624 [details]
Test page with just preconnect resource hint

[Andy Davies]

Should have also mentioned that this pattern works in Chrome

[Alexey Proskuryakov]

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"'?

[Radar WebKit Bug Importer]

<rdar://problem/50018906>

[Andy Davies]

Created attachment 367746 [details]
Single link element with rel=preconnect and then rel=dns-prefetch

[Andy Davies]

Created attachment 367747 [details]
Single link element with rel=dns-prefetch and then rel=preconnect

[Andy Davies]

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)

https://www.webpagetest.org/result/190418_8B_09a0743914357f1ada40740a43065085/
https://www.webpagetest.org/result/190418_XT_62b65003d8ea2a6db70a110aaa84e51f/

Resource Hints can also be signaled by HTTP headers with multiple rel types. Is that properly supported as well?