Hey Bubblers. I recently converted my app to a Single Page App (SPA) because each page was taking 3-5 seconds to load previously and customers complained about slow navigation.
Now, the SPA is taking 10+ seconds to load each time. A lot of that load time is also a white screen which is a bad experience and leading to new complaints.
I’m looking for a Bubble Pro for a short-term project (5-20 hours) to:
Inspect app to find what is causing the app to load so slowly.
Implement changes to speed up page load speed.
Add loading animations where needed on RGs so customers don’t complain.
I am paying up to $100 per hour depending on expertise. Please DM me if you have helped with these types of problems before. Would like to know of previous examples of projects you completed like this. Please include your hourly rate.
Nothing too significant yet. A few of the experts I talked to were backend focused but said my DB and searches seemed pretty fast so it wasn’t that. It’s a frontend focused problem.
While I did a few things, one big thing was not sending data to each of the reusable elements I use for each page in the SPA. That provided biggest boost to page load so far.
Other things involved using debug mode and running step-by-step to see each action that ran on page load. There were a few reusable elements that had “Page loaded” triggers that I changed to “Do when ThisCustomDefinition is visible” instead.
I think I got around a 30% decrease in load time already but definitely looking for more.
It’s hard to say until I look into the backend and run the app with the debug mode turned on etc.
Although, looking at the report, I can see a couple of initial places to look:
You have A LOT of plugins installed, and it’s blowing out the codebase that needs to load when you app loads in the user’s browser. My advice would be to first see whether there are any plugins installed that are unnecessary, whether there are any that duplicate functionality or whether there are plugins that are fairly large and you only use them for small function. There may be opportunities to replace those underperforming plugins with a snippet of code or build the function that they do manually to stop loading all of this third-party code.
While less impactful, I can see that you are loading a lot of different fonts. This is an easy win and you should aim to load as few fonts as possible - i.e. 1-2 only. Every additional font family you load adds to load time. Either you have used a lot of different fonts in your app, or you have a lot of styles set up that use different fonts. Even if you don’t use a defined style in your app, it still loads every time your page loads, and if it’s requiring a new font, that will be downloaded too!
The way to get your app loading faster is likely going to be a number of small modifications that will add up to a much improved load time. Once there’s no more meaningful optimisations to be had, then the focus can shift to increasing perceived load times by being thoughtful about when you load certain aspects of the app, what animations you put in place to provide user feedback etc.
I know you have also just gone from a multi-page to SPA. But in most cases the right answer is somewhere in between. i.e. what typically works best is to group functions together and only load those screens that users will likely use together. i.e. loading the settings page and all of the functions to update the user’s profile every time they go to respond to a message adds unnecessary weight to the page for something that will be seldom accessed by users.
A great place to start might be to book one of my Burst my Bubble services, and then from there we’d be able to discuss implementing some of the insights gained through that review. Here’s a post from earlier in the year where I launched that service
Josh @ Support Dept
Helping no-code founders get unstuck fast save hours, & ship faster with an expert on-demand
do you ever have: do a search for:filtered
or do a search for:filtered advanced?
remove those by altering your database.
do you have nested reusables or nested repeating groups? try to avoid those. Bubble is not an amazing do it all tool.
do you use styles? use those everywhere.
do you have images? use tinypng beforehand to reduce size
in case you did not know many plugins just make api calls ie circumvent by using api connector and then the api call just triggers if a button is clicked and the plugin code does not have to be loaded on every page load
have you turned on the experimental setting under feature settings and versions to increase performance (only available if using new responsive). this really helped me.