How to reduce the CPU load when using animation on the site?

D

Dmitry Medvedkin2020-12-04 09:09:53

Frontend

Dmitry Medvedkin, 2020-12-04 09:09:53

The site has an animation, it is made in AE and converted by the bodymovin plugin into a json file (+ folder with png). I connected it to the site according to the tutorial, I’m not strong at all in JS, I open it and see the CPU load of 50-70%. The json file weighs 800 kb!, I don’t understand who is to blame, maybe I didn’t connect it correctly and use this script? I posted an example on my hosting. animate.d58147.hostru06.fornex.host

<body>
    <div class="wrapper">
        <div id="animate" class="animate"></div>
    </div>

    <script src="js/bodymovin.js"></script>
    <script src="js/main.js"></script>
</body>

bodymovin.loadAnimation({
  container: document.getElementById('animate'),
  render: 'svg',
  loop: true,
  autoplay: true,
  path: 'js/virtualization.json'
});