Things I've learned while building complex apps

Here are a few thoughts on what causes slow apps. Didn’t quite fit into the DO/DON’Ts. In my view (and feel free to comment), there are three things that cause slow apps, and knowing them may help to plan how your app is built:

DATABASE
The amount of, and complexity of database operations. The logic is straightforward: the more amount and complexity of work you give your database, the less efficient your app will be. It’s my impression (having a little knowledge about databases before Bubble), that a lot of Bubble users are not realizing how much work they’re truly putting their server through. For example, placing a Do a Search For on a page load with a thousand users per day means you’re forcing the database to perform the search a thousand times, maybe even more if the user’s reload the site too. By creating a list of the search, or hiding the content until the user asks for it, etc. you can drastically reduce the server workload. I actually find it easier to think of the database as an Excel sheet. Imagine you have a hundred lines. No problem. A thousand. No problem. But then you have an Excel document with millions of rows with hundreds of columns, and you have one thousand people working remotely on your computer at the same time, searching for stuff in the document. Obviously, your computer would become ridiculously sluggish. A server is a beefed up desktop computer in an entirely literal sense. It has a lot of computing power, but far from limitless.
DEPENDS ON,HARDWARE: Bubble’s servers
DEPENDS ON, SOFTWARE: the workflows and repeating groups on your page
HOW DOES IT AFFECT THE APP: whenever you perform an operation, such as a search, or create a thing, the app will slow down while the operation finishes. Usually it’s not noticeable, but with lots of operations and/or users, you’ll start to feel it. If creating one thing takes 0,2 seconds, creating ten things will take 2 seconds (probably not 100% accurate, but just to illustrate). By finding ways around it or moving it into API workflows, you can make the user experience a lot better.
EDIT: other excellent threads have gone into a lot of detail describing database performance. I recommoned this one in particular.

AMOUNT OF DATA TO DOWNLOAD
This is the actual size, in kb’s of your page. Let’s say a blank Bubble page is a 400 kb download. You write some text, that adds a few bytes. But then you want a nice custom font. That means the font needs to be downloaded, and the file is 100 kb. You just made your page 25% bigger. The page looks better with a nice, fullscreen background image. You compress it from 2,2MB down to 450 kb (nice!), and add it to the page. Compressed or not, the image added just increased download time by 90%. If you have a repeating group of users showing a 100 users, each with a 25kb profile pic, that means 2500 kb extra, increasing the download size another 263%. Big things and small things both matter.
DEPENDS ON,HARDWARE: User’s internet connection speed and RAM
DEPENDS ON, SOFTWARE: the files and scripts that you load into the app (images, fonts, custom scripts, etc)
HOW DOES IT AFFECT THE APP: first time loading, as all the files and data has to be downloaded. Also, a lot of heavy elements can make the user’s browser slow and choppy and eat up lots of RAM, completely unrelated to Bubble’s performance.
Bonus tip: use this site on all your images. It can drastically reduce their size with minimal loss: https://tinypng.com/

RENDERING
The rendering is the actual process that the browser performs, of transforming code into the visual experience that your user sees. The more complex your page (number of elements, number of effects like shadows, animations, amount of data displayed (long lists, etc), the more it demands from the user’s computer in terms of processing and RAM. Once the page has loaded (except for database operations), Bubble’s job is done, and if the app feels slow to browse, the fault is with the design, not Bubble. Keep it simple. When you think about it, most popular tech products really don’t look that fancy. They just work. There’s a reason Google’s homepage is nothing but a small logo, a search box and little text, even if they have access to the best designers in the world. I come from a marketing and design background, and I find it hopelessly tempting to throw myself into a creative bonanza of design. I’ve spent countless hours correcting that mistake by ending up with sites that are heavy to load, sluggish to scroll, not mobile friendly and where design trumps UX.
DEPENDS ON,HARDWARE: The user’s browser, RAM and processor
DEPENDS ON, SOFTWARE: how you design your page in terms of number of elements, effects, amount of data displayed (very long lists for example), size and number of images, icons and fonts
HOW DOES IT AFFECT THE APP: first time loading and continued use such as scrolling, hovering, etc. depending on how your app is built.

30 Likes