Guide · Updated October 2026

Lottie performance on Android, iOS, React Native and the web

Slow Lottie animations have two separate causes: loading (the file is big, so it takes long to download and parse) and rendering (the animation is expensive to draw every frame, so it stutters or drains battery). Fix them separately.

1. Loading: make the file small

• Embedded images are the usual reason a Lottie is megabytes. Replace them with vectors, export them at display size, or convert them to WebP.
• Round numbers and strip editor metadata. Layer names and 10-decimal coordinates are not needed to play the animation.
• Ship compressed. Use dotLottie where your player supports it, or serve JSON with gzip/Brotli. See Lottie JSON vs dotLottie.

The TinyLottie compressor does the first two in your browser and shows you a side-by-side preview, and the file size guide explains how to find what is bloating your file.

2. Rendering: what makes a frame expensive

A small file can still be slow to draw. The usual suspects, roughly from most to least costly:

• Masks and track mattes. Most players render them with extra offscreen passes. Use them sparingly, and avoid animating large masked areas.
• Effects such as blurs, drop shadows and glows. Support varies by player and they are expensive where supported; bake them into shapes or images when you can.
• Large dimensions. A 2000×2000 composition shown at 200×200 still does work at a much higher resolution in some players. Size the composition close to how it is displayed.
• Many layers and points. Delete hidden layers, merge shapes, and simplify paths with lots of vertices.
• Large images decoded every frame or scaled on the fly.
• Expressions. They are evaluated at runtime on the web and are not supported by many native players. Bake keyframes instead.

3. Web

• Don't block first paint. Load the player library and the animation lazily, and only for animations that are on screen.
• Pause what is not visible. Use an IntersectionObserver to play animations when they scroll into view and pause them when they leave.
• Try another renderer. In lottie-web, SVG is the default; the canvas renderer can be faster for animations with many elements. The dotLottie web player renders to canvas.
• Avoid dozens of simultaneous players on one page, for example an animated icon in every list row.
• Respect reduced motion. Show a static frame when prefers-reduced-motion is set.

4. Android

• Reuse compositions. Load an animation once and reuse it instead of parsing the same file repeatedly; Lottie's composition cache helps when you load by the same key.
• Test render modes. Hardware vs software rendering performs differently depending on the animation and device; measure both on a low-end phone.
• Watch masks, mattes and merge paths — they are the most common causes of dropped frames.
• Profile on a real, older device. Emulators and flagship phones hide problems.

5. iOS

• Know your rendering engine. Recent lottie-ios versions can render with Core Animation, which keeps work off the main thread, and fall back to the main-thread engine for unsupported features. Avoiding those features keeps animations on the faster path.
• Pause offscreen animations in scroll views and cells.
• Keep images small — large bitmaps cost memory and decode time on every device.

6. React Native

• lottie-react-native renders with the native iOS and Android libraries, so the iOS and Android advice above applies.
• Keep the animation file small in your bundle — it ships with every install. Optimize it before adding it to the project.
• Avoid re-creating the animation on every render; keep the source stable and control playback through a ref.

7. One-page checklist

1. File under ~100 KB for UI animations; no multi-megabyte embedded images.
2. Composition sized close to display size.
3. Masks, mattes, effects and expressions only where they are really needed.
4. Hidden layers deleted, paths simplified.
5. Compressed delivery (dotLottie or gzip/Brotli).
6. Lazy-loaded, paused offscreen, reduced-motion respected.
7. Tested on a low-end device.