How to reduce Workload Units (WU) on page load

Reducing Workload Units and Optimizing Page Load

In this Bubble tutorial video, I'm going to demonstrate one way that you can make your app leaner, reduce your workload unit cost, and cut back on the number of workflows that you have to have on a page or when you're thinking about wanting to display data on a page by default on page load.

Using a ChatGPT Clone App as an Example

I'm going to be using the ChatGPT clone app that we built in a previous video. Basically, I have a list of conversations that I've started with ChatGPT and by clicking on one, it displays the history of that conversation in this rather minimalist chat interface. I can swap between them and I have set up the ability so when the page loads, the first conversation is loaded in.

The Leanest Approach to Loading Data

I'll show you how I've done that because I think this is the leanest approach. I've got a repeating group of conversations, so that is one search that Bubble takes place and does when the page loads. Then I have a page body group here which contains a list of all my chat messages, my multiple input, and my button to interact with ChatGPT.

Utilizing Existing Searches

I say data source repeating groups conversation because that search is already taking place to populate this repeating group. I say list of conversations first item and so when the page loads, this is the source of the data that's going to be put into here. My messages are simply saying conversation equals parents groups conversation and it allows me to easily identify the conversation because the conversation is always page bodies conversation since I've set the type of content to conversation.

Avoiding Unnecessary Workflows

That's the leanest approach. I'm going to now demonstrate two ways or at least two ways that I think you could over complicate this. You're going to end up using more workload units and if you don't need to use a workflow and you choose to, then I think that is clearly not a lean way of developing a Bubble app.

Using Custom States: A Less Lean Approach

Another way that you could do it is by putting a custom state anywhere on the page. We'll say viewing conversation. Then I will now say on page load set state viewing conversation. Remember, these are the not-so-lean ways of going about it. This is deliberately adding in a workflow when there doesn't need to be one.

Repeating Processes and Adding Unnecessary Workflows

I could make this even less lean because instead of referring to a repeating group where search is already taking place, I can do a search here. Yes, Bubble has a number of different optimization steps when the page loads, but I am still repeating a process that's already taking place and I've had to add in another workflow.

Returning to the Lean Approach

If we go back to what I started with, we can get rid of that. We can instead say here that the data source is what I want to appear when the page loads. So I can say look at my repeating group conversations which is here, this the conversations first item.

Efficient Toggling Between Conversations

The clever thing is as that loads in, when I click on a new conversation, here is my workflow. I just say display data in page body because page body is the element on my page which contains the conversation that I'm currently viewing. Even though the default is fetching the first one, when I click on a new conversation, it simply toggles between them.

Conclusion: Developing Lean Bubble Apps

That's one way of ensuring that you develop your Bubble apps with lean development in mind. We've cut back on any unnecessary workflows, we've not had to even use a custom state in order to display data on page load. These are some small ways that you can reduce workload units being used in your app and you can develop your app more leanly.