Hello,
I’m diving into Builder with Nextjs. After an initial build of a project using pages in Builder, I noticed all images were lazy loaded. My question is:
How can I set priority loading vs lazy loading? I’ve seen references about the space setting but that does not seem to be available for me
. Is there a way to set a
fetchpriority ?
How do I avoid CLS with images out of the page builder? Can an image be configured with blur up or placeholder?
Is there a way to have Nextjs Image handle images out of Builder or does that require building a custom component that needs to be registered in Builder?
Hello jasperkooij,
All Builder Components are json objects you would be free to access. By right clicking on the image layer and selecting JSON View , you can specify which images are lazy loaded as pictured, below:
Regarding Image optimization and Content Layout Shifts, I was able to locate the following article written by our Director of Technology which addresses both of your concerns:
As for image hosting, Builder can serve images hosted by 3rd parties.
Please let me know if there is any more information I may be able to provide.
1 Like
Aha, I did see the code option before but changed the JSX, not the JSON. Let me give that a try
No luck so far
I’ve changed the alt tag a few times just to make sure I’m getting the update but it still stays lazy loaded
Hello jasperkooij,
I have been able to reproduce the experience of JSON View lazy boolean value not affecting the Published or Draft Content as expected.
Please look forward to more information from me, soon.
1 Like
Thank you for looking into this!
Hello jasperkooij,
I’ve been informed that our React Gen 2 SDK at this time will always lazy load. It’s important to note that our React Gen 2 SDK is also in Beta. I’ve been made aware that there are plans to make lazy loading toggle-able, soon.
I’d suggest moving to our more stable Gen 1 SDK.
Relevant Documentation: SDK Comparison - Builder.io
1 Like
It’s very important for CWV performance to eagerly load our hero image to have a good LCP score. How can I force an image in the visual editor to eagerly load?
I see from prior discussion the suggestion is to use the V1 sdk. Are there instructions on how to use the V1 SDK within the builder editor? In my Remix app, I’m using the V1 sdk ( @builder.io/react) . But in the visual editor, when viewing the JSON of an image, it appears it’s using V2 which doesn’t appear to support eager loading. And if I try to update the import in the JSON view to use "@type": "@builder.io/react:Element", it doesn’t appear to save. I can change “@version” to “1”, but that doesn’t appear to make the lazy: false attribute do anything either.
How can I update the visual editor to use V1 so I can eagerly load an image within the visual editor?
@JuliusGD Since I’m using Nextjs, I’m having Next Image doing the image handling and passing the lazy loading prop as mentioned in the documentation
And that works great!
My image component is called Builder image and that does the trick.
One thing that I noticed in my editor in Builder.io now is that every image that I now add, has
"lazy": false,
Where is the setting for every image to be
"lazy": true
I tested this by uploading a new image and it is set as false by default
Should this not lazy load by default?
