Refactoring: How we increased our desktop performance by X3

TL;DR: We decided to rebuilt most of the pages in our app from scratch and it created incredible results in the app’s performance.

I wanted to share with you the process that drastically improved our performance.

So a bit about the app, we built a self learning platform that improves with the wisdom of the crowd, and allows you to learn from the way other like-minded people learned.

We aim to help self learners (for example, every Bubbler like you :slight_smile: ) to achieve their goals by allowing them to tap into the knowledge of every other learner that learns the same topic.

We recently decided to redesign and add a few features after getting a lot of feedback from our learners, we now allow people to create their own learning paths and to have discussions on every learning resource, those changes required both a visual redesign and a database restructuring.

Rather than just editing the existing pages, I decided to build new ones from scratch. This move allowed me to do the following:

1. CREATE MINIMALISTIC PAGES

Our DOM size went from 6565 to 334, this was achieved by:

  • Build smarter - Building for efficiency with DOM size in mind helped me prioritize my building decisions
  • **Deleting everything that is not necessary **- As we build our app, things will start to pile up, such as groups inside groups, features we decided to discontinue, etc. Those things will also become burden because other element’s data will start to depend on them. Building things from scratch allows you to add only things that are critically important to have.
  • Build with less conditions, both in workflows and in design. Bubble needs to check each condition and it can slows your app.
  • Separating nested RG into 2 separate RGs and show and load the “inner” RG only after clicking on the main RG cell

2. BUILD BETTER WORKFLOWS

By building most of the workflows from scratch, I was able to see all the mistakes I made when designing the old ones. You won’t believe how many facepalms I did after looking at the way I used to pull data :sweat_smile:

3. USE EVERYTHING I LEARNED SINCE I STARTED

As bubblers we always learn new things, discover new ways to build even more effectively, and solving problems with unique solutions we randomly figured out.

Building everything from scratch allowed me to use everything I learned in those months, it took me 1/5 the time and the results were 3X better.

Hope this helped other founders and builders :slight_smile:

*Would love to get some feedback on our new version, so if you want to try our platform go to https://loru.io/learning-path/bubble-io-building-your-first-app-community-path and reply to this tread / email me on stav@loru.io

5 Likes

Can you elaborate on the value of this?

Sure, for context we had a RG of sections (for every topic in a given learning path), and in each section there was a hidden RG of the section’s resources.

Even with satellite data types to decrease the data load, this RG inside a RG was very heavy on the user side because you would have a RG for every cell in the section’s RG.
So what I did was to change the layout so that we have only a RG of sections, and when the learner clicks on a section a group shows up with a RG of the section’s resources, so we have only 2 RG in the entire page

Old version (sorry for the missing elements we deleted a few plugins):

New version:

2 Likes