Load time on my site is slower than I want it to be. I’ve gone through to resize images, because I know that we didn’t handle that while we were trying to get the site out the door.
The site is still slower than I’d prefer and my next area of exploration is the interactions. The site was built on a template, so I’m not familiar with every interaction that may be built in to the site. Is there a way to see load times of different elements, or otherwise quickly explore the different interactions applied in Webflow?
I’m also concerned that some of the conditional logic on my CMS pages is causing load times to drag but I don’t see any documentation on that.
We’re still figuring out how to further improve image issues. I’m just worried about the rest of the interactions because I’m not confident that I know what will affect load time and what won’t.
The overall assets looks great I believe, I just saw a few unnecessary big PNG pictures… I would try keep the resolution exactly as you need it (x2 for if you need retina ready images) and save them in JPG format (unless you need alpha chanel / transparency) using image compression softwares like https://tinyjpg.com/ or others.
For Webflow, is there a quick way to test with the custom scripts removed? Or is it about deleting the scripts, publishing to Webflow.io, testing, then putting the scripts back?
As rule of thumb top two folds should be under 800kb, and hero /bg images should not exceed 250kb (IMHO).
as @anthonysalamin pointed out you have a 1.5MB image (1440x960).
I might suggest rescaling the image 1280w (1280 pixels wide) and then compress it again and see if you can get it at least below 240kb then set to container width.
Another trick I do is shrink BG image 768w or 960w, compress it. Then create BG layer with 2 point blur effect. This gives the illusion an image is 2x or 3x higher resolution that it actually is, but its blurred (if it makes sense to blur your bg assets.
If you’re getting F score for serving scaled images, I would suggest replacing icon images with SVG icons (if you have the SVG assets).
tagging your files names like this helps you asset manager:
image_description-###w-###kb.png
hero_background-1440w-120kb.png
I instinctively delete any or all assets greater than 300kb and reup them when they are under 250kb
Knowing Image Width AND KB allows me to see in designer asset sizes right away.
If you’re getting low grade for defer parsing Java, I would suggest moving custom JS below the fold.
Is there an easy way to tell in the Webflow asset manager which assets are actually being used. I know for a fact that we have assets in there that we aren’t using on the site but I haven’t been good about deleting as we swap things out.
@Erica
I use xenu sleuth to scrub my project of assets, Its a more involed/advanced process however.
basicially scan webflow io site contents for images, export to csv, filename paths match webflow cdn, compare webflow cdn filesize names and pivot against which pages are being used. Delete as needed.
