Lotti animations sluggish

Question

The Lottie animations have a significant impact on the loading and rendering of web pages. The resizing of the window seems to be sluggish.

I am utilizing Stimulus JS and ViewComponent for Lottie animations.

Here code

import { Controller } from "stimulus";

export default class extends Controller {
  static targets = ["container"];

  initialize() {
    this.animationPath = this.containerTarget.getAttribute("data-animation-path");
    this.animation = null;
    this.animationPlayed = false;
  }

  connect() { 
    try{
      window.addEventListener("popstate", this.handlePopstate.bind(this));
      this.loadAnimation();
   } catch (error) {
     // console.error("An error occurred in the connect method:", error);
   }
  }

  handlePopstate(event) {
    window.location.reload()
  }

  loadAnimation(){
     // Load the animation but do not play it immediately
     this.animation = bodymovin.loadAnimation({
      container: this.containerTarget,
      renderer: "svg",
      loop: false,
      autoplay: true,
      path: this.animationPath,
    });
}
} 

Here HTML code

<div id= "animContainer" 
     data-controller=" animation" 
     class="z-0 w-full"
     data-animation-path="<%= asset_url @animation_path %>" 
     attr-customer-sign-link-value="<%= customer_your_program_path %>"
     data-event-value="<%= @event %>"
     data-animation-target="container">   
</div>

class Page::HomeAnimationComponent < ViewComponent::Base
    def initialize(animation_path:)
        @animation_path = animation_path
    end
end

<%= render Page::HomeAnimationComponent.new(animation_path: "data.json") %>

Loading Animation with JSON File and JSON File Located in Assets