How to use the Lottie JSON Optimizer
- Export your animation as Lottie JSON (Bodymovin/LottieFiles) and drop the file here.
- Keep 3 decimals for a safe result; try 2 for extra savings and compare the animation afterwards.
- Download the optimised file and upload it to your Webflow Lottie element (or your player).
Why Lottie files get big
Lottie animations exported from After Effects store every keyframe value with up to 15 decimal places, keep the original layer and shape names, include exporter metadata and sometimes ship hidden guide layers. None of that changes what the animation looks like, but it all has to be downloaded and parsed before the animation plays — slowing pages and hurting Core Web Vitals.
What the optimizer removes
| Optimisation | Effect |
|---|---|
| Round numbers (e.g. 80.0000001 → 80) | Usually the biggest win; 3 decimals is visually identical |
Remove names (nm, mn, cl, ln) | Strips human-readable labels (keeps marker names used for segments) |
| Remove metadata | Drops exporter, author and keyword info |
| Remove hidden layers/shapes | Deletes elements flagged hidden (hd: true) |
Using Lottie in Webflow
Webflow’s Lottie element (Add panel → Media → Lottie) accepts uploaded JSON files and controls playback with Interactions. Smaller files load faster, especially when several animations run on one page. If your animation includes embedded raster images (base64 PNG/JPG), they usually dominate the size — compress them before export or replace them with vectors. If you reference layer names in code (e.g. lottie-web’s dynamic properties), keep “Remove layer & shape names” off.
Tools that pair well with the Lottie JSON Optimizer
- Image Compressor — Shrink photos and graphics by 50–90% without visible quality loss.
- HTML to Webflow Rich Text — Paste messy HTML — from an old site, WordPress export, Google Docs or Word — and get clean semantic markup that Webflow’s Rich Text element and CMS import accept without junk.
- HTML & CSS to Webflow — Paste HTML and its CSS, click Copy to Webflow and paste into the Designer — you get real Div Blocks, Headings, Links, Images and Lists with classes, combo classes, tablet/mobile breakpoints and hover states instead of one big Code Embed.
- Class Name Generator — Describe a section in plain words — “hero with tagline, heading, two buttons and an image on the right” — and get a consistent class structure in Client-First, BEM or simple kebab-case, ready to copy into Webflow as elements.