5 performance tips for structuring your Bubble app

Structure Your Bubble App for Performance

Here are my five performance tips for structuring your Bubble app. We won't just be focusing on users but also about you using the Bubble editor. Now before I launch into that, if you're learning Bubble you're watching this video but we've got hundreds of other Bubble tutorial videos just like this one and you can find them at planetnocode.com.

Use Rows and Columns for Page Layout

First of all, I'm going to talk about structure in regards to page content. When you create a new page in your Bubble app for some bizarre reason perhaps so that it's backwards compatible in some way, the container layout for your page is fixed and if you've watched any of my other videos you would have heard me say that fixed layout is... you should avoid it. You should avoid it unless you are really quickly mocking up something on a page to test the workflow or test an idea. You've got like an experimental test page, fine leave it as fixed but every page that you really intend to work with in your Bubble app you want to ensure that you're using rows and columns.

Benefits of Using Rows and Columns

That simply means that when you know Bubble's are no-code tool, when Bubble generates the website and the web page with the HTML and the JavaScript and the CSS that is displayed and rendered by your users web browsers rows and columns fit much more neatly into a more standardized kind of best protocol way of laying out content on the web. Some things that I've noticed is if you leave it as fixed you might find that some things don't appear on the page when you think they should or things overlap or most certainly a fixed layout will not help you achieve a responsive design. So end of my tip one rows and columns and if you want to learn more about rows and columns you can go and check out some of our earlier videos on that content.

Avoid Fixed Width for Responsive Design

That's moving me on to fixed width so what I mean is let's turn this into a column and I'm going to add in a group and again it sets it up the container layout for the group is fixed and so we can just see this group a bit more easily let's just change it to red. Okay which limits our options we want more options so for example if I change its column bam suddenly the layout option contains many more and like I say it contains many more of the standard web practices like margins and padding but also it basically sets the width of that element to however big you drew it on the page to begin with so let's say I set this to 800 and that looks really good that's going to work for my desktop user but the problem is that I've set the width as 800 so that when I shrink the page down in a responsive mode my element over spills the page when the page is less than 800 width so a better way to do this and while making it still look the same on desktop would be to not have a fixed width and but have a max width so now it's not going to get bigger than I expect to see it that I see it in the Bubble editor as I'm building my app but when the page shrinks down it basically adopts 100% of the space much more responsive.

Understanding Type of Content in Bubble

Tip three is type of content so let me get back out of the response relative this is one that in the last week alone I've seen confuses a lot of people come to Bubble people that I've done one-to-one calls with with Bubble coaching and this confuses them which is on a page you have this type of content and this will give you a list of all the data types you've got in your database now I've got a lot here because this is an app that I've used for many many Bubble tutorial videos but effectively if this page is say a dashboard on my site then I probably don't need to set a type of content because the dashboard pulls in many different data types and it's more of like a summary page it's like a dashboard this could be thought of as a summary of lists shown on the page we're not talking about a particular entry of a particular data type in the database however if we are talking about a particular entry of a particular database for example if I had on a different page a list of contacts and then I had a repeating group that's my list and I click through and I want to view a page about one contact then this is the perfect use case for type of content because now when I navigate this page if I use a link or if I use a go-to page workflow action Bubble is going to insist that I provide a single contact from the database to link through because this is like think about like a master slide in powerpoint or it's a template basically it's a template of my way of showing a single contact and I'm pointing that out because if you don't get that then and this is a complete mess because once more I've used this for many many demo videos but you might think that you have to create a page for each contact no you create a single page that's your template and then so for example if I add some text here I can tap into current pages contacts first name and so now whichever contact I send through to this page I'm going to print the first name and you're not limited to just showing things about this data type for example if a contact had a field which was also a data type of like business or organization I can of course fetch data from that business and organization and show it on this page.

Limit Groups on a Page for Better Performance

Try to limit the groups on a page so I've noticed the trend and I'm going to underline this because it's it's a personal preference it's how I like to work it is not like a black and white thing but one page apps have become very popular and my main reason is I don't get that because I think that if you're building an MVP if you're being a bit scrappy if you're being a bit lean in your development then it's great to look at the big players and basically copy how they approach that that that extends to you know somewhere like HubSpot is going to have a real A/B tested a really amazingly winning marketing landing pages you can take a lot of inspiration for what from the way that HubSpot designed their website and I think the same applies for SaaS apps and in my experience most SaaS apps because you're accessing them through a web browser I don't think there's an issue with people expecting that the app should load to a new screen because people click a link on the internet and they expect there's going to be you know everything goes to white and then everything loads back in and internet's of course got quicker and quicker over the last decades so I don't think that you know thinking about the likes of your Facebook, Intercom, I'm not sure about something like Salesforce these apps that are used by hundreds of thousands of people they've not concluded that has to be a one-page app for their user experience and the reason that I'm bringing that up is that in Bubble if you keep adding in you know you're adding in group after group after group yeah you've got the elementary here and you can easily go down it and then if you want to find a particular item in the elementary and you can't see it let me just minimize this you can always do reveal in elementary and it pops it out in the elementary for you it slows down the development it makes it so much harder to find the things that you're working on and it also and I saw someone commenting about this on x earlier today there can be a real issue with ram and browser and using the Bubble editor if you have too many elements on the page that will depend on what device you're using but it's just worth considering now my fifth point is going to be an exception to this which is make good use of reusable elements.

Utilize Reusable Elements for Efficiency

I've just done a video in the last few days about how reusable elements have been made more powerful because now you can pass data into a reusable element and you can pass data out of a reusable element so a good example of a reusable element would be something like a navbar or you know you can have that across the top or you can have it down the side and if there are any workflows that you need to run on more than one page and they're basically identical apart from the data that's going into them then you could put that workflow in that navbar as a custom event another great example of putting workflows in a navbar is the let me show you here on the page is a user is logged out and then you can say go to page and we can take it to index so you can have a navbar that you put on every single page of your Bubble app that is for your logged in users only so if anyone tries to access that url you have the workflow in the reusable element and so that way you just know it's going to fire it's going to take effect on every page that you put that reusable element at navbar so there you go there is my top five tips for structuring your Bubble app for performance if you think I've missed anything please leave a comment down below as always please like and subscribe this video we're really encouraged and it's amazing everyone who has followed us on this journey the last few years and we love and appreciate your support.