How to Improve Bubble.io No Code Performance
Recently I was asked by a client what design considerations she should consider to improve her Bubble.io no code web app’s performance. Now since this question comes up periodically I wanted to share one important strategic tip with you so your Bubble.io no code web app’s performance doesn’t suffer. And in turn, your user’s experience won’t suffer because of poor performance.
The Performance Issue With Using Bubble.io Pages
While there are a few different ways to improve your Bubble.io no code app’s performance, you’ll want to minimize or even eliminate the use of Pages in your design. The reason is because every time your no code app switches from Page to Page there’s an interaction between your browser and the Bubble.io infrastructure. And that interaction occurs over your network and the internet, all of which degrades performance and impacts user experience, particularly if the network has poor bandwidth.
No one wants slow responsiveness from an app.
Let’s walk thru a simple example to illustrate. In the image below you see a Bubble.io no code app with three Pages:
Your “landing” page is the Bubble.io “index” page. Let’s assume after the user logs in they get directed to a “user_page” where they are doing most of their interaction with your app. And you also have an “admin_page” where your user can update their profile, change password, etc. Switching between these pages takes a little extra time for the page to load – a performance hit and not a great customer experience. So you want to eliminate loading those pages to improve performance.
Replace Pages with Groups
The following may require a bit of a “mental mind shift” but to improve your Bubble.io no code web apps performance you want to think of using a Group as a replacement for a Page. So on the “index” page you’d have a Group called “user group” to replace “user_page” and “admin group” to replace “admin_page“. Referring to the two images below, you’ll add Groups (first image) which will show up in your Elements Tree as something similar to the second image.
Below you see the three Groups which replace the respective Pages. The “Login” Group was added to allow the user to log into the app (or create a user account) during page load.
For each of these Groups you will add the functionality which you would find on the equivalent Page. As an example, for “Group User” you might have info on the user’s friends or activities – whatever functionality you would have provided on the “user_page”.
Final Thoughts and Check Out How To Video
Using Groups to replace Pages will improve the performance of your Bubble.io no code app. That being said, you don’t need to consolidate all of your Pages onto the Index page by adding many Groups. Depending on the functionality and user types in your no code app, you may find that certain pages are dedicated for certain user types activities.
For instance if your app is a two-sided marketplace with buyers and sellers, you can have one Page setup for buyers and one Page for sellers. These users will typically stay on their respective page so they won’t normally experience any performance hit. In addition, if you have a lot of functionality for each user type, having a buyer page and a seller page can sometimes keep the design “easier” in your head as you develop – complex designs with lots of Workflows can become hard to keep track off.
Check out the video below which will walk thru this concept of using Groups instead of Pages in much more detail. Try using Groups instead of creating Pages – your users will appreciate it.