How to Optimize Lottie Animations for Performance

Mastering Lottie Animation Optimization

While Lottie animations are inherently efficient, proper optimization can make a significant difference in file size and performance. This guide will teach you proven techniques to optimize your Lottie animations for faster loading and smoother playback.

Why Optimize Lottie Animations?

Optimization is crucial for:

• Faster Load Times: Smaller files download and parse quicker
• Better Performance: Simpler animations run more smoothly
• Reduced Bandwidth: Save data for mobile users
• Improved UX: Instant, smooth animations enhance user experience
• Battery Life: Efficient animations consume less power

Optimization in After Effects

1. Simplify Paths and Shapes

Complex paths with many anchor points increase file size significantly:

• Use the Simplify path command (⌘/Ctrl + Alt + Shift + S)
• Reduce anchor points manually when possible
• Combine similar shapes
• Use simple geometric shapes instead of complex illustrations

2. Minimize Keyframes

Every keyframe adds to file size:

• Remove unnecessary keyframes
• Use expressions instead of multiple keyframes where possible
• Simplify easing curves
• Avoid recording animations (creates too many keyframes)

3. Use Shapes Over Illustrator Layers

Shape layers are more efficient than imported Illustrator files:

• Create shapes natively in After Effects when possible
• Convert Illustrator layers to shape layers
• Avoid importing complex AI files

4. Optimize Composition Structure

Clean composition structure improves performance:

• Remove hidden layers
• Delete unused assets from the project
• Trim composition duration to actual animation length
• Flatten unnecessary pre-compositions

5. Limit Effects and Expressions

Some effects don't export well or increase complexity:

• Use only Lottie-supported effects
• Keep expressions simple
• Pre-render complex effects as image sequences (if necessary)
• Avoid unsupported features like 3D cameras and lights

Bodymovin Export Settings

Essential Export Options

Configure Bodymovin for optimal output:

Recommended Settings:

• Glyphs: Only include necessary characters for text layers
• Images: Compress and optimize embedded images
• Path Merging: Enable for better performance
• Skip Hidden Layers: Always enabled
• Decimal Precision: Reduce to 2-3 for smaller files
• Separate Dimensions: Disable if not needed

JSON File Optimization

1. Minify JSON

Remove whitespace and formatting:

// Before minification (formatted)
{
    "v": "5.5.7",
    "fr": 29.9700012207031,
    "ip": 0,
    "op": 60
}

// After minification
{"v":"5.5.7","fr":29.9700012207031,"ip":0,"op":60}

2. Round Decimal Values

Reduce precision for smaller file sizes:

• Use 2-3 decimal places instead of default 5-6
• Values like 1.000000 can be 1.0 or even 1
• Position and transform values rarely need high precision

3. Remove Unused Properties

Clean up unnecessary data:

• Remove nm (name) properties if not needed
• Delete empty arrays and objects
• Remove metadata like creation date

4. Use Lottie Optimization Tools

Several tools can automatically optimize JSON:

• lottie-web: Built-in optimization options
• Lottie-Transform-tools: Command-line optimization
• Online Optimizers: Web-based tools for quick optimization

Image Optimization

When Using Embedded Images

If your animation includes images:

• Compress images before importing to After Effects
• Use appropriate image formats (PNG for transparency, JPG for photos)
• Resize images to actual display size
• Consider Base64 encoding vs external image files
• Use SVG shapes instead of images when possible

Runtime Performance Optimization

1. Choose the Right Renderer

// SVG: Best for most cases
lottie.loadAnimation({
    renderer: 'svg',
    ...
});

// Canvas: Better for very complex animations
lottie.loadAnimation({
    renderer: 'canvas',
    ...
});

2. Reduce Animation Quality on Lower-End Devices

// Detect device performance
const isLowEndDevice = navigator.hardwareConcurrency < 4;

lottie.loadAnimation({
    renderer: isLowEndDevice ? 'canvas' : 'svg',
    // Reduce frame rate on low-end devices
    rendererSettings: {
        preserveAspectRatio: 'xMidYMid slice',
        progressiveLoad: true
    }
});

3. Implement Lazy Loading

// Only load animation when visible
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            loadAnimation(entry.target);
            observer.unobserve(entry.target);
        }
    });
});

observer.observe(animationContainer);

4. Pause Off-Screen Animations

// Pause when not visible
document.addEventListener('visibilitychange', () => {
    if (document.hidden) {
        animation.pause();
    } else {
        animation.play();
    }
});

5. Destroy Unused Animations

// Clean up when done
animation.destroy();

// Or when component unmounts (React example)
useEffect(() => {
    return () => {
        animation.destroy();
    };
}, []);

Measuring Performance

File Size Metrics

Target file sizes by complexity:

• Simple icons: 5-20KB
• Loading animations: 20-50KB
• Complex illustrations: 50-100KB
• Very complex scenes: 100-200KB (maximum)

Performance Testing

// Measure frame rate
let frameCount = 0;
let lastTime = performance.now();

animation.addEventListener('enterFrame', () => {
    frameCount++;
    const currentTime = performance.now();
    
    if (currentTime - lastTime >= 1000) {
        console.log('FPS:', frameCount);
        frameCount = 0;
        lastTime = currentTime;
    }
});

Common Optimization Mistakes

• Over-optimizing: Don't sacrifice quality for minimal size gains
• Ignoring mobile: Always test on actual mobile devices
• Complex expressions: Simple is almost always better
• Too many layers: Combine layers when possible
• High frame rates: 30fps is usually sufficient, 60fps rarely necessary
• Embedded images: Use shapes instead when possible

Optimization Checklist

Before deploying your animation, verify:

• ✓ Removed all hidden and unused layers
• ✓ Simplified paths and reduced anchor points
• ✓ Minimized keyframes
• ✓ Used Lottie-supported features only
• ✓ Optimized embedded images
• ✓ Configured proper Bodymovin export settings
• ✓ Minified JSON file
• ✓ Tested on mobile devices
• ✓ Implemented lazy loading
• ✓ Added cleanup/destroy logic

Tools and Resources

Online Optimization Tools

• LottieFiles Optimizer
• JSON Minifiers
• Image compression tools

Command-Line Tools

# Install lottie-web tools
npm install -g lottie-web

# Optimize animation
lottie-web optimize animation.json --output optimized.json

Conclusion

Optimization is an essential step in creating production-ready Lottie animations. By following these techniques, you can significantly reduce file sizes and improve performance without sacrificing visual quality. Remember that optimization is a balance—aim for the best quality at the smallest file size that still provides a smooth user experience.

All animations on IconKing are optimized and ready to use, so you can implement them with confidence!