I'm having some issues optimizing the .json Lottie files on my site. On my homepage, I use Wordpress in combination with Elementor Pro, WP Rocket, Bunny CDN, and Asset CleanUp Pro. I've managed to take my site loading speed down from 8 seconds to under 2 seconds; however, my lottie files are the only thing I'm struggling to optimize.
There's one lottie image above the fold that I would like to load immediately, and then I have 8 other lottie images on the page that I'd ideally like to load on user-interaction (scroll/mouse/etc). All the lottie images are anywhere from 50kb to 200kb.
One of the interesting things I've noticed, is that according to GTMetrix, the .json files are not using Keep-Alive even though I have that configured in my htaccess, so that slows down the loading of the .json images even more. I'm not sure why they aren't being enabled by keep-alive.
Another thing I've noticed is that according to GTMetrix, the .json files aren't being served from my CDN.
What I've tried:
I thought I could use Elementor Pro Lottie's feature to link to the CDN version of my .json files; however, Elementor wasn't able to load anything when I did that. It simply left a blank white space. It only seems to load the files from a media gallery.
I thought I could use the "delay Javascript execution" feature in WPRocket by linking the .json files below the fold; however, GTMetrix still loaded those files normally on the page load.
I tried enabling the "lazy load" feature on Elementor's plugin for those .json files - that somewhat worked, but it caused content shifts that messes up the flow of the site too much.
Any ideas how I could speed up/optimize the lottie images here? Ideally, if I could use the Keep-Alive or the CDN version of the Lottie images, or potentially get some kind of delayed user-interaction load that won't make my site shift so much... that would be ideal.
Any help would be appreciated!
