Share Your Bubble Speed & Optimization Tips

My Bubble app, https://app.balancepro.io, is getting many complaints about it’s slowness. The biggest complaint is not a particular action/workflow, it is page loading speed.

I need to figure out ways to optimize my app to load much more quickly. Some quick info on the app:

  • I’m on the $129 Professional Bubble plan
  • 96% of users are on a smartphone
  • It is a single-page app not using the responsive editor

What tips and tricks do you have for speed optimizations?

Have your users shared where things are annoyingly slow?

With a single-page app, could it be the initial page load?

If not, my best guess is that you have some crucial workflows happening client side that could be running in the backend, which would not impact the UX.

I think it is upon initial load and sometimes I get reports that they get nothing but a while/blank screen.

I’m wondering if there is an easy way to separate my single-page app into multiple pages.

Ya, I just tried creating an account. I added a checking account to my profile, which then directed me to a blank screen. That feels like it may be a development error.

There’s no simple/easy way to break out a single-page app into multiple pages, but it’s a worthwhile exercise if that’s the issue.

I’m afraid you would need to rebuild them into new pages if you want to “separate” them.

I haven’t created an account in your app but off the top of my head, I’m guessing you are not using any loaders, if not, I suggest you use one. There is a difference between actual performance and user perceived performance. I also suggest you remove unused plugins since they also add weight to your app.

This could also be the issue as well

I added a page refresh once you add a new account, so that may be where the issue is. I added this refresh because Bubble wouldn’t always update the total at the top of the page. I’ll look into this.

Thanks! Yes, I think UX wise I should add some loaders in key areas.

Hey @jordanryankennedy_as I’ve encountered this on single page apps, where there are several inputs or repeating groups hidden in the background on other page elements.

Take into account that even though elements like those aren’t shown, the searches to fill them are still happening in the background. What I do to reduce the amount of searches on initial load is to set the data source to be empty like this:

image

and only populate when the condition to show the parent element is true.

image

Try this out, it might help.

3 Likes

Oh, awesome! That’s a great tip!