Bug 197010

Summary: Safari doesn't preconnect to origin when using rel="preconnect dns-prefetch"
Product: WebKit Reporter: Andy Davies <ad>
Component: Page LoadingAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: ad, ap, beidson, cdumez, dmdabbs, koivisto, nicolas, paulirish, rik, webkit-bug-importer, yoav, youennf
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Mac   
OS: macOS 10.14   
Description Flags
Test page with preconnect and dns-prefetch
Test page with just preconnect resource hint
Single link element with rel=preconnect and then rel=dns-prefetch
Single link element with rel=dns-prefetch and then rel=preconnect none

Description Andy Davies 2019-04-17 07:18:07 PDT
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
Comment 1 Andy Davies 2019-04-17 07:18:45 PDT
Created attachment 367624 [details]
Test page with just preconnect resource hint
Comment 2 Andy Davies 2019-04-17 07:32:46 PDT
Should have also mentioned that this pattern works in Chrome
Comment 3 Alexey Proskuryakov 2019-04-18 09:54:42 PDT
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"'?
Comment 4 Radar WebKit Bug Importer 2019-04-18 09:54:59 PDT
Comment 5 Andy Davies 2019-04-18 13:44:33 PDT
Created attachment 367746 [details]
Single link element with rel=preconnect and then rel=dns-prefetch
Comment 6 Andy Davies 2019-04-18 13:45:15 PDT
Created attachment 367747 [details]
Single link element with rel=dns-prefetch and then rel=preconnect
Comment 7 Andy Davies 2019-04-18 13:51:17 PDT
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)

Comment 8 dmdabbs 2019-07-26 11:58:20 PDT
Resource Hints can also be signaled by HTTP headers with multiple rel types. Is that properly supported as well?