Lottie’s promise is small, crisp, fast animations.

The reality, if you are not careful, is a 600KB JSON brick that makes your mobile users hate you.

The good news: Lottie bloat almost always comes from the same handful of mistakes. Fix those, and your exports stay lean.

1) Keep images out of your Lottie

This is the biggest file-size killer.

After Effects will happily pull in PNGs or JPGs, and when you export, those images can get base64-encoded into the JSON.

One 400×400 PNG can add 200KB to a file that would otherwise be 15KB.

If you need anything photographic, ship it as a normal image in your product and layer the Lottie on top of it (or behind it). Keep the Lottie itself pure vector.

2) Simplify your paths

Overly complex vector shapes explode your JSON.

A shape can look “simple” on screen and still contain hundreds of anchor points because it was traced from a bitmap or drawn with a rough pen tool.

Before you animate, simplify every shape in Illustrator.

• Reduce anchor points to the minimum that preserves the silhouette.

• Clean shapes animate better too. Fewer points usually means smoother morphs.

3) Do not default to 60fps

60fps looks great, but most UI motion does not need it.

Dropping from 60fps to 30fps roughly halves the keyframe data in your export.

For simple loops (spinners, pulsing dots, idle motion), 24fps is often plenty.

4) Merge layers that never need to separate

Every extra layer is more data.

If two elements always move together, they do not need to be separate layers.

Pre-compose them, clean up your layer stack, and export from a comp that is actually tidy.

It is boring work, but it shows up directly in the file size.

5) Run an optimizer (every time)

LottieFiles has a free optimizer that removes junk metadata, rounds overly-precise values, and strips unused properties.

In practice, it often cuts 20–40% with no visible change.

We run every file through it before delivery.

6) Trim the comp

This is a sneaky one.

People export comps that start two seconds before anything moves, or end a second after the last keyframe.

Those “blank” frames still add data.

Before exporting, set your work area to the first and last frame of motion.

What this looks like in practice

On a recent project, the first export came out at 380KB. Already a warning sign.

After:

• simplifying paths,

• dropping from 60fps to 30fps,

• pre-composing a few redundant layers,

• and running the optimizer,

…the final file was 44KB.

Same animation. Honestly, it moved better, because the simplified paths were cleaner.

No magic. Just discipline at every step.