High-Performing Lottie animations on the Web

1. Home
2. Insights
3. High-Performing Lottie animations on the...

Best Practices for the technical Implementation of high-performing Animations on the Web

Deploying high-performance web animations can be challenging with increasing website performance benchmarks and requirements. To ensure that these animations run fast and smooth on both, desktop and mobile devices, while maintaining a great page speed, is not an easy task. Page speed is particularly relevant as it heavily influences search engine rankings.

Lottie (Github) is a technology originally developed by AirBnB that brings everything needed to iOS, Android, React Native, and the Web (HTML) to easily render animations created by Adobe After Effects.

Although the tutorials provided by AirBnB (or LottieFiles) all sound very simple at first, challenges are in the details, especially when the ambition is to produce fast-loading, powerful, and smooth-looking animations.

The impact of Lottie animations on website performance

The integration of Lottie animations on the web entails several performance-relevant factors, which should be considered and addressed in the best possible way.

The file size of the animation files (Lottie JSON)

The most decisive factor is certainly the file size of the actual Lottie animation, which usually has to be loaded from the server when the page is called up by the browser. The difficulty here is that, especially when animations are in the visible area of the website, asynchronous (downstream) loading is not an option, as the user only sees the animation with a time delay.

The influence of Lottie animations on the DOM of the website

When animations are rendered on the website using Lottie, hundreds to sometimes thousands of new DOM elements are created in the process, which place a significant load on the browser and all downstream processes.

Google’s PageSpeed Insights also criticizes an excessive use of DOM elements.

Best practices for reducing the file size of Lottie-Files

Below are some useful tips that will help further optimize Lottie animations and reduce file size (a bit):

• Nesting & Flattening of Layers
• Put scaling (or other effects, which will be translated into CSS) to the highest layers
• Re-use elements (if needed, avoid duplication)

With the above measures, though, despite exhausting optimization of the animations, usually only 5 to 15% of the file size of Lottie animations can be reduced. The result is still slow loading animations and negative results in Google PageSpeed Insights (e.g. high JavaScript execution time or excessive use of DOM elements).

Now before directly relying on offered paid solutions like LottieFiles (to optimize or reduce the existing Lottie animation files), we recommend switching from Lottie JSON files to the modern dotLottie format.

dotLottie comes to the rescue with smooth and high-performing Animations

Our developers were fascinated when using dotLottie for the first time about how easy the transition from lottie-web to dotlottie-web is. All animation files were reduced by up to 90% (!) of their file size with the help of the free dotLottie converter.

By switching our standard Lottie JSON formats to the optimized and compressed DotLottie formats (with the .lottie file extension instead of .json), we were able to significantly optimize loading times and overall user experience on our most critical landing-pages.

Compatibility of dotLottie with other libraries

It is also worth mentioning that dotLottie has sufficient compatibility with other Lottie libraries and can, for example, be used without any problems with the useful interaction library (Lottie-Interactivity) to realize smooth animations based on the users scroll-activity.