How we maintained high technical SEO and site performance while delivering a delightful user experience for our customers using custom Lottie animations.
As a new online marketplace, we want to attract potential customers to our website. We need to engage users on our site to share our story and explain how our business can benefit them, in a clean and concise way.
Animated illustrations are a proven UX design tool for engaging users. As the old adage says “a picture is worth a thousand words”, and we chose to enhance our home page using a series of scroll animations to capture the user’s attention and highlight our services.
Web animations often come at the cost of website performance however. We needed to find a way to incorporate these animations while maintaining exceptional technical SEO and website performance across all browsers and devices. Check out our previous post all about Perfecting Technical SEO on our site.
Depending on how the animation is generated, there are a couple of reasons.
backgroundaffect this step.
filteraffect this step only.
When you introduce an animation into the rendering pipeline, you are repeating some or all of these steps, often at a rate of 60 times per second! Because of this sequential pipeline, an animation that updates the layout, for example, is more expensive for performance - it will first re-render the layout, then the paint, and then the composite. An animation that only affects the composite step however, will only have to re-render the composite of the page.
Many websites use animated GIFs. These files offer great cross-platform compatibility but often have large file sizes and cannot be easily optimized or compressed. The large file size of GIFs can increase load times which will negatively impact SEO and user experience.
CSS only animations are quick to implement and very performant as long as you use the best practices around the rendering pipeline, as explained in the previous section. They have great cross-platform support and are easy to control and update in your codebase.
The downside to CSS only animations is that they have limited capabilities. Some properties cannot be animated and more complex animations can require code solutions that are less readable and maintainable.
Another common way to incorporate web animations is by including animated GIFs. GIFs have the benefit that they are a no-code solution that can be created by a designer outside the codebase. Therefore they are simple to incorporate into your web application. GIF animations also require fewer re-renders of the page to play the animation.
While GIFs have good cross-browser compatibility they do not work well for varying screen sizes and devices. The resolution of a GIF is static and does not scale across different screen sizes without becoming pixelated. Additionally, GIFs can have a large file size that cannot be optimized or compressed, leading to a less performant page.
Lottie was hands down the best solution for our scroll animation use case. Read on to learn more about Lottie files and how we implemented them on our website.
Since Lottie files are written in JSON format, a Lottie is on average 600% smaller than a GIF. The most performant version of a Lottie animation is a dotLottie. dotLottie is a file type with the extension
.lottie which stores all the information for the Lottie animation, animation instructions and dependent assets, in one place. It archives and compresses the original Lottie animation, thus reducing storage costs by up to 80% when compared to the original Lottie animation.
Lottie animations are inherently more performant than other solutions, but that doesn’t mean you don’t have to consider optimization when building a Lottie animation. Behind the scenes, Lottie generates code from the original designs, effectively putting production code into the hands of the designers. Therefore it is important that developers AND designers on the team understand how to build a performant animation. The following should be considered:
Our largest original Lottie animation was 1.3 MB in size, after converting to a dotLottie file, the file size was only 58 KB. Integrating our dotLottie animations into our Next.js application was very simple code implementation. You can follow the steps below to get started.
Include the dotLottie player library in your application. The unpacked size is 3.14 MB.
yarn add @dotlottie/player-component // or npm i @dotlottie/player-component
Add the Lottie script JSX on the page. In our case, the animations are further down the page so we don’t need to load the script until the user scrolls to that section. Thus preventing a performance hit on the initial page load time.
<Script src='<https://unpkg.com/@email@example.com/dist/dotlottie-player.js>' />
Render the dotLottie in your JSX
<dotlottie-player src='/[file path]/[animation file name].lottie' autoplay />
It’s as simple as that to get started with the dotLottie animations. There are lots of options and customizations for the dotLottie player library as well. You can read more about those here.