Image in the nav bar loading slowly

Hi Team,

I am currently finishing up on the first iteration of the site and one of the little things that I couldn’t find a way to get around is the slow loading of the company logo in the nav bar.

Upon inspecting the published site I noticed an attribute loading=“lazy”, but I am unsure how to tackle that, as adding a custom attribute loading=“eager” didn’t help at all.

1 Like

Hi @TrendiMike,
are you using your own hosted image or is it uploaded on Weweb CDN?
What is the size of your image?

Hi @aurelie, the image has been uploaded to weweb. It’s an SVG and its size is around 6KB ( if you are looking for dimensions its 500 x 250 px in the original file, but gets shrunk down quite heavily on the screen)

Can you send me the link to your website? (by private message if you want).
I will take a look, and see if we just add the feature to mark the image as critical (we indeed forced the lazy behavior for now)

Done, sent in a message :slight_smile:

Hi,
I checked your project
First you seem to use an old image component, which may exist on some of our old template.
Can you drag and drop a new image and use it instead? To see if you are running the old version, they have additional settings

Old version

New version

The old version has known issues with pre-rendering.

In the meantime I also added an option to disable the lazy attributes on image, as it is also a good practise for top screen images. I will let you know when this is in production.

3 Likes

@aurelie the updated image template loads faster, however would be great when you guys release “eager” loading option for the company logos :slight_smile:

1 Like

Hi @TrendiMike, the eager option is now available on the Settings tab of image :slight_smile:
Enjoy
image

4 Likes

@aurelie absolute legend, thanks!

1 Like

This is really helpful! I’d like to suggest a couple adjustments:

I think it looks glitchy to lazy load once the image is already in view. Could we set the lazy load to occur 100px (or other increment) before the image scrolls in? I’m seeing the load delay in the editor, maybe this is already resolved in published sites.

Would be even nicer to have the option to fade-in on scroll. I had that set up with Webflow animations, works well if it is subtle. Could be pre-defined under image settings, or a “Scroll into View” option in the workflow editor (which would unlock a bunch of uses)

1 Like

Hey @foliodc,
for now we rely on the browser native functionality of lazy loading image, and this behavior is not customizable.
I gave your suggestion to the product team, but this will required specific developement on our side if we want to implement it.

2 Likes