Forum Academy Marketplace Showcase Pricing Features

Performance Q&A guide

Most useful topic ever :slight_smile:

4 Likes

Super helpful thread, Josh, thanks for initiating this!

2 Likes

Nice work @josh

In my case for example I have this data types:

  • Users
  • Companies
  • Invoices

So when the user access to his companies invoices he might have about 500 invoices that has to be loaded in a repeating group. In the repeating group there are 6 cells.

The constraints on the “do a search for …” will be, show invoices of:

  • Company = current page company
  • Status = yes

Someone suggested to use in the company a field of a “list of invoices” but the invoices could be more than 10.000.

So what I did is not to load at page load all the invoices, but just 25. The problem is that when the user clicks of see “all invoices” it could take about 3-5 minutes to load them all, right now users have about 300 invoices per company.

I know this is going to be so much better once you get the database performance finished but is there something we could do to improve the load performance too?

Thanks a lot @josh for the time you´re spending with this threat.

2 Likes

Couple more answers:

Bubble apps are limited by the number of workflow runs they use. Or is it the number of times a change is made to the database? If a workflow doesn’t modify the database, like if it hides an element on the page, does it not count against the limit?

Yes, we don’t count workflows against the limit that we can run entirely in the web browser, without talking to the Bubble servers. It’s more than just modifying data that requires the servers, though: logging the user in or out, hitting an external API, etc., all need that. Basically, the only things that don’t need the server are actions that work directly with elements on the page.

Is there a performance difference between navigating to another page in the app using a workflow action vs a link element vs a hyperlink in an html element? Like, maybe if it’s a workflow the page can load only what it needs, but if it’s a normal hyperlink the page has to load from scratch? Anything like that?

A link element will be as fast as a hyperlink in an html element. Changing it via a workflow action won’t be faster, but it might be a little slower – we wait to change the page if there are other workflows that haven’t finished saving data.

Can we profile a page to find out which part of the process is causing the biggest delay? For example, this is a page with a repeating group. Some of the elements populate with data right away, but the same element in another cell doesn’t populate. The rest of the data loads eventually.

Profiling web pages is a complicated subject – can’t really give a full tutorial here. Google Chrome comes with a lot of powerful tools for seeing how things load… there’s an intro here: https://developer.chrome.com/devtools

In the gif you posted, it looks like its the images that’s slowing things down. If you use the network tab of the Chrome dev tools, you can see a) how big each image is, b) when it starts loading, c) how long it takes to load

The constraints on the “do a search for …” will be, show invoices of:

Company = current page company
Status = yes
Someone suggested to use in the company a field of a “list of invoices” but the invoices could be more than 10.000.

So what I did is not to load at page load all the invoices, but just 25. The problem is that when the user clicks of see “all invoices” it could take about 3-5 minutes to load them all, right now users have about 300 invoices per company.

So what you’re doing is a good way of structuring it – if you have that many invoices per company, it’s better to have a “Company” field on each invoice which you filter on… that’s generally pretty efficient. And then only displaying the first few invoices in a repeating group. For “see all invoices”, rather than try to display 300 things on a page (which is going to be a little slow no matter what tool you use), I’d suggest trying to use a repeating group in infinite scroll mode, so the user can just keep scrolling down til they find the one they want. Or, maybe provide them with better search tools to narrow the list down.

5 Likes

To take the same example, let’s assumeI have companies that can create invoices and I only want to show the invoices of a specific company.
So what you are saying is that it is actually more efficient to have a “Company” field in each invoice and then do a “search for…” on the invoices with a constrain on the company, rather than having a “Invoices” field in “Company” that is a list of invocies, and directly display this list without passing by a search ?
Intuitively, I would have think the opposite (using a list you don’t have to perform a search on all invoices, you already know them)

2 Likes

Thanks for your reply @josh,

About that quote, I cannot use the infinite scroll mode because below the table I´ve the totals and it looks really really weird. And sorry to say that but I´ve used other tools like Knack and Caspio and they don´t have any issue even when showing 300 items and more at the page load. They could take about 10 seconds max. But nothing compared to those 3-5 minutes of Bubble.

Anyway I know you´re working on performance so I´m sure it´ll get so much better after the database performance upgrade. But I just wanted to check if there was something I could do.

Thanks a lot and have a good day.

Hi Ryan,

Just a suggestion do you think its the time to create each repeating element and loading that specific data rather than the data its self? Could you run another query and get the :count on that and put that into a state variable and show that and allow the infinite scroll?

2 Likes

@florent.bocquelet, re:

So what you are saying is that it is actually more efficient to have a “Company” field in each invoice and then do a “search for…” on the invoices with a constrain on the company, rather than having a “Invoices” field in “Company” that is a list of invocies, and directly display this list without passing by a search ?
Intuitively, I would have think the opposite (using a list you don’t have to perform a search on all invoices, you already know them)

You’re not wrong. To be more precise, using a list is faster, but having the company field is more scalable. If your list is short – you know you’ll never have more than 20 - 30 invoices per company, for instance – then yes, using a list will load a little faster. However, using a company field isn’t that much slower, and it’ll still be fast no matter how many invoices per company you have, whereas the list will start slowing things down once the total number of invoices goes beyond the number you actually want to display at any one time.

