Rive.wasm blocking website load

I am currently developing a Gatsby website that uses a few Rive animations with the help of rive-react.

In development it works great, however whenever building my website the loading speeds for the first paint get very slow.

I noticed that a 3rd party request to get rive.wasm is what is blocking my website. I am attaching some screenshots below.

Do you have any advice how I can make the request faster? Is it possible to host the rive.wasm file e.g. on my own server?

Any help is appreciated!

Here is the request summary, which shows it took 93ms to get the rive file:

These are the request details:

[zplata]

Actually, you might be able to host the WASM file on your own server and be able to serve this up!

import Rive, { RuntimeLoader } from "@rive-app/react-canvas";

RuntimeLoader.setWasmUrl("http://your-own-server.com/rive.wasm");

function App() {
  return (
    <div>
      <Rive src="https://cdn.rive.app/animations/vehicles.riv" />
    </div>
  );
}

We can work on making the URL you’d like to set as a param you pass into <Rive> or useRive() but you could do this in the meantime, and then it shouldn’t try to request the wasm from unpkg by default.

To download the correlated WASM file for your server, check out the dependency version of @rive-app/canvas in the tagged version of @rive-app/react-canvas you’re consuming. For example, 1.0.71: https://github.com/rive-app/rive-react/blob/v3.0.15/package.json#L32

The correlated WASM file should be the following URL with the version identified above:

https://unpkg.com/@rive-app/canvas@1.0.71/rive.wasm

@carolinmaisenbacher @3lonious

[carolinmaisenbacher]

Thank you for your detailed reply @zplata! Your solution of setting the wasm url with setWasmUrl worked flawlessly for me.