0
224
ViewsHow can I get safari to pre-load js / css assets?
I've been trying to get Safari to start pre-loading assets while a page is loading but nothing seems to work. Chrome and Firefox seem to do it just fine though.
The setup is simple enough. A script renders the following html with a 2s pause in the middle. The first part of the response has been flushed out and streamed to the browser. This is confirmed by Firefox and Chrome's ability to start fetching the js early.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preload" href="http://localhost:8888/js.js" as="script" />
<script href="http://localhost:8888/js.js"/>
</head>
<!-- here the script rendering the HTML would actually pause
for 2s before rendering the rest of the document -->
<!-- the first part of the response has been
flushed and sent to the browser already -->
<body>
</body>
</html>Fetching the JS file also has a 2s delay added to it. This makes things easy to visualize in browser timelines.
Note that Chrome & Firefox will start loading the JS early even if no <link preload> is present. They seem to just start parsing the HTML as soon as they get a bit of it and download any js they encounter along the way.
On Firefox I get the following waterfall:
On Chrome I get about the same:
On Safari however all I ever can get is:
Which clearly shows Safari not trying to asynchronously load the script and instead waiting for the full html response to be received.
What am I missing? Does safari just not do any asset pre-loading at all?
1 answers
Answer question0
At the moment, Safari doesn’t support <link rel=preload>, which explains the waterfall you’re seeing. The good news is that Jen Simmons, one of their Web Evangelists, has asked on Twitter what developers would use it for if it existed.