Investigating Slow Bubble Page Loads - Rendering vs Dynamic Data Dependencies

Need help
1

Hey all!

My issue is slow page loading. Iv’e optimized many many things but still it endures. My Frond end is build with Bubble and my backend is built with Xano.

I analyzed the front end loading slowness (with Sentry) and see that the reason might be with UI elements which await data from the backend (I have one main backend API for all data)

My planeed solution is to put all ui elements inside a group which will be visible only after data finished loading but I really want to understand better the mechanism of bubble rendering the UI, so my questions are:

  1. Will rendering get stuck if ui element has a condition based on dynamic data which didnt arrive yet?
  2. Will rendering get stuck if UI element has a data source based on dynamic data which didnt arrive yet?
  3. Workflows that arent triggered on page load but do depened on dynamic data that didnt arrive yet can slow page load?
  4. Disabled workflows that depenet on dynamic data that didnt arrive can slow page load?
  5. Any other considerations to take in mind?

Thanks!

Omer

2

The task of rendering a Bubble app into a page with data goes something like this:

CleanShot 2026-03-11 at 10.01.53@2x
CleanShot 2026-03-11 at 10.01.53@2x1926×1086 152 KB

The easiest part to control is data fetching - what data, how much data you’re fetching, and if you’re using an external backend, how you’re fetching it.

The steps before that are a little more opaque. You can get a faster LCP by ensuring most of your elements don’t depend on data. Suppose your main dashboard checks Do a search for X:first item is not empty before displaying. That’s going to block all child elements from rendering until that data is fetched.

Then, if you have other conditions dependent on the visibility of that element which also fetch dynamic data, those can necessarily only be fetched in sequence after the previous data is loaded. That can add up to create slow page load times.

3 Likes
3

Thanks!

That makes a lot of sense for me.

I will block the main group untill relevant data is loaded to try to shorten LCP time

Do you maybe have any other tips beside that regarding loading times? My app is a Single page app with multiple reusable elements as pages and other reusables nested inside them. Its not super complicated but does have a lot of elements

Also, do you know of any way to measue the app size? like json file and all the stuff in it? I wonder how big/complex my app actually is

Thanks again!

4

Are you usingte Xano plugins? This mostly use frontend to fetch data (but handle security in backend). This will increase speed but also reduce WU.

1 Like
5

Yep Im using the Xano Connector plugin just for that :slight_smile:

1 Like
6

But why are you using a backend WF to retrieve data? Can you explain your settings ?

7

Im not using backend WF, Im only using Xano as my backend

1 Like
8

The way we solved similar problem was to draw each component in the page, write down the data they absolutely need, and load that data from an individual endpoint.

If you use one fetch for all, that would be a problem. Even if you have same data needed in many places (e.g. user name), you can fetch that from your backend separately and set it to the page state to make it available for entire page.

I am not sure what the current state of Bubble is (it has been 4 years) but you must do some caching on the frontend so you dont fetch data unless the data changes.