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
Memory Spike - Enabling autoplay and infinite looping with the
vue3-lottie
component caused the browser's memory usage to spike between 700MB and 3000MB.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.
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
Stop Using vue3-lottie: Discontinue the use of
vue3-lottie
andlottie-web
due to their associated memory management issues.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! ๐๐ฉโ๐ป๐จโ๐ป