I'm trying to optimise the speed of some web page that loads some JSON data using XMLHttpRequest from the same origin. I have added the Link HTTP header to the response of the web page, like this:
Link: </api/endpoint>; rel=preload; as=fetch; crossorigin
This works fine in Chrome. I see that the API endpoint is requested once (due to the preload instruction), and then used for the XMLHttpRequest.
However, in Safari it does not work. I see that the API endpoint is requested twice (once due to the preload instruction, and once more for the XMLHttpRequest). Also, a warning shows up in the console:
[Warning] The resource https://my-origin.com/api/endpoint was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.
I have tried several variants of the Link headers (without crossorigin and with crossorigin=use-credentials). I also tried setting withCredentials=true on the XHR object. None of those combinations gave a different result.
I read some other question/answer, where it was explained that preloading fetch requests is possible by using mode: "no-cors". However, it is not possible to set that mode for XMLHttpRequest.
Is it possible to preload XMLHttpRequests (from the same origin) in Safari?