⚠️ Bubble performance problems and how to solve it

Recently i just saw that on loading the bubble editor, it loads the plugins icons. Having some icons be more than 1Mb. That for a page like the bubble editor and for each plugin can make my editor up to 10Mbs to load the editor. Looks like something easy to fix to improve performance, ¿can bubble team just load that data only if i open the plugins tab?

Hope someone on the team reads this and can be done.

I agree this is a valid concern. Loading all plugin icons on every editor load adds unnecessary overhead especially if you have many plugins installed.

A few things that might help while waiting for Bubble to optimize this:

  1. Remove plugins you are not actively using. Each plugin adds to the loading time even if you dont use it in your app.

  2. Check if any plugins have large icon files. Some plugin developers use oversized images.

  3. Clear your browser cache periodically. Sometimes old cached assets cause issues.

For Bubble team - it would be great to have lazy loading for plugin icons, only loading them when the user actually opens the plugin panel or hovers over a plugin element. This would speed up the initial editor load significantly.

I believe it’s the plugin developer’s responsibility to set up plugin properly so it’s not loaded in shared section which results in loading of library even if no plugin elements are on the page.

1 Like

totally agree, the problem is that i use every single plugin that i have, hehehe.

I run a very large platform in bubble and some things needs to be done by plugins. We are looking to self programming the plugins that we currently use to have more control on optimization and now also to have no plugin icons hahaha.

I think this kind of things should be one of the main priorities of the bubble team. I’m so so happy with bubble platform but there is allways this little things that lag the experience…

Yeh, but also will be easy if bubble just limit the plugin icons to some kbs or compress itself on load the icon so my pc doesnt have to load the uncompress large file. I know 1Mb per icon sounds like nothing but for an app editor where you can be editing 4-6 pages on each session, each MB counts to release the weight of the page so developers can edit the app without performance problems.

Are you talking about bubble icon element that allows choice of multiple libraries or plugins built by 3rd party developers?

Im talking abou the plugins that you install on your app. Each plugin have an icon, right? The icon or “logo” that you see at plugins tab on each plugin (I add a photo).

Well, that icons are loaded even if you don open the plugins tab, and that means some extra MBs on page load at editor. My editor loads almost 10MBs of info. And arround 5Mbs are those icons. Only making them dont load on loading the editor if i haven’t open plugins page, will free half of the page info load.

1 Like

Also talking about performance, i think can be so useful for developers to be able to have a “preload” page action. So for example i could do: When this button is hovered > Preload page “Home”, with this the experience for our app’s users can result on a faster navigation, that allways help to increase retention.

Welcome to the world of Bubble, there is limited native elements and unoptimized plugin load. Either you will have bad UI/UX or poor performance. That air date time picker you have costs 300-400ms, even the element is invisible. And the chart element there by Bubble causes the DOM to load if it inside a group invisible only reason that it is a Bubble plugin.

And don’t expect Bubble to solve this issue, don’t expect neither better native elements nor better plugin optimization on load. The reason for this is that native element thing is beginner unfriendly + they are pushing for Bubble AI and if there is better native elements better Bubble AI results. For the plugin thing, they are aware well over a year and no solution.

3 Likes

Looks like you know very well the performance of some plugins, maybe can we talk to take a look at my plugins list to see if there is some plugins i should remove/change for my app performance? that will be very helpful

You can check it with inspect on dev tools.

Betteruploader is a superior product.

Try not to use front end Bubble plugin.

1 Like

Should we not be using the chart then? I don’t remember if you could set the data source of this conditionally.

When you use any visible Bubble built plugin it loads the parent element where it belongs. Lets say nested group1-group2-group3-group4-group5 + bubble built chart element, it will load all 5 in the DOM. Even they are invisible.

At least it was I don’t know now. I have a SPA and used to use google material icons by Bubble, it was a mess then new icons came.

You should check in a blank page.

1 Like

Just checked it is still there… Classic

incredible that this is not on an optimization manual from bubble

Bubble community is the optimization manual of bubble

looks like that hahaha. Maybe we should do one

Also looks like algolia is runing in run.js even if you dont use algolia

Also lottie animations load scripts even if there is no lotties runing on that page.

That is how Bubble is supposed to work. You don’t want them to load conditionally, or you would have problems

1 Like