I had made this website using one of the Webflow Templates and for some reason when loading the website, the speed is very slow. I have 1.) Cleaned out unused classes 2.) I have done the Keyboard Shortcut to optimize the media assets on page 3.) I also fixed the scrolling from high to lazy throughout the page. Can someone please tell me what I may have missed?
I’m noticing that you’re using PNGs for a lot of lifestyle imagery but the file sizes here are going to always be larger than their JPG counterparts. It’s also useful to consider a lossless compression service (like TinyPNG) to ensure the file sizes are as small as possible. One thing to note if you use those services—they seem to do a lot better when you don’t use compression beforehand, so saving out all the photos at “full” quality leads to a better end result with a smaller file size.
A rule of thumb I use is keeping photos below the 300-400kb range (with the high end of that number really only applying to large/full-width imagery) and limit those larger sized images to 1-2 per page. The rest really should fall in the 150-250kb range if at all possible—especially if they’re rendered at a small physical size.
The only other thing I’m noticing are some JS files—YouTube, Donor App, and Google Maps specifically—with the Donor JS being the only thing absolutely necessary on page load (from what I can tell). I’m not seeing any maps usage (maybe I’m missing something?) and there are ways to lazy load the YouTube embed after a user interacts:
I’d say looking at those points should get you some higher scores but I’m sure @webdev has some other suggestions—from his previous replies he seems to know a lot more about squeezing out as much speed as possible.
Hello! Thanks for getting back. Yes to the first point, The main site is cdrsworld.org but the staging site is the webflow ID. My apologies for not making that clear in the inquiry.
So I was under the impression that once you do the keyboard shortcut, everything optimizes down in file size? Did I get the wrong impression?
There was Map usage but it was removed. Not sure why its still appearing
Thank you so much for the full details @mikeyevin. @webdev Anything we may have missed?
Webflow’s responsive images feature works to serve properly sized assets based on the viewport size, however you’ll still want to ensure that your images are appropriately sized (as much as possible) prior to uploading them to the Asset Panel.
It’s worth noting that this only works for Image Elements—not background images (which it looks like you’re using in the hero section)—so you’ll want to replace those with Image Elements for the feature to work as intended. Also, since you’re looking to fit those nicely within the containing div, you’ll want to make sure you take advantage of the object fit feature.
