Content heavy sites for low bandwidth networks

Design help General
1

Hey everyone,

Hope you’re all well! I have a quick technical question I’d love your input on.

We’re currently building a website for a client, and one of the key elements on several pages is a fairly heavy Lottie file (a 3D animation), which weighs in at around 20MB. Our main concern is performance — particularly for users on low-bandwidth networks or in regions with more restricted internet access, such as China. In these cases, the file may not load at all, potentially breaking the experience entirely.

One idea we’ve had is to implement a pre-loader that monitors the full page load. If it doesn’t complete within, say, 10 seconds, we could display a fallback link to a simplified, low-bandwidth version of the page.

Does anyone have other suggestions or best practices for handling this kind of situation? Optimisation tips, smart loading strategies, or even alternatives to Lottie for this use case?

Thanks so much in advance!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hey Eugene, just some general ideas for you.

If you add the Lottie player script directly instead of Webflow’s built-in one, you’ll have more access to the Lottie player. In that case, you can add load and error events to detect when it’s loaded completely. I haven’t looked at the docs recently but GPT points to this setup;

<lottie-player 
  id="lottieAnimation" 
  src="https://assets7.lottiefiles.com/packages/lf20_ooazmlcr.json" 
  background="transparent" 
  speed="1" 
  style="width: 300px; height: 300px;" 
  loop 
  autoplay>
</lottie-player>

<script>
  const lottiePlayer = document.getElementById('lottieAnimation');

  lottiePlayer.addEventListener('load', () => {
    console.log('Lottie animation has been fully loaded');
  });

  lottiePlayer.addEventListener('error', () => {
    console.log('Failed to load Lottie animation');
  });
</script>

Depending on the animation needs, you might be able to switch to a streaming vdeo format or even better an animated AVIF which have obscene compression rates, and fully support transparency.

I regularly do MPG → animated AVIF conversions. I’m not sure what would be involved converting a Lottie, you might have to go to After Effects + Bodymovin and export to a different format which can be converted.

In that situation, you just use an <img> element which can also have a load event attached.

I’d check carefully though, Chinese browsers like QQ have been pretty archaic in my experience. Standard features like grids have even been a problem, so double-check on AVIF support, etc.