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
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.
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.