High CPU load

[nauorama]

Overview

Hello. I was trying to implement animations on a site and noticed that dotlottie-web causes a huge CPU load. You can check it here: https://codepen.io/nauorama/full/LYvJOrZ. This doesn't happen with the @dotlottie/player-component library using the same animations. Can you help, please?

[hermet]

@nauorama Hello, the burden must be shifted from the GPU to the CPU by a software raster engine (ThorVG). Are you experiencing any actual performance issues?

[nauorama]

@hermet Yes, I'm experiencing performance issues on the site. The animations, other than Lottie, and the SplideJS slider are twitching. Overall, the site does not feel smooth.

[hermet]

@theashraf Please double-check first if there are areas to improve in dotLottie side, and let us know if it needs thorvg help, thanks.

[theashraf]

@nauorama here are some tips that could improve performance a bit

Consider disabling frame interpolation:

new DotLottie({
  canvas: canvas,
  src: src,
  loop: true,
  autoplay: true,
  useFrameInterpolation: false,
});

Adjusting the devicePixelRatio can also help improve performance:

new DotLottie({
  canvas: canvas,
  src: src,
  loop: true,
  autoplay: true,
  useFrameInterpolation: false,
  renderConfig: {
    devicePixelRatio: 1 // Lower values improve performance but may reduce animation quality
  }
});

You can experiment with different values for renderConfig devicePixelRatio. By default, it uses window.devicePixelRatio

[nauorama]

@theashraf I tried useFrameInterpolation and devicePixelRatio setting. The CPU load is a little bit better, but still very high.

[theashraf]

@nauorama I'm investigating whether there are any additional optimizations we can introduce

[theashraf]

@nauorama One final optimization we could introduce is offloading the rendering to a web worker. I've created an example to show how you can run dotLottie in a web worker. You might want to consider it. Let me know if you encounter any issues.

https://codepen.io/lottiefiles/pen/KKYxOJd

[nauorama]

@theashraf thank you, I will try it

[lyorb]

I have the same problem with the @lottiefiles/dotlottie-react package, my CPU usage goes up to 100% and stays in the 90% range when switching to different pages where the animations are, by refreshing the page my CPU usage goes back to 1%.

[theashraf]

I think it's a good idea to share the ThorVG team performance benchmarking results between dotlottie-web (ThorVG) and lottie-web here. So far, dotlottie-web has shown better results in terms of memory consumption and FPS. You can check it out at https://thorvg-perf-test.vercel.app/.

@lyorb The performance depends on many factors such as devicePixelRatio, canvas size, animation features utilized, etc. There are some micro-optimizations that can be applied to dotlottie-react:

1. Disable frame interpolation by passing the useFrameInterpolation prop as false to the DotLottieReact component.
2. Hardcode the devicePixelRatio to 1 by passing a prop called renderConfig, which is an object that takes the devicePixelRatio. You can set the devicePixelRatio to 1 and check if the animation quality is suitable for your application.

We're currently working on worker support for dotlottie-web and its wrappers. You can track the progress here: https://github.com/LottieFiles/dotlottie-web/issues/203

[theashraf]

@nauorama @lyorb We've added web worker support to DotLottie. You might want to check out the documentation for more information. This should free the main thread from the heavy rendering work done by DotLottie.

https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-web/worker

Please let me know your feedback. Thanks!