Reducing Page Load Time with Reusable Elements

Questions
1

Hi,

My current index page contains around 800 workflows, which is significantly slowing down the page load time. Would converting sections with a large number of workflows into reusable elements help improve the load speed?

Thanks!

2

Hi there,

Reusable elements are the elements on the page itself (groups, repeating groups, inputs, etc) grouped together into a single element. Workflows by themselves cannot be reusable elements, although a reusable element can have workflows tied to it. Is this what you’re referring to?

3

Editor load speed yes, page load speed unknown.

You can’t (shouldn’t) have a page with 800 workflows. It’s a maintainability nightmare. Use reusable elements and your future self or future developer will thank you.

1 Like
4

Thanks

5

Yes, to convert groups with a lot of workflows tied to them into reusable elements so that the workflows linked to them are not required to load immediately during page load

6

what exactly does your index page do?
Could you give a rough idea? 800 workflows sounds slow AND expensive.

7

As everyone already highlighted, for maintenance purposes alone you should have reusable components. Maybe you might get rid of some workflows which are essentially the same thing.

However, I am just curious about the application. 800 workflows on a single page is a lot. Is it a SPA? and What is the app about?

8

First question to ask is, what is your page load time? Maybe it is not so bad (for a Bubble.io app :smile:)

Next couple of questions to ask/answer:

  1. Do you have a lot of groups, repeating groups etc. that are visible by default and have data sources defined? If so, see if you can hide them or use conditions to set the data source when the data is actually needed. Less data to load is faster page load time.
  2. Do you have a lot of actions in your page load event? If so, try to reduce them.
  3. Do you use a lot of plugins, try to reduce them.

Then it is time to look at solutions that cost more time and effort to implement.

When I open a page with a lot of reusables and I click on a button which results in a reusable being show, the only network traffic I see is that of data being loaded. This probably means (and please correct me if I am wrong) all of the logic is loaded when the page is opened. This probably also means that moving logic to reusables will not result in a faster page load time (again, please correct me if I am wrong) unless you reduce the number of actions (see step 1 below).

So I would expect that these solutions will offer better results (depending on the situation of course):

  1. Centralize/organize logic in reusables, so instead of having button A, B and C each having 15 steps (to do more or less of the same), have these buttons call a reusabe element with a custom event with the same logic.
  2. Move actions to backend workflows, less logic in the front end and also a way to centralize/organize logic.
  3. Start using multiple pages. When there are people working in your app with specific roles there is a good chance you can have specific pages tailored towards their role. This would be also the moment to use reusables for elements and logic used by various roles.

N.b. this info from the latest community update might be good news for you: “Next up: As one of many things we’d like to do to improve page load speed, we’re implementing LeanJS, which is a technology that helps simplify our frontend framework and brings us closer to only serving the assets that need to be served with a page. You should start to see that roll out in the coming weeks.”.

9

Hi, thanks for your detailed response! My page load speed is around 10 to 13 seconds long. I’ll try my best to optimize it :slight_smile:

1 Like
10

It’s a software with a lot of capabilities. My landing page will give your better idea haha: Intellectra

And yes, around 90% of my workflows are in the index page