[early access] Help us test Bubble’s editor performance improvements

Announcements
81

I don’t know about anyone else, but now the ‘newautorun=true’ takes much longer to load than without it. @jennifer.javier Anyone else reporting this as an issue?

82

Pretty quick for me on initial load

83

Same here

84

I thought it was slower

1 Like
85

Yeah, much much slower for me. Sometimes there’s less latency off the bat, but it almost always end’s up completely lagging out 5 or so mins in

86

Great news! :star_struck: Thanks to the Bubble team for constantly improving the platform. Can’t wait to try the new framework and experience the editor speed boost. :rocket:

87

Just circling back on this after nearly half a year, and I wanted to note that with this feature enabled, it takes significantly longer for editor pages to load. In fact, I forgot I had enabled it and was becoming increasingly annoyed with editor page load times. (I typically have multiple pages across multiple apps open throughout the day - often with frequent editor refreshes.) Then I noticed the query string flag in the URL and removed it. Wow, the editor loads MUCH faster without newautorun=true.

Whatever benefits SolidJS might bring, editor page load speed AIN’T one of them!

:neutral_face:

2 Likes
88

For me the editor is super memory consuming either way :frowning:

It becomes very slow and crashes every few minutes. It is just a routine for me to reload it every fifteen minutes or so.

I am on an 8 GB RAM Mac which should generally be good (and it used to much better earlier) but it is not.

Earlier I used to have two editors open (one for dev and one for live). And now I can’t keep two so have to keep only one and a lot of my time gets lost in switching between the two. And even then the editor keeps crashing due to memory issues.

89

Is your page very heavy any groups and popups? If so, put some of them in reusables so the page won’t take too much memory.

1 Like
90

The Strategy: Leverage Reusable Elements Effectively

  1. Convert All Elements into Reusable Elements
    Start by identifying logical groups of elements on your page. For example:
  • A header section.
  • Sidebars or navigation menus.
  • Forms or data displays.For each group, create a reusable element. This encapsulates those elements into a modular component, reducing the rendering load on the browser.
  1. Group Reusable Elements into Another Reusable
    Once you’ve created approximately 10 reusable elements (or whatever number suits your app’s complexity), group them into a single master reusable element. This serves as a container for all the smaller reusable components, further optimizing the browser’s processing by reducing the number of individual components Bubble needs to manage.
  2. Use the “Trigger a Workflow from Reusable” Feature
    To maintain seamless communication and functionality between the master reusable and the original reusable elements:
  • Define custom events within each individual reusable.
  • Use the Trigger a Workflow from Reusable feature to call workflows or actions defined in the original reusable from the master reusable.This approach centralizes logic and maintains functionality while reducing the strain on the browser.

Why This Works

  • Reduced Rendering Load: Fewer top-level elements on the page mean the browser has fewer resources to manage.
  • Improved Modular Design: Reusables encapsulate functionality, making updates easier and more efficient.
  • Optimized Workflow Management: Using the “Trigger a Workflow” feature ensures interactivity without compromising performance.

This method is particularly useful for large, complex apps and can drastically reduce the likelihood of browser crashes. It’s a scalable, maintainable, and performance-optimized approach to Bubble development.

If you’ve encountered similar performance challenges or have additional tips, feel free to share!

1 Like
91

I do have a heavy app with many pages. And one of the pages is a SPA which I run as mobile app so it is having a lot of groups. I am aware of reusables and use them quite a bit. But reusables have their limitations with respect to being context aware and communication overhead between parent element and reusable element, so at times reusables are difficult to use.

Also, I have many backend workflows which because of Bubble’s restriction load all at once when I go to backend workflows. Folders don’t help as folders are not natural way to organise backend workflows. Labels are the right way but Bubble doesn’t have that. Also, it is not easy to move around workflows while you are in folder.

Furthermore, the editor is slow even when I am on less complex page. From what I understand it has memory leaks or it probably has poor cache management or whatever that is.

For example my Canva doesn’t crash even if I open files with lot of complex designs etc.