<link rel="preload"> doesn't work on Cloudflare Pages

My site

loads a file called main.js which makes a request for two WASM files. Instead of having to wait to download and parse the JS and then downloading the WASM, I added this line to my HTML’s <head> so that the three files would be downloaded at the same time:

    <link rel="preload" href="/tree-sitter.wasm" type="application/wasm" as="fetch" crossorigin>
    <link rel="preload" href="/tree-sitter-bash.wasm" type="application/wasm" as="fetch" crossorigin>

This works on my local machine the way you’d expect which you can try like this

git clone https://github.com/curlconverter/curlconverter.github.io.git
cd curlconverter.github.io
npm install
npm start

and it worked while the site was hosted on GitHub Pages (i.e. Fastly CDN). As you can see in the waterfall, the two wasm files are downloaded at the same time as the JS and when the JS asks for them they aren’t re-downloaded

However, on my live Cloudflare Pages website, this is not the case, the two wasm files are downloaded once at the same time as the JS file, but then downloaded a second time after they are requested by the JS code:

What gives?

I came across this thread which seems to say that prefetching is an enterprise feature, though I have no idea if this is the same thing I’m doing? This is a free open source project, so I’m obviously not going to pay for this.

This is a different feature. If you implement your preloads yourself, Cloudflare will 100% support them :slight_smile:

I guess that is related to your specific setup. Maybe there is a slight difference between each of the configs, which you use for GitHub Pages and Cloudflare Pages.

To solve your problem please have a look at the “Console” in your “Developers Console”, where you will find this:

The files could not be preloaded, thats why the preload did not work.
Changing crossorigin to crossOrigin="anonymous" in the preload links should do the trick, I guess. But did not test myself.

You can have a look HERE for what to use when.

3 Likes

@M4rt1n thank you for the reply, I didn’t check the console. MDN says that setting crossorigin without a value is the same as setting crossorigin="anonymous"

I just tried deploying with crossorigin="use-credentials" and I still see the same warnings in my console as in your screenshot. I will try setting crossorigin="anonymous" explicitly.

Sorry I quickly checked again and saw, that the first two messages actually are triggered within the
tree-sitter.js file. The error must be in there.

Leaving it at “crossorigin” should be fine.

2 Likes

Seems like that file is doing

fetch('https://curlconverter.com/tree-sitter.wasm', {credentials: "same-origin"})

Seems like if I have crossorigin="use-credentials" and I do

fetch('https://curlconverter.com/tree-sitter.wasm', {credentials: "include"})

I get a slightly different error

A preload for 'https://curlconverter.com/tree-sitter.wasm' is found, but is not used because the request mode does not match. Consider taking a look at crossorigin attribute.

And I bet if I do crossorigin="anonymous" and

fetch('https://curlconverter.com/tree-sitter.wasm', {credentials: "omit"})

it might work?

I don’t really have any control over that file, it’s a dependency and I don’t know enough about what this all means to make a concrete feature request.

Should, but I actually am not a pro when it comes to javascript based preloads etc.

That’s a pitty, but it at least is not related to Cloudflare itself. But I wonder why this does not happen on GitHub Pages. Do you have a live-page there aswell, so I can inspect it?

@M4rt1n I moved the site back to GitHub Pages so feel free to check it out.

I moved back because of this issue and because GitHub Actions lets us deploy the latest commit in our main repo on GitHub to the website instead of just the latest release on npm, because it can compile WASM in Docker. I got a 3x or 2x speed up in load time:

Cloudflare Pages:

GitHub Pages (Fastly):

I understand that in your particular case, it makes more sense to use GH Pages.
But about the speed:

These two images are bad to compare, because the one for Cloudflare, was a cold load (DNS, SSL etc was all not done) and on GH Pages, it was a warm connection.
But on the other hand, some connections have been faster on GH Pages, some on Cloudflare.
And the one on Cloudflare loads more resources than the one on GH Pages, but due to Cloudflare’s compression etc it even with more ressources is smaller (in download sice).

If you figure out what with your .wasm file is weird, I would recommend you switching back to Cloudflare, but if you don’t have the time I understand not doing so.

Soon Pages Build v2 will be released, I would recommend you checking back then, things improve quickly here.

Thanks for the update!

1 Like