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