Page Load Speed Help!

Need help
1

Hello! My Bubble.io is a complex app and I don’t know how to improve the speed.

Well I know how, from my actual testing it’s the number of elements on the page…

But I don’t want to remove elements and workflow functions, so not sure how to solve…

I want to keep everything on a single page b/c it’s mainly a mobile app so switching between pages would be slow.

If you know how to improve speed without removing things, please let me know!

Thank you!

PS: So far I’ve tried:

  • Made all fonts and icons into styles (slight improvement)
  • Removing workflows that happened every X second (not much effect)
  • Removing page load workflows, etc. (not much effect)
  • Data not being loaded until certain conditions met (not much effect)
  • Adding capacity ( no effect)
  • Make images smaller (small effect)
  • Don’t load groups until needed (already have)
  • Removed all plugins (small effect - but I need those plugins…)

Again the only time I get fast load times are when I delete 80% of my app elements, lol.

Right now I average page load times of:

  • 10s seconds desktop
  • 12s mobile browser
  • 16s mobile app wrapper

Any help is appreciated!

I’ve bought the speed book, looked at bubble’s speed tips, airdev speed tips, and read everything I can about speed, slow, that I can find on this forum.

Even if I optimize everything perfectly, and I just have a lot of elements and WFs b/c it’s complex one page app, is there just nothing I can do to increase speed :frowning:

Thank you!

PPS: will to pay anyone that can actually help as well.

2 Likes
2

Are you using plugins with a lot of overhead?

Many plugins add headers that make pages heavy

One solution could be using a loading icon

You may want to consider splitting your app into modules unless there is a need to move between everything at all times lightning fast.

That’s a long wait time though. Could lead users to get off the app.

With a wrapper, anyhow, you could use a lottie file and add loading messages like Sim City used to. “Reticulating spline”

1 Like
3

I’m in the same boat.

1 Like
4

Yes, just edited what I’ve tried, and I did try removing all plugins and it had a 1 or 2 second improvement compared to like a 10 second improvement went deleting majority of the elements.

I do use a loading gif when my mobile app is loading, but 16s still long, and can even take 30 seconds on my other phone to load it initially.

Modules meaning different pages right? Yeah it’s mainly a mobile app. And yeah I do load/show only what I need, like 1 to 3% of the total elements on the page at a time, but it seems even things that aren’t loaded on page load still take load time…

Thank you for your response!!! Hopefully I can solve this…

5

Yeah it’s like you research and do everything by the book(s), but it’s hard not to have a lot of elements to have a lot of good features… not all apps are simple… :confused: hmmm

6

Having similar issues, extra capacity does the trick for me but it’s just too expensive. Bubble is extremely unaffordable for complicated applications, I get the feeling that they upcharge to an extreme.

2 Likes
7

@Drahgoone Interesting! I tried adding 7 capacity multiple times and it did absolutely nothing from my testing. I’m about the only one using the app, and from my back end stats, my capacity is not getting hit (not even close). It’s just a lot of elements it seems even though they aren’t all loaded they all add up time in loading. I wish I could pay for something to increase speed, but doesn’t seem like a option.

Even what I read on having a dedicated IP doesn’t make it faster per say, just not effected from others high usage or something like that…

8

I am wondering 3 things)

1: do you have any preloading of data or multiple data calls occuring at the same time? i.e. are you trying to load several types of things at once?

2: is there a way that you can break your 1 page app into smalerr chunks? This is obviously not ideal but, say for example, if your user is likely to use %50 of the app on a regular basis but not the other 50, you might consider moving the less used 50% to its own page.

  • sure this increases load times between screens but if you only go to that other screen every other day or whatver it wont be a big deal.

Like facebook is a 1 page app for a lotta stuff but eventually it loads other pages or areas of the app like when i want to view my facebook business page settings

3: are you using popups with content. it’s my understanding those load thier data before they are ever visible.

2 Likes
9

Thank you and great questions:

1: do you have any preloading of data or multiple data calls occuring at the same time? i.e. are you trying to load several types of things at once?

I have like sections of the app/page, so I’m only loading data based on what section user is on:
It’s an service/job offering app:

image
image361×642 39.3 KB

But this does have a lot of data used per say; users search filters, the job/service offering, list of tasks.

I only load one at a time in this case and not full list.

A DOM chrome plugin does tell me I load 900 elements on this page when loaded. And there are conditions in the RG what to show, and formula to show how long ago it was posted, etc.

2: is there a way that you can break your 1 page app into smalerr chunks? (seperate pages)

2: Good idea take non used items to different pages.

I get Facebook goes to another page on desktop, but do they do that on mobile app as well?

My main sections are posts, feed, messages, metrics, notifications, and profile, which the user does switch between them quite often.

So not sure if I could move enough stuff to another page and that would make sense/help.

3: are you using popups with content. it’s my understanding those load thier data before they are ever visible.

Yes I do have a lot of pop-ups.

image
image219×957 21.9 KB

I was unaware popups load data before they are visible… I will have to try deleting them all and seeing if I can observe a speed increase!
I wonder if putting them in different types of groups would make it faster, b/c again I use all the stuff in my app, so wondering if putting them in a group somerwhere else (non loaded of course) would still slow it down, but if popups do make it slower then having it in a normal group then that could be something!

Thank you!!! @jared.gibb

1 Like
10

Happy to take a closer look into your app. Is it fine we can connect over zoom and checkout your app?

1 Like
11

Yes I’m refining some things now, like I noticed I’m doing to many calculations with filters, so making it a more simple… so will be in touch soon thank you!!!

2 Likes
12

Are you using Pop-ups for notifications? Say for example if A user deletes a thing, in the workflow do you have a pop-up that says “User has deleted thing”?

Also I may be in the minority, but my app seems to be 2x faster on mobile than desktop, but my entire app revolves around a single calendar and I’m guessing that would be the reason why, but I’m not getting 10+second load times on either mobile or desktop, usually it’s around 2-4 seconds.

13

Not sure if you already know, but I totally recommend you check the following – really helpful stuff!

https://docs.airdev.co/bubble-development-guide/steps/develop/optimize-speed

14

If you post your site we can take a look and make suggestions. Might just be general performance improvements.

1 Like
15

Hey @oiplive , 1page is the way for mobile. Performance depends not in capacity only which is what many think. It’s got to do with AWS, Bubble engine, Client hardware, how you set up the app and psychological factors.

Create loading screens, Don’t download all data for Repeating groups, go modular (triggers, custom events…), use Backend workflows, avoid conditionals but especially advanced searches, etc.

I suggest reading Bubble performance by Peter Amlie.

1 Like
16

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