Performance Q&A guide

Tips
21

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.

22

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
23

@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
25

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.

26

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

27

What I think is… you should probably email us at support@bubble.is 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
28

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
29

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 ?

30

@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?

31

@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 support@bubble.is 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
32

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

33

Thanks for your fast fixes @josh, amazing!

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

1 Like
35

@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.

36

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.

37

@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?

38

Okay, sounds like there’s a widespread issue with auto-binding… will try to look at it this week.

@blueback09 – Yes, we do not count fetching data from the database to the web browser as counting as a workflow run. So a workflow that has one action, “show an alert”, and shows the result of a new search in that alert, should not count as a workflow run.

In general, if you have a question about whether something counts, I’d create a test app that no one but you has access to, try running the workflow 5 times, wait a minute or two, and see if the workflow count goes up.

1 Like
39

What about searching the fields of a thing that’s related to the thing I’m searching?

Example:
thing Parent
field Child (list)
field Whatever 1
field Whatever 2
field Whatever 3

thing Child
field Something 1
field Something 2
field Something 3

Is there a way to automatically search the contents of both the Whatever AND Something fields? If I wanted to search all of them would I have to manually create a field on the Parent thing with the contents of the Something fields?

40

Wondering what is more performant and if anyone has thought through the tradeoffs in how you would structure the following:

Option 1: Create a single “Do when condition is true” workflow that fires when any 1 of 9 items is true (i.e. A>1 or B>2 or … I>1), then update 9 fields within Current User, or

Option 2: Create nine “Do when condition is true” workflows that fire when a single condition is true (i.e. A>1), then update 1 field within Current User

Option 1 will run 9x as often as Option 1, but if it is infrequent enough what are the tradeoffs?

Specifically, I’m wondering:
Is there a difference in speed to write one field to the database vs multiple?
Which of these causes a larger page size (a consideration especially for mobile apps)?
Which would tend to have the best on-screen performance (be less perceptible to the users)

-John

41

I was wondering: if I put a condition on an element such as “item A is visible OR do a search for Thing:count > 0” for instance to show an element when this condition is verified.

  1. Will it first test the condition “item A is visible”, and if true, show the element without oing the search ?
  2. Is it better in that case to put the “do a search for” in another conditional so that the element is displayed as oon as one of the two conditions is true ?

Thanks

42

This thread is super helpful. Some of the points above were a bit counterintuitive, so these detailed explanations about what is happening on the backend are very helpful.

I am looking to reduce the page load time for our mobile app and have been using Chrome inspector to get a better idea what is going on.

I’ve read through this thread and tried to implement many of the things discussed above and have seen significant improvements (scripting time dropped from 11s to 5s.

However, the page seems slow to me and I’m curious what times others are seeing for single page, mobile apps.

Our app currently runs approximately 5000ms of scripting during page load. The biggest “problem” for me is that all of that time is spent showing a blank white screen with no indication that anything is happening on mobile. I’ve tried a variety of different things when “page is loaded”, “page is fully loaded” etc and haven’t noticed much change.

I’ve also gone back and removed all unnecessary plugins.

This page has 438 items hidden by filters according to the inspector, but I have no idea if that is reasonable or not.

5 seconds is slower than we’d like, but would probably seem much more tolerable if we could show some indication that something was happening earlier. Is there an easy way to add a lightweight element that can be displayed initially? Is there anyway that the “when page is loaded above the fold” can be used for mobile apps? Can someone explain to me a good way to use that? With a page height of 640, my entire app is above the fold.

Thanks in advance for any tips or suggestions.

1 Like