[Upgrade to Bubble Version 21] Improved Runtime Performance

[kathleen]

Hi everyone,

We’re excited to share that we will be improving runmode performance of your Bubble apps with our wide release update for the new elements rendering feature . This feature was originally on our experimental features panel, but we are now releasing it to everyone later today as Bubble Version 21, which you can upgrade to in the Settings > Versions tab. This feature uses a more optimal rendering pipeline to improve runmode performance of your apps. More specifically, we no longer add a canvas for invisible elements on page load, whereas before we would still have a canvas even when it wasn’t loaded. This should only break if there’s any plugins or custom code that rely on this functionality.

If you are using this feature from the experimental feature panel already, you should still upgrade to the new version. We are not removing the feature, so your apps won’t downgrade before you get the chance to upgrade, but we are deprecating the experimental feature, meaning it will only be available for apps that have used it in the past, and will be removed for apps that never used it.

Please let us know if you have any questions!

[nocodeventure]

Sounds great!

[mghatiya]

@kathleen one question here. Does this feature come with some performance optimisations like not loading an element if the element is not visible?

At several places I have groups and repeating groups that may not be visible due to some conditions but I use their data for some processing. That aspect of functionality is really crucial for me. So I wanted to check if that will break if I migrate to the bubble version with this feature.

[kathleen]

Hi @mghatiya, thanks for your question — processing the data of invisible elements should be fine. The main change is that for invisible elements on page load, we no longer add a canvas, whereas before we would still have a canvas even when it wasn’t loaded. So for all intents and purposes the element still “exists”, it’s just there’s no div present until the element becomes visible for the first time. I’ll modify the post to clarify this point!

[samnichols]

Wondering the same. I’ve noticed that repeating groups used to load maybe a handful of things, but now they load 20-30 immediately, and load more on scroll, making initial page load much longer than it used to be when repeating groups contain images. We had to resort to using a “load more” button because of the impact on page load speed, especially on mobile devices. Hoping this update might include some fixes for this.

[samnichols]

I appreciate the clarity on this. That would make this update a breaking change for apps that use JavaScript which references elements that formerly existed on page load but now won’t, correct?

[kathleen]

Correct — here is the part that I added to the original post:
“More specifically, we no longer add a canvas for invisible elements on page load, whereas before we would still have a canvas even when it wasn’t loaded. This should only break if there’s any plugins or custom code that rely on this functionality.”

[qaz.wscuther]

I see some glitches on SVG images. Is that normal?

Update: Well, it is happening to cropped images. When I reverted the images to the original one they look fine, it seems the problem is with the cropped images

Btw the loading is noticeably faster

[samnichols]

Cropped via CSS or cropped before upload? We use SVG quite a bit.

[qaz.wscuther]

this one

[kathleen]

We can take a closer look — if you could submit a bug report that would be much appreciated!

[samnichols]

Gotcha. I don’t believe I’ve ever used that option.

[mghatiya]

Thanks @kathleen for the clarification. All of us have installed many plugins without understanding much on what goes behind the scenes of the plugins. How do we identify if any of our plugins are affected by these?

Also, could you give on what kind of custom code be affected by this? For example, could it be the ones that have custom css put in for some of the ID put on elements? Or any other thing that references objects by ID?

Would it mean that our “Is element visible” or “page is entirely loaded” conditions would not work same as before?

I think it would be better if you could give a more comprehensive list of the things that won’t get affected or would get affected. Also, a few examples of custom code scenarios that could get affected as well, would help to point us in right direction.

Non-tech people like me would really not know how to dig into the app to search for the areas which would get affected by this change.

[packsetu]

This a great value addition for performance of SPA.

Thanks a lot Bubble team for this

[Atomily]

Hi @kathleen

I just upgraded without making any other updates and it seems that the new upgrade is causing issues:

1. All my elements seem to be cut off when viewing on mobile
2. I had a floating navigation bar at the bottom of the screen which now does not float but instead is fixed to the bottom of the page.

I reverted to version 20 and all the issues were fixed

[ian9]

Does more server-side processing incur additional Capacity thus pushing us to buy more capacity?

[troy.roberge]

And… This is why I’m still on 17 or whatever… Buggy bubble builds. They need a much more effective way of testing.

[ihsanzainal84]

Working great for me so far!

Tested on all my apps, no issues and most definitely an increase in load speed. Small speed boost but noticeable enough.

[yusaney1]

@kathleen What is the probability this is being applied to apps that DID NOT upgrade to version 21? I have started to see some errors in my app that could be caused by plugins. The last time I sent an update to Live was 4 days ago, so nothing changed from my side but now I’m seeing some errors that I wasn’t seeing before.

And I’m asking this because It’s not the first time that an “breaking update” upgrade is sent anyways to all the apps by mistake… Can you confirm, please?

[kathleen]

Unfortunately it’s also difficult on our end to tell which plugins/custom code will be affected by upgrading, but I can tell you what to look out for. I would watch for plugins that rely on you putting a custom ID in for elements that the plugin can reference. If you have a case of this in your app, I’d make sure it still works when referencing an element that is invisible on page load. That’s the main change — elements don’t have a div until they become visible, and if the plugin can’t handle that then the plugin’s code may crash. The same goes for custom code.

In regards to your “Is element visible” or “page is entirely loaded” concerns, everything built within Bubble should still retain the same behavior as before the upgrade. It is only custom code/plugins that may have different behavior since we have no control over those. If this is not the case, please let us know by filing a bug report so we can make a fix.