Optimizing Lottie Animations to Improve Lighthouse PageSpeed Score

[@justingolden87]

Super helpful video! I'm a SVG nerd but making animations this complex in SVG is pretty rough, and lottie is a great tool for our designers, but it slows down our site, and all the other resources online for optimizing lottie weren't as helpful as this video

[@jaredralphstanley]

Thanks! Yeah I love the animation side. Glad you liked it. Hit me up w any other questions. Site is https: / / radical.graphics

[@formfransyskan]

Super! Thank you for this 👍🏽😊🙏🏽

[@frezzingaces]

Nice video. Did you try using the canvas renderer instead of the SVG renderer? Just thinking that might assist with the dom size problem, canvas doesn't involve making actual dom nodes.

[@frezzingaces]

So I tested this theory. Found that while the dom nodes were significantly smaller, the canvas renderer just takes up more CPU anyway, so the trade off ain't really worth it (at least was for my animations).

[@SkateDadz]

Dude thanks so much for this

[@joethong726]

Thanks

[@oliwiasnieg6139]

Do you know what to do with fonts? My animation has quite a lot of headers etc. I flattened them all, but this makes each letter a separate path, should I leave all these captions as plain text?

[@jaredralphstanley]

bodymovin exports to json and lottie is run with javascript in the browser. javascript and the browser already have text handling built in natively, so it would make sense to explore the text option first before flattening the letters. airbnb.io/lottie/#/web?id=text shows some things to look out for. I'm sure there are other tutorials out there, but if not lmk and I can make one!

[@sophietse2716]

Thank you so much!

[@wpdv]

I recently had an artist create a Lottie file for us that has 1700+ DOM elements. How much would you charge to reduce this file size if I sent it to you? Thanks!

[@jaredralphstanley]

do you have the .aep file? if you have that I could take a look.

[@wpdv]

@@jaredralphstanley I've requested it from artist. If I get it, I'll let you know. Thank you for your quick reply!!

[@Bottel]

I Had no idea you could make calculations in spotlight..