Bug 197010 - Safari doesn't preconnect to origin when using rel="preconnect dns-prefetch"
Summary: Safari doesn't preconnect to origin when using rel="preconnect dns-prefetch"
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Page Loading (show other bugs)
Version: Safari Technology Preview
Hardware: Mac macOS 10.14
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2019-04-17 07:18 PDT by Andy Davies
Modified: 2021-04-30 04:09 PDT (History)
12 users (show)

See Also:

Attachments
Test page with preconnect and dns-prefetch (693 bytes, text/html)
2019-04-17 07:18 PDT, Andy Davies 		no flags Details
Test page with just preconnect resource hint (665 bytes, text/html)
2019-04-17 07:18 PDT, Andy Davies 		no flags Details
Single link element with rel=preconnect and then rel=dns-prefetch (699 bytes, text/html)
2019-04-18 13:44 PDT, Andy Davies 		no flags Details
Single link element with rel=dns-prefetch and then rel=preconnect (699 bytes, text/html)
2019-04-18 13:45 PDT, Andy Davies 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
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 
<rdar://problem/50018906>
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)

https://www.webpagetest.org/result/190418_8B_09a0743914357f1ada40740a43065085/
https://www.webpagetest.org/result/190418_XT_62b65003d8ea2a6db70a110aaa84e51f/
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?