Speed issues with Builder/Shopify

I’m having loading speed issues which Lighthouse has said is partially caused by Builder. Below is a screenshot. I’m not sure what is causing the lag. Any suggestions?

I’m also getting an issue that the LCP is being lazy-loaded. I edit the setting in the JSON console, but it automatically changes back to “true”. I’ve looked in the organization settings and I have it set to Below the Fold only for lazy load, even though this image is at the top.

Here’s the website: www.peakcocktails.com
Here are the Builder pages. I have these split in two since I have the crawling marquee text in Shopify.
Builder.io: Drag and drop Visual CMS
Builder.io: Drag and drop Visual CMS

Also, I’ll mention that I didn’t experience speed issues until a few days ago. I didn’t make any changes to the Builder pages that might have caused this.

Hi @ian!

Welcome to the builder.io forum.

At a high level, Builder will not cause a performance hit and any content within Builder will be fully optimized. I run a lighthouse report on your site and got a good performance report for desktop and mobile. In your case Third-party code blocked the main thread for 6490ms and in my case they were only blocked for 560ms. We recommend performing lighthouse test in incognito mode after disabling all the plugins/extentions, also if you could try and use another performance measuring tool like Pingdom, PageSpeed Insights that will be great, considering lighthouse chrome extensions has’nt been updated in so long, a lot has changed since they last updated in November 20, 2019.

Regarding lazy loading issue, editing the settings in JSON console will always revert back to true as long as lazy loading under advanced settings is enabled. So, either you can try disable lazy loading under advaned settings first and then edit JSON or you can use javascript to remove lazy loading from any specific image e.g.

let image = document.getElementsByClassName('css-1xg9q65');
image[0].removeAttribute('loading'); 

Kindly, let us know if the performance metrics are still the same, we are more than happy to do further investigations. Thank you!

Hi Manish,

Thank you for the recommendations. I appreciate the help!

I’m not much of a developer. Could you let me know where this code should be inserted so that the hero image is not lazy loaded? Thank you! - Ian

let image = document.getElementsByClassName(‘css-1xg9q65’); image[0].removeAttribute(‘loading’);

Hi @ian,

You can insert that code under data tab → Edit content JS + CSS → JS section.


Let us know if you have any further questions. Thank you

Thank you, that’s very helpful. I checked on PageSpeedInsights and the hero is still lazy loading.

To make only the hero image not lazy load, what value would I enter in this field? css-1xg9q65

Hi @ian,

The field value is basically the class name for the hero image, If you could share the builder content link then I can tell you the exact field value.

Is this the right link?

https://builder.io/content/27e86e5ab0104a2c87882269713d302b

Hi @ian,

For the mentioned content field value should be css-1hbf805

let image = document.getElementsByClassName('css-1hbf805');
image[0].removeAttribute('loading');

Let us know if you have any further questions. Thank you!

Hi Manish,

Thanks for helping with the specifics. That’s great support!

I’ve re-run the speed test on PageSpeedInsights (using Incognito on Chrome).

I’m still getting a long time on the Script Evaluation, and the Builder web components, per below screenshot. Do you have any suggestions? I don’t believe our site is very complicated so I’m not sure what the root cause is.

Hi @ian,

It’s not possible to remove those builder scripts from the main thread, however, if there are pages that don’t need builder widgets, it is possible to lazy load them only when they are used in content to improve performance.

Let us know if you have any further questions. Thank you!

Hi Manish,

How do you lazy load the unused pages? Are you referring to pages other than the landing page? (Such as product pages, About, Contact, etc)

Thanks,
Ian

Hi @ian,

Yes, I’m referring to the other pages like the product page or about page. Otherwise, It’s not possible to remove those builder scripts from the main thread.

Hey @ian - we actually just changed how we lazy load images in Builder to be more optimal, if you just republish your page it’ll generate with the latest update, and you won’t need that snippet of code @manish-sharma gave you anymore

Additionally, we have a new high speed mode coming that reduces JS execution, powered by our Qwik framework. We should be able to get you early access to that soon if interested

1 Like

@steve thanks for the info. I’m definitely interested in the high speed mode with Qwik.
I see that is an option in the Advanced Settings > Labs. Would this be a good fit for us to try out?

@ian that’s the one! There are some caveats to know of that I hope to document today, let me get back to you on that before you dive in there, will follow up shortly

Doc is now live! Feel free to ping here or elsewhere if you run into any issues

@steve @manish-sharma
Thanks for sharing the high speed document. I’ve published our site using it - though I’m still running into the same issue. I have a few screenshots from Page Speed Insights below. How can I reduce the impact from the Builder js web components, which seems to be the driving factor? Thank you again for the assistance!
https://cdn.builder.io/js/webcomponents@1.3.48/dist/system/lite/builder-webcomponents-lite-28d7edcd.js




Hey @ian - if you use high speed mode the Builder webcomponents won’t be used (high speed mode uses Qwik and not Webcomponents)

Looking at your homepage, it does not appear you published with high speed mode. Did you ensure you followed this doc and made sure to open up any Builder content on your homepage (looks like you have a homepage and an announcement bar in Builder), flipped the option on inside the editor (for each), and then hit publish?

Builder needs to re-generate the code for those two areas of your page. Once done successfully, you should not see the Webcomponents script included on your page anywhere anymore