Solving Memory Issues with Lottie SVG Animations

Introduction

Integrating Lottie SVG animations can significantly enhance the visual appeal of a website. However, the process can sometimes introduce performance issues, particularly with excessive memory usage.

This post details my experience with integrating Lottie animations using the vue3-lottie package in a Vue 3 application and the subsequent challenges I faced. I will also outline the solution that resolved these issues, ensuring smoother performance and better resource management.

The Problem

While incorporating multiple SVG animations via the vue3-lottie package, I noticed a severe performance degradation. The system memory usage would spike dramatically, causing the site to slow down and become unresponsive.

Detailed Observations

1. Memory Spike - Enabling autoplay and infinite looping with the vue3-lottie component caused the browser's memory usage to spike between 700MB and 3000MB.
2. Memory Leak Suspicions - Even after attempting to manage the lifecycle of the components by destroying them appropriately, the memory usage remained excessively high, indicating a potential memory leak.
3. Inconsistent Memory Recycling - The browser's memory recycling mechanism failed to effectively manage the memory usage, maintaining it at a high level even after the animations stopped.

Investigative Findings

Upon thorough investigation, I discovered that the root cause lay within the vue3-lottie package itself. Specifically, using the package for SVG rendering with looping and autoplay enabled caused continuous memory consumption growth, eventually leading to a performance bottleneck.

Memory Usage Analysis

• Initial Load - Memory usage starts at around 200MB.
• After 10-30 Seconds - Memory usage increases to between 700MB and 1800MB.
• Memory Recycling - Ineffective, maintaining around 600MB even after it triggers.

The Solution

The solution was to switch from using the vue3-lottie package to directly importing the Lottie player script. This approach dramatically reduced the memory footprint and stabilized performance.

Implementation Steps

1. Stop Using vue3-lottie: Discontinue the use of vue3-lottie and lottie-web due to their associated memory management issues.
2. Import Lottie Player Script: You can import online and download from Lottie player js and use the script tag to import lottie-player.js from LottieFiles.

Code Example
Below is the code implementation that resolved the memory issues:

Old Implementation with vue3-lottie package

<template>
  <vue3-lottie
    :options="defaultOptions"
    :height="400"
    :width="400"
    autoplay
    loop
  />
</template>

<script setup>
import { reactive } from 'vue';
import vue3Lottie from 'vue3-lottie';
import animationData from '@/assets/animation.json';

const defaultOptions = reactive({
  animationData,
});
</script>

New Implementation with importing lottie-player.js

You can maintain the file like below 👇

<template>
  <lottie-player
    ref="heroLottie"
    :src="lottieHeroSectionData"
    speed="1"
    direction="1"
    mode="normal"
    loop
    autoplay/>
</template>

<script setup>
    import {lottieHeroSectionData} from "@frontendApp/views/agent/landing/pages/homepage/lottie";
    import {onBeforeMount} from "vue";
    import "@frontendApp/views/agent/landing/assets/js/lottie-player.js"

    const heroLottie = ref(null);

    onBeforeMount(() => {
        if (heroLottie.value) {
            heroLottie.value.destroy()
        }
    })
</script>

Benefits Observed

• Reduced Initial Memory Usage: Around 100MB after page load.
• Effective Memory Recycling: Memory usage stabilized at approximately 200-400MB after recycling.
• Elimination of Lag: The site became responsive and stable, eliminating the lag and crashes.

Conclusion

Incorporating Lottie SVG animations can significantly enhance user experience, but it's crucial to monitor and manage the performance implications. Switching from the vue3-lottie package to directly importing the Lottie player script proved to be an effective solution to address memory leaks and performance issues. This approach ensures smoother animations and a more responsive website, saving both time and resources. If you encounter similar issues, consider using the Lottie player script for a more efficient and reliable implementation.

Feel free to share your thoughts and opinions and leave me a comment if you have any problems or questions. 😎😎

Till then, Keep on Hacking, Cheers

Happy coding! 🚀👩‍💻👨‍💻