Bubble loading speed?

[onfyre]

Hey guys!

Is there anything we can do to improve loading times? I know this question has been asked 1000 times but everyone just responses with optimize your workflows, page size ect.

Comparing apples with apples, I have my page built with Bubble and another similar built page that isn’t built with Bubble.

Here are the difference in the dev console:

Mine: 5.02s Load Time
Theirs: 1.07s Load Time

Mine: 140kb transfered
Theirs: 199kb transfered

Mine: 8.2mb Resources
Theirs: 14.6mb Resources

Mine: 62 Requests
Theirs: 141 Requests

I don’t see how I can optimize anymore and this is just the way it is due to Bubbles servers? Half the resources and requests and less data transfered but 5x the load time.

Any help or opinions would be grateful. @josh

Cheers,
Mickey

[pork1977gm]

You could try utilising a service worker. It may help here by caching some of the page data.

Not to advertise my own plugins or anything but it might be useful in your case!

Service Worker Plugin | Bubble

[augusto1]

Load time of 5 seconds…
Rethink your strategy to present data…

[stefan.pointecker]

It also depends on your location. Are you in e.g. Europe or USA?

[cmarchan]

Hello @onfyre

Just reviewed @pork1977gm plugin. Have not used it yet but given Paul’s awesome work and contributions to the community I plan to evaluate it soon. He supports his plugins closely and it looks very promising!

You could also consider the below resources that list some general practices to improve performance:

The Ultimate Guide to Bubble Performance - the new edition is out (now 210 pages!)

[mockup-no-bg-no-shadow-websize] I’m very happy to say that after months of work, the new revised edition of The Ultimate Guide to Bubble Performance is out! The new version has more than 50 pages of new content, including a detailed guide on how to think about database structuring - one of the most requested guides from the first book. There’s also a full section on all the steps Bubble goes through while loading a page - @philledille you’re gonna like that one For those who ha…

Performance Q&A guide

So some overall guidelines. Note that these kinds of guidelines definitely have a sell-by date, since we’re always trying to optimize slow stuff, but here are some of the big performance levers: The more data a search fetches, the longer it takes. That probably sounds pretty basic, but we routinely see pages that fetch thousands of data items on page load. Or, we sometimes see searches that only fetch a few things – but each thing has KBs or MBs of text data stored in its field. Bubble …

RG vs "Search for" (performance questions)

@rpetribu The conventional wisdom after much time learning from knowledgeable folks in this forum (my understanding of it). And through my own experience building apps is to: build light objects minimize list fields (only when less than 100 entries), only use them purposefully relate objects indirectly but both ways when necessary preload searches feed from preloaded searches avoid inflow searches (… hence preloading them) mnimize back and forths between client and server use custom events ex…

Hope the above helps!

[onfyre]

Australia. But im testing the other site from my same location and I think they are in USA.

[GH5T]

Hey man, I’ve learned with my apps that the only way to make Bubble load fast is with things being on one page and using states, using option sets, or data that is always available.

The other method is precaching your data. A lot of people on here don’t do this method cause it’s tedious. You can save your prefetched data in a state after a scroll event, or pagination event. This way your data will always be consistently loaded before a window event occurs.

If you’re interested in learning more about this method, shoot me a DM and I can try to explain further.

Another advanced and more sophisticated is rendering your Bubble app in a React app where-as you can precache anything and everything. Load times are basically instant.

[onfyre]

Hey Guys!,

Thanks everyone for the help and suggestions.

I managed to get the loading down to the 1s range.

This page is a very basic landing page designed for mobile so needed it to be fast. I don’t mind the user dashboard app loading a little slower on first load and using a one pager for navigation speed but the user landing page needed to be better.

Here’s what I did:

1. Removed plugins (Some I really wanted but have to make sacrifices) Especially ones that use API calls. or JS Libraries.

2. Made sure every data type / field was switched off in privacy settings unless it was actually needed for display. That includes slugs, modified date ect. Unless its required it’s switched off.

3. Went hard on removing any element that isn’t required.

4. Minimised/Simplified workflows where I could.

5. Made sure all images are compressed.

6. Incognito mode when testing as being logged in meant my privacy rules weren’t accurate.

Saw performance increase after some time after these changes (Few hours). I think Bubble does indexing in the background.