Lottie file loading slower than other elements making the site glitch

Lottie in Web
1

Hi guys. My name is Sergey and i’ve made a website www.atixuniverse.com with a lot of lottie animations. The thing is when i put a full width lottie animation on the top, it loads slower that other site elements, making this other elements stick on top and when lottie finally loaded make this elements move to their place which makes a glitch. I use website builder Elementor with wordpress. Do you know how to fix it ? May be a way to give all elements their loading stack number or something.
Just look at the site and you will see the issue.

2

Your issue likely stems from how Elementor and WordPress handle rendering and loading of Lottie animations. The glitch you’re experiencing happens because the animation takes longer to load, causing the layout to shift once it’s ready. This is known as Cumulative Layout Shift (CLS), and it can be addressed with a few strategies. Here’s how you can fix it:

  1. Reserve Space for the Lottie Animation
    Ensure that the space where the Lottie animation will load is reserved in advance. This avoids layout shifts.
    To do this:
    Add a fixed height and width to the container of the Lottie animation via Elementor or custom CSS.
    Example CSS:
    css
    Copy code
    .lottie-container {
    width: 100%;
    height: 500px; /* or the expected height of the animation */
    }
    This will prevent other elements from “jumping” into the Lottie animation’s space.
  2. Lazy Loading Optimization
    Elementor supports lazy loading, but Lottie files might not work seamlessly with default lazy-loading settings.
    Use a plugin like WP Rocket or Perfmatters to control the loading priority of Lottie animations.
    Ensure that the Lottie animations are preloaded or assigned a high loading priority using a script like:
    html
    Copy code
3. Load Lottie Animations Asynchronously Use a Lottie library that supports asynchronous loading or defer the Lottie animation initialization script. Add this code to your functions.php file or a custom plugin to defer Lottie scripts: php Copy code function defer_lottie_scripts($tag, $handle) { if ('lottie-script-handle' !== $handle) { return $tag; } return str_replace(' src', ' defer="defer" src', $tag); } add_filter('script_loader_tag', 'defer_lottie_scripts', 10, 2); Replace lottie-script-handle with the actual script handle used by your animation library. 4. Optimize Lottie File Size Compress your Lottie files using tools like LottieFiles Compressor. Smaller files load faster, reducing the delay and improving user experience. 5. Use Elementor’s Custom CSS or JavaScript Features In Elementor, you can use the Custom CSS option (Pro version) to add CSS for the animation container. Alternatively, add a script in the Custom JavaScript section to ensure that the Lottie animation loads in the correct order.
3

Hello Katty. Nothing works.

1 Method : I’ve added the code to the container css and also for lottie file css
.lottie-container {
width: 100%;
height: 500px; /* or the expected height of the animation */
}

and it is not solving an issue, as you could see on video

2 Method. I’ve installed WP Rocket, but can’t figure out what to add to where ?

3 Method. What do you mean by saying Use a Lottie library ? Where this library is and how to use it ?

here is the site www.atixUniverse.com
on every page there is a lottie file on the top, and on every page the content on the bottom of the lottie file jumps to the top and only when lottie file is loading it jumps back in to place

here is the video, of me trying to fix the issue 2024-11-28_19-42-53

4

Thanks for sharing detailed info.

5

I solve it. All i needed to do is to set Container Min Height Value. Thank you for a help anyway