Streaming live at 10am (PST)

Website Optimization Tips

#1

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.


Here is my public share link: LINK

#2

Looking at your site, its load time is 892ms, that’s not even remotely bad. Your images still take up most of the weight, though…

#3

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.

#4

@Erica

What does Google Page Speed (https://developers.google.com/speed/pagespeed/insights/) and GT METRIX (https://gtmetrix.com/)

Say about the following:

  1. webflow.io page(s)
  2. webflow.io page(s) with custom code removed
  3. live https: published page(s)

Also, which country are majority of users? Thats where you want to be testing server speed times.

What really matters is time to first paint under 1500ms.

#5

@Erica,

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.

Might help :slight_smile:

1 Like
#6

These are the results from the live site https://www.sigmacomputing.com

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?

#7

@Erica

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.

even his own 1080 screenshot is under 250kb

I like to use https://tinypng.com for shrinking down my bg assets.

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.

1 Like
#8

This is all incredibly helpful, thank you.

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.

#9

@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.