Hi, I have built this website a while ago and recently started to optimize it bit by bit. I have compressed all images to get smaller sizes. While the lottie interaction does slow it down a bit, but other issues seem to be making the website much slower.
I tried using google dev tool’s pagespeed insight which gave me a score of only 21 on desktop and 20 on mobile. I have been scouring the forum to try to find solutions for this as I need the website to load much faster. Here are some of the things google lists.
You’re on the right track in diagnosing the problems, just take some time to read through what’s shown within the insights. Google does a great job of outlining the problem areas as well as ways to fix them.
A few things stood out to me that should be your first priority:
The Lottie file you’re using is huge (~8.75mb) so you’ll want to look into possibly another solution here. The quality is already too low in my opinion (mainly because of the red, which doesn’t compress very well) so I doubt you’ll be able to add any additional compression to it. Maybe look into scrubbing a video file frame-by-frame instead of using Lottie here
You’re pre-loader image is fairly large (~270kb) so look into simplifying or recreating it. Removing frames from the GIF will help - I’d aim for something less than 50kb at the most. Keep in mind this should be loaded almost instantly, especially if visitors are needing to wait even longer for the page to finish loading.
You’ve include a number of large PNG files that could use some optimization with a service like tinypng.com. You have a number of images over 300kb that really should be much smaller, with the merch image coming in at ~1.2mb, and the album images sitting between ~450-780kb.
I’d imagine that simply fixing the handful of problems I mentioned above would give you a much improved performance score.
The lottie is a requirement so cannot remove it. I have been looking at ways to compress it but without success. I have also compressed and downsized all the images further and it did get my score up by 3. I have also removed youtube embeds, other than just one to get it further up. However I am still at only 28 which is kind of underwhelming. Any other suggestions are welcome, thank you for taking the time to help me out mate.
I would guess this is more of the effect being a requirement based on discussions you had with the client, not the use of Lottie. Thankfully there are ways to achieve a similar look by scrubbing video files which will be much smaller in file size than even the most compressed images. Here’s that resource I included in my first reply for reference.
I can’t run this test since I only have access to the read-only link, however removing that Lottie file alone should get your score above 60 - it really is a huge file that each and every user needs to download to view the page. From an SEO standpoint, this is probably the biggest hit and without adjustments in this area, you’ll be suck at a lower score.
I’d also take a look at implementing lazyload for your YouTube embeds that displays an image when the page loads and only renders the video element (which has a lot of bloated JS along with it) when the user clicks the play button. There’s a pretty good walk through on getting that setup here.
