Bug 197010

Summary:

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

Product:

WebKit

Reporter:

Andy Davies <ad>

Component:

Page Loading

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

ad, ap, beidson, cdumez, dmdabbs, koivisto, nicolas, paulirish, rik, webkit-bug-importer, yoav, youennf

Priority:

Keywords:

InRadar

Version:

Safari Technology Preview

Hardware:

Mac

OS:

macOS 10.14

Attachments:

Description	Flags
Test page with preconnect and dns-prefetch	none
Test page with just preconnect resource hint	none
Single link element with rel=preconnect and then rel=dns-prefetch	none
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

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