Improve Performance in Bubble with these 6 Useful Tips

Performance in Bubble can be a daunting subject if you’re new to it, but there are actually easy steps you can take to make your app load fast and run smoothly. In The Ultimate Guide to Bubble Performance, we go over Bubble performance in-depth on over 200 pages, but this guide gives you a quick overview of some improvements you can make today.

Adding too many images

Images is the simplest and fastest fay to increase the total download size of your page. The easiest way to solve it? Don’t use them.

Oh, ok, sometimes you have to use them – they can make your app beautiful, useful and informative. But make sure you use them in the right way. Keep them small in size, find the right balance between Photoshop compression and lossless compression and keep an eye on their size in the network tab of your browser – keep in mind that putting images into Repeating Groups can quickly multiply their size.

Adding too many elements to the page

Every element that you add to your page increases the number of DOM elements. Your browser needs to apply styles, calculate size and placement of each one and render them as pixels on the screen, and each added element makes that workload a little bit bigger. Repeating Groups and huge Single Page Apps is the quickest way to increase element count, so keep an eye on them and don’t show a limitless amount of rows if you expect your data volume to grow. Chrome DOM counter is a useful extension to keep track of your total number.

Keeping unused fonts, icon libraries and plugins around

Fonts, icon libraries (which are also font files) and plugins can add to the total download size and number of server requests to your page, slowing it down. Even if you’re not consciously using them on the page, they may be downloaded as a needed asset. Use the Chrome network tab to identify files that you don’t need and what kind of font files and Javascript libraries they are loading.

Using Chrome devtools to improve Bubble app performance.
The Network tab in Chrome can let you easily identify unnecessary downloads like fonts.

Setting up complex searches

Complex searches, especially as you start using the :filtered:Advanced filters expression can seriously start to slow your loading time down and affect performance in Bubble. The longer you make the search expression, the more difficult you are making it for Bubble to serve it as a single query performed on the server, and you risk moving parts of it client-side. This may be unnoticeable at first, but will start to slow your app down as your database grows. Also, always plan your database structure with Privacy Rules in mind.

Setting up heavy Data Types and loading all of them at once

What adds Data Weight to a Data Type? Long fields of unstructured data like articles, blog posts and notes as well as containing long lists of other database Things can quickly add to the total download size of each record: even an innocent kilobyte or two multiplied by the number of records you return in a search can add up to megabytes of data being downloaded. Again, keep an eye on the Chrome network type and look for search and msearch rows – there you’ll find the total download size and time it took to download all the data.

Running complex workflows on the page

Make changes to a List of Things is a great feature – for a short list of Things (it’ll start to slow down with a few hundred Things) – consider using back-end workflows and optimally Recursive Workflows for any workflows that involve a big number of records or where the workflow itself is particularly complex. This way you can hide to the user how big an operation you’re actually running and even track the progress of the workflow to finish.

The Make Changes to a list of things in Bubble can slow down Bubble performance.
Make changes to a list of Things is a useful feature but can slow down if you give it too much work to do.

Performance in Bubble is an ongoing task

Lastly, keep in mind that performance in Bubble is a war of a thousand battles – each thing you improve is not likely to make a night-and-day difference, but keeping a constant keen eye on your decision making as you set up your app will make a difference. Also, don’t make it an obsession: your job is get your app to the market, not to spend months obsessing over milliseconds of performance improvement – keep your eye on the goal and find the right balance.

Our book The Ultimate Guide to Bubble Performance offers more than 200 pages of knowledge on how to improve performance in Bubble. If this article helped you out, you can help us publish more articles in the future by buying me a coffee.


More Posts

Understanding Bubble Groups

Bubble has five different group types. While they’re all used as containers, their use differs greatly. This article explains the difference between them in detail.

Bubble’s new expressions: SPLIT BY and ARBITRARY TEXT explained

Bubble quietly launched two new features in July 2021 that are quite useful: split by and arbitrary text. They’re both expressions that solve tiny problems that otherwise would require cumbersome workarounds, and are absolutely worth checking out. You’re not gonna

Combining icons and text in Bubble

Placing icons inside of your text elements by using BBCode is a quick way to reduce the total number of elements on your page and make sure your app runs smoothly. Read on for how to do it.

Leave A Reply

Your email address will not be published. Required fields are marked *