Keep Lottie and SVG from slowing the page

A vector file can still jank a page. The browser has to parse JSON or SVG, build layers, and paint every frame. One heavy hero plus four autoplaying players below the fold is a common way a “lightweight” animation stack feels worse than a single MP4. This is the checklist I use before a file goes on a marketing site.

Budget the file, not the format

• Simple icons and loaders: often under 50–100 KB JSON.
• A hero loop: keep it in the low hundreds of KB if you can. Past ~1–2 MB, first paint suffers — trim layers, split the scene, or use dotLottie.
• If the composition is full of PNG sequences or 3D-ish blurs, Lottie is the wrong container. Export MP4 or redesign the motion for vectors.

Design for what the player can paint

After Effects will let you animate things Bodymovin cannot ship cleanly: heavy blur, some 3D cameras, expressions that explode into huge JSON. Those either drop out or get baked into expensive workarounds. Animate with the export in mind — fewer paths, no hidden unused comps, merge shapes that never need to move apart.

• Delete hidden layers and guide comps before export.
• Avoid animating `visibility` on/off for dozens of groups if `opacity` or a single swap will do — some players and CSS-SVG ports hitch on first show.
• Prefer transform (position, scale, rotation, opacity) over per-vertex path morphs on large shapes.
• One loop at 24–30 fps is enough for UI and most heroes. 60 fps on a dense scene costs paint for no one notices.

How you embed matters as much as the file

1. One autoplay player above the fold. Everything else: load when it enters the viewport (`IntersectionObserver`, Webflow’s load setting, or a React wrapper that mounts on view).
2. Do not mount four Lottie players on first paint “for the archive row.” That steals the main thread from the hero.
3. Pick a renderer: SVG renderer is easier to restyle; canvas can be cheaper for a dense hero. Note it in the handoff — see embed recipes.
4. Respect `prefers-reduced-motion`. Pause or swap to a still. It is both accessibility and a free skip of work on machines that asked for less motion.
5. Native SVG for a two-layer loop can beat a Lottie player: no JS parse, CSS `transform` on the compositor.

Runtime habits that keep FPS up

• Do not run the same JSON at 800 px and also as a 48 px icon. Export a simpler icon file.
• Pause off-screen players (`player.pause()` when the section leaves view).
• Avoid `filter: blur()` and huge `box-shadow` on the player’s wrapper — they force extra compositing around an already busy layer.
• On mobile, shorter loops and fewer simultaneous scenes. A desktop hero does not have to play under a product grid on a phone.

How I hand off files

Every piece in the gallery is a real export — you can feel the weight before you order similar. Custom work comes with a size target in the quote and notes for the stack (lazy load, renderer, reduced motion). If a scene cannot stay in budget as Lottie, I say so and we split it or move that beat to MP4 rather than ship a 4 MB JSON and hope.