@ryanck

About that quote, I cannot use the infinite scroll mode because below the table I´ve the totals and it looks really really weird. And sorry to say that but I´ve used other tools like Knack and Caspio1 and they don´t have any issue even when showing 300 items and more at the page load. They could take about 10 seconds max. But nothing compared to those 3-5 minutes of Bubble.

Yeah, 3 - 5 minutes for 300 items is slow for Bubble, too :slight_smile: . There’s probably more going on than the sheer number of items in that case.

Anyway, the total time is equal to 300 multiplied by the time it takes to load each one. So if the time it’s taking to load each one is high, things can get slow very quickly. Generally it’s easier to squeeze down the total amount, but if you want to display 300, (although chrisloarge305’s suggestion is worth considering), you need to make sure each one loads very quickly. On that front:

-The number of total elements in each cell of the repeating group controls how much javascript time it takes to render them. If your browser freezes while the page is loading (ie, scrolling up and down don’t work), you’re probably hitting a total number of elements issue, and the thing to do would be to reduce the elements in each cell.

-If your browser is not freezing (you can freely scroll up and down while it loads, animated loading indicators continue to be animated, etc), check to see if each cell uses any data beyond the invoice itself. If each cell contains a search that’s based on data from the invoice, you’re doing 300 searches all at once! Or if you’re getting sub-objects of the invoice, like the invoices’ line item’s … etc., that’s also loading additional data for each cell.

3 Likes

How about store the reference to the final thing in each other thing?

hahah. yes @mishav quite the ‘cat in the hat’. There are elements, molecules, reactions, compounds, reactions…I was not storing electron, proton, weight, etc. anywhere else except at the element level.

Thanks for your reply @josh

Well in each cell I just have 1 text element, that for 6 columns and other cell with a text and an icon. I´ve tried deleting the icon to see what happens but it takes the same time to load all data. And no, the page does not freeze while loading.

I just have the invoice data on it. No invoice line item´s.

With this information, what do you think?

Thanks a lot for your time @josh

What I think is… you should probably email us at [email protected] with a link to the page and any instructions we need to be able to reproduce the 3 - 5 minute load times (passwords, etc). It doesn’t sound like any of the common slow-performance patterns are going on, so we probably just need to take a look to see if there’s something we’re missing.

1 Like

I’ve got the exact same issues with many users through Google login after 24h. Would it be possible to refresh the access tokens in the background? So users stay logged in.


Next to that, I’m wondering how the auto-binding works. If users fill out multiple auto-binding input fields after each other, it doesn’t save all of them (see GIF below, field nr. 3). When the input is given a bit slower, all data is actually saved in the auto binding field. Is there any way to improve the speed of auto binding or should I just disable it for this case?

1 Like

I have another performance question:

If I have a reusable element that has a popup that shows when clicking some button.
If I then use this reusable element in a repeating group, that will display 100 elements.
Will I get 100 copies of the popup code, or is it optimized in some way ?

@josh I have an opportunity to pre-process the stuff I upload. I can extract all of the words from various different fields and duplicate them into one field. That field will contain each unique word that appears anywhere in the project.

Will that make it easier to search the entire project for the occurrence of a word? If they’re all in one field?

Would it make a difference how they’re delimited? CSV? new line? just put a space between them?

@bubble5 @JohnM – we found the issue with Google login getting logged out after 24 hours, and deployed a fix, so this should be working now.

@bubble5 – the autobinding thing is a little strange… it should save all of them no matter how fast you type. When I build a test page for myself, it works. If you keep seeing this, it might be a specific bug with what you are doing, so feel free to send an email to [email protected] with reproduction instructions.

Yes, we only send one copy of the popup code. (We do have to run it 100 times, so it’s not free, but it’s a lot less expensive than having 100 separate popups).

So, we actually already do this behind the scenes :slight_smile: . When you build a search with the “Any field contains” constraint, it’s searching on that combined field. So, I’m not sure there’s really a point in you doing it yourself, unless you want a field that contains some fields but not others.

3 Likes

I have been experiencing this as well, it significantly impairs the UX as the user 1 out of 3-4 times has to re-type what he just typed

Thanks for your fast fixes @josh, amazing!

I’ll make a special page and send a bug report :slight_smile:

1 Like

@josh I too have been experiencing this and had to choose not to use auto-binding due to it`s buggy behaviour. At least when typing fast after element initializing and pressing enter fast again.

This is something I have been experiencing as well. As far as I remember, it didn’t seem to me to be linked to pressing enter fast or not, but rather than when you modify a field, it takes some time to update it in the database, and when it is done, it resets any field you were actually modifying. So you have to enter text, wait for it to be synchrnoized with the database, and only then you were able to modify other fields.

@josh To further clarify which workflows count, if a workflow gets a piece of data from the database, but doesn’t change anything in the database, does that count? Like if I store a start time on the server and sync the client every minute (in case the client’s browser refreshed and emptied out its data) does pulling that start time down to the client’s browser count as a workflow?