Bubble is too slow on SPA, is there anything i can do for speed up the page load

i am creating app as a SPA.

When I open the app, it works fine at a very reasonable speed.
But it takes 30 seconds to open the app.

スクリーンショット 2021-11-27 13.57.51

I’ve seen a topic in this forum that setting up CloudFlare makes pages load faster. Should I set up CloudFlare?

Also, is there any other way to speed up the page load speed?
I want the page load speed to be 10 seconds or less. It’s best if it’s less than 5 seconds.

Lots of discussions on this. There is an e-book available on performance as well.

One thought too is to consider the perceived speed and add a loader screen.

Check the developer console to really see what takes so long loading.

  • Too big pictures?

  • To many plug-ins (javascript)?

  • To much data not lazy loading?

There are many ways to optimize.

@Sarah_Biberei
@boston85719

thank you for reply.

I tried to find out the cause of the slow page display with Chrome Developer Tools.

During the first second after the page is loaded, several script files and other files are loaded.

But after that, nothing is loaded for about 30 seconds. After about 30 seconds, it seems to be fetching information from the BUBBLE database.

Is this a bug?

Does anyone know why there is a blank 30 seconds?

1 Like

Cloudflare is automatically used in Bubble; you don’t need to set it up.

If you dig around in the forum you’ll find posts on others debugging speed issues, and you’ll likely find insights in them. Problem usually is: a) they are trying to download crazy amounts of data; or b) a buggy 3rd party plugin.

I suggest duplicating your app page and then deconstructing it. Remove something and test, and keep doing this until you find the issue. I would start with removing 3rd party plugins.

And when you build – always test every single time you add something. That will prevent you from being in this situation in the first place.

i did it.
i removed all 3rd party plugin.
Page speed didn’t get any faster.

I tried deleting half the elements and it got faster.

But I don’t want to remove any elements because I want to build an app with SPA.

@yuta So when the Bubble Page loads, all the elements (all the visible + invisible) load first, and also if you are using the custom font, then also Bubble fetches the custom font file.

So to summarize, even before previewing anything- Bubble will load-

  1. All the elements.
  2. Custom Font File
  3. All the Plugins required script.
  4. All the required data from the database.
  5. Option Sets data.

thank you for reply.

this mean,
Even if “this element is visible on page load” is not checked for element A, will BUBBLE still load element A?

I don’t understand custom font very well.
i am using this font. is this custom font??
↓↓↓
スクリーンショット 2021-11-28 0.04.54

could you teach me what “Option Sets data” is?

By the way, removing most of the “Do a serach for” in the page didn’t change the page speed much.Before I removed them, it took 30 seconds for the page to load.
↓↓↓↓
Loading speed after deletion
1st test : page is loaded after 29.409 seconds
Second test : page is loaded after 30.933 seconds

However, when I removed the 33 popups that existed on the page, the page went about 10 seconds faster.
↓↓↓↓
First test : page is loaded after 23.569 seconds
Second test : page is loaded after 20.381 seconds

Yes, All the elements, Even you have not checked "this element is visible on page load”.

As shown in the picture, you are not using the custom font. ( What is the custom font- Using the font that is not available by default in Bubble) .

Option Set-

image

You usually use the Options set in holding the dropdown data and there are some other use-cases is also there.

Yes, Pop-ups also count in elements.

BTW, my suggestion will be, keep the dashboard page lean as much as possible (in terms of element). Instead of SPA, Create 3-4 pages- divide based on the usages pattern,

This topic was automatically closed after 70 days. New replies are no longer allowed.