Image Incorrectly Lazy loading


I’ve been trying to get images above the fold (eg Hero image) to NOT be lazy loaded. It always is.

What I’ve tried:

  1. Setting Lazy load images to Never in Advanced Settings-> Performance.
  2. Setting lazy: false in the component json (cmd+e)
  3. Setting the lazy prop to false for the Image component in data->code->json
  4. Created a custom component that takes image as an an input parameter and manually using the Image component from @builder/react and setting lazy=false.

Another quirk that is annoying is that if the image is in a Symbol (i.e. a Page Hero symbol) it takes even longer to load. It’s like the symbol is loaded dynamically after hydration that then causes a significant layout shift :frowning:

Builder content link

Builder public api key

Detailed steps to reproduce the bug
Using gatsby as the stack put any image on a builder page and try to make it NOT lazy loaded.

Code stack you are integrating Builder with

Hi @Simon,

For lazy loading issues, you may find help at our forum postSpeed issues with Builder/Shopify

If you have turned on lazy loading for images in your space settings, Builder’s SDK will observe the element and wait until it’s inside the viewport before loading that image.

Using negative margin values on image containers will affect their normal position and could cause lazy loading to not pick up when placed inside a carousel or a scroller.

Hi Manish,

I guess that’s the issue. I’ve tuned lazy loading off but it is still being loaded as Lazy. I’m away from my keyboard at the moment but will try and provide more concrete examples other than those already given.

Hi @manish-sharma,

Just wanted to follow up here. In the end I couldn’t resolve this in Gatsby, I ended up switching to NextJS for this project and the problem no longer existed.