Which is Better for Website Performance: Images, Videos, or Lottie?

In the fast-paced digital world, optimizing website performance is a top priority for businesses aiming to provide an exceptional user experience. When it comes to choosing the right assets for your website, such as images, videos, and Lottie animations, it's crucial to understand their impact on performance. To shed light on this matter, we conducted a small experiment on our own home website at Menta, to analyze in specific to our page what asset is consuming more performance. We duplicated the original home page three times and made specific modifications to each version:

1. Original Home Page: Represents the baseline with all assets intact (images, videos, and Lottie files).
2. Home Page with No Lottie Files: Removed all Lottie animations while keeping other elements unchanged.
3. Home Page with No Images: Eliminated all images, while videos and Lottie files remained.
4. Home Page with No Videos: Excluded all videos, while images and Lottie animations were retained.

Through performance testing using tools like GTMetrix and Google PageSpeed, we compared the results of the original website with three variations: one without Lottie animations, one without images, and one without videos.

Before diving into the experiment results, it's essential to note the size of the assets we used. Our Lottie animation weighed approximately 18KB and was utilized in the header and two sections of the website. The images employed were all less than 300KB each, while the two videos had a size below 3.5MB.

It's important to note that these results may not align with expectations. While reducing multimedia assets may seem logical to improve performance, the data from the tests does not consistently support this assumption.

In conclusion, we cannot rely solely on these performance measurement tools. The values obtained vary significantly, making it challenging to precisely determine the influence of each asset. To conduct a more accurate study, it would be necessary to use the same quantity of assets with similar file sizes for images, Lottie animations, and videos; and of course, we would need more samples.

However, as web designers and developers, it remains essential to find a balance between the quality and file size of multimedia assets. Striving to optimize their weight as much as possible will contribute to improving overall website performance.

There is no definitive answer to which asset is better for website performance. It depends on various factors such as the specific use case, the quantity and quality of assets, and how they are optimized and implemented.

Disclaimer: It's important to note that the experiment conducted on our home website is not an exhaustive academic research study. Website performance can be influenced by various factors, including hosting infrastructure, code optimization, network conditions, and the specific characteristics of the assets themselves.