Hi,
Just wanted to post about a question i have a bout page loaders can some one share what is best practice to use for this regarding loading speed. would rive/lottie be good way to animate this or is native webflow a better option.
Using Lottie animations can be a great choice for smooth, lightweight animations. They tend to load faster than heavier graphics. However, if you’re looking for something simpler, native Webflow options can work well too. It depends on your design goals.
Hi @Jon_Kuijs
Great question! When it comes to page loaders, you want to strike a balance between visual appeal and performance. Here’s a breakdown of the best practices for implementing pre-loaders:
Keep It Lightweight:
The key to a good pre-loader is ensuring it doesn’t add significant load time to your page. For speed optimization, avoid using large files like Lottie animations if they are complex, as they can sometimes introduce a performance hit, especially on mobile.
Best Practice: Use simple, lightweight animations. Native Webflow interactions are often the best way to go for speed, as they don’t require additional third-party libraries. Simple fade-ins, scaling effects, or progress bars are highly effective.
Consider Using Lottie Animations (If Simple):
Lottie can be a great option if you want more complex animations, but keep it simple. A lightweight Lottie animation can enhance the experience without slowing down the load time too much, but avoid overloading the loader with large files.
Optimize Page Speed First:
It’s essential that pre-loaders don’t compromise performance. A fast-loading site is more important than a flashy animation. Before implementing any loader, make sure you’ve optimized your site’s speed.
Alternative, To ensure your site is optimized for speed even with a pre-loader, I recommend trying Website Speedy, a Webflow app available in the Webflow Marketplace. It automates key optimizations like image compression, JS/CSS minification, and lazy loading, which can improve overall page speed and keep the user experience smooth while loading animations are active.
Check it out here: Website Speedy & Webflow Integration - Webflow Apps
(Disclaimer: We are the developer of this tool and are happy to answer any questions you may have.)