REQ: Frontend performance optimization

[gurun]

Bubble founders and professionals,

Having a great user experience (UX) in the bubble frontend is a strong path to success, the opposite might lead to users not using bubble to build their application because the end users experience is less than optimal.

I see a pattern or rather anti-pattern of how some frontend elements and DOM is rendered very slowly and perform sub-optimal.
Is there someone technical here whom would contribute to do a performance assesment so we could figure out how to fix this.

A few example issues:

1. Animations / transitions are slow and stuttering in several browsers. Sometimes the transition goes 20% then restarts from 0% before going to 100%, giving it a buggy look. (Sometimes in chrome, often in firefox)
   -Example: http://insideil.org/search when clicking on a position to open you see the issues arising, also when closing one sometimes the whole area below becomes white (non-consistent pattern).
   -Example 2: In the kollecto application (now not running in production anymore kollecto.com)

2. Background image disappears after changing tabs and back to application in Firefox then not reappearing before hard refresh CTRL+F5.
   -Example: http://psychspaces.com/index

3. Typeahead sometimes not working. Thus “New York” not showing ANY results.
   -Example: http://psychspaces.com/index

4. Sometimes 5-9 seconds for rendering in Firefox and Chrome
   -Example: http://psychspaces.com/listing?id=1449607980650x819381610490381800

5. After clicking gallery element to change image or current item, resizes current image before moving to next. Example listings on: http://psychspaces.com/ and kollecto.com

My base point is that transitions and changes to the current view is often buggy and slow. I would love to see how we could identify the core issues and fix them.

Have you concidered using ReactJS to render elements? This would go a long way when you want to generate native applications later as you could piggyback off React Native to render native elements where possible and using JavaScript running the App logic. Similar to Cordova/Phonegap but killer performance.
Also, you dont need your whole application to be ReactJS written. You can start off with rewriting individual UI elements that does not perform optimally today.

[emmanuel]

For things like this, it’s better to use email with some URL and specific things to replicate so that we can look into it. If you can find a pattern let us know, for instance, for 2, 3, 4 it works fine here, maybe because I have a better connection.

[gurun]

Hello Emmanuel,

I understand that in a traditional way you want an email with such issues. But I think its important to embrace the forum as an arena for shedding light to potential issues like this. Maybe I`m the only one who bothers with this, or maybe there is other users also experiencing the same things, and thus its easier for them to contribute into this or similar types of posts on their experiences as well.

I`m sorry I didnt have time do to a perfect repeated testing scenario of these things yet, I will test more as i get to spend more time with bubble.

Here is a screenrecording of one testing scenario I did just now:
http://recordit.co/TnfY9tdUpJ

I have a 20Mbit connection in a developed country so the connection capacity should not be an issue. I have tried with two different connections today and same issue. Last connection tested with on screenrecording above had the following spec tested on speedtest.net (19mb down / 17mb up).

To me it seems that some stuff served via cloudfront has a huge delay. (Time to first byte)
On some images I see 755ms to first byte.

To solve bandwidth problems where one is awaiting ajax data, you could implement a request timer that shows a message when things take longer than expected. Gmail handles this in a great way.

Some suggestions for approaches on slow requests:
Offline.js - http://github.hubspot.com/offline/docs/welcome/
Firebase-on-error (can detect slow writes, errors etc. AFAIK write operations only) https://github.com/pkaminski/firebase-on-error

Or just custom written JS code, if request not fulfilled within X (4?) seconds, display user warning on frontend. (The request is taking a bit longer.)

[wahome]

echo this deeply: very useful to keep this type of conversation open to the community - enables collaborative problem-solving but is also hugely educational. generally we should be proactively cultivating an open creative culture around bubble as, after all’s said and done, that will become the most valuable part of this ecosystem. this helps.

[josh]

Yes!! Very much agree with this sentiment. And thank you gurun for kicking the conversation off. Specific examples are really helpful in tracking down and improving things.

To echo Emmanuel, when there’s a specific thing in your app that seems to be buggy, send us an email – the point of that is so that we can track, follow up, and make sure it gets fixed. The forum is great for bigger picture discussions like we’re having here, and collaborative problem solving.

To give you all some color into how we’re tackling performance, we’re working from the backend forward right now. We’re in the middle of a major project to change the way we store applications, which right now is one of the bigger bottlenecks and I think is behind most of the more egregious delays that we’re seeing. Worst case it can take up to 4 seconds for the Bubble server to get answers to questions like “What are the elements on this page?”, which is way too slow for a worst-case scenario… we want to get that down to at most 10 - 20 miliseconds.

Once we roll that out, we’ll be moving forward through the infrastructure to make sure every part of the stack is fast, from the backend to the frontend.

Let’s keep this thread ongoing… would be great to be able to revisit it in a month or so and see how many of the examples in it are still slow / buggy and how many of them work smoothly.

[wahome]

thanks for the courteous response josh. there may be a more efficient way for people to email queries to ‘support’ while still sharing useful knowledge on the forum. may be a rule around using mentions to the platform team when seeking specific attention. not sure… but i don’t envy the obvious challenge of keeping up with the conversation while building.

i understand (and support) that your current priority is to optimise performance. i had shared some thoughts on communicating the roadmap that have now been buried here: A more transparent Bubble [Roadmap] and [Release Notes]. there was much more to that but don’t wish to detract from more pressing issues for everyone right now.

[NicolasDap]

It seems that pages of my app are loading much faster (I do love it, really). The change of infrastructure improved it, right ? Is it the same for you guys ?

[emmanuel]

Yeah that’s what it was about we’re quite excited by the improvements

[davidvm]

Hi!

Has React been implemented? I can’t seem to find anything on the forum, so probably not. Or is something better used instead?

Also, what other major performance improvements have been implemented since the ones mentioned here?

[vincent56]

Thought this was the best topic to post this in given the date and issues described.

I’m pretty surprised by the fact that my site performs worse than a copy of the site (with some pages removed) on a free plan.

This tells me that for website loading and rendering, the server capacity units do not add any value. There is another topic about cloudfront being very slow and I’m wondering, seeing these test results, what we or Bubble can do to help improve this or if Bubble can give an update on which changes will come (about) when to solve these issues.

The 5 sec load issue already exists since 2015!

I tested three sites:

App Copy - About page
App Version test - About page
App Version Live - About page

The about page has one html element with js and is just one container with 2 images and a couple of paragraphs of text.
The Copy page is an exact copy but with 80% less pages and no premium plugins. The About page, however, is the same as the others.

These are the test results (as per https://www.webhostinghero.com, I tested a few times to see an average that made sense, as I also saw 11 seconds load time at one point!)

Copy app

Version-test

Version-live

Now I’m no expert, so please tell me what I’m looking at but if I look at the main ‘red’ issues:

Make fewer http requests
There are hardly any components on the page, and they are all grouped so that would be as fast as possible. There is just one script on the page directly (and two in the header through settings), so I’m not sure what to improve here.

Add Expires headers
This is a method of caching elements if I understand it correctly. However, this does nothing for first time visitors.

Compress components with Gzip
This is the only difference between the main apps and the copy app, none of the premium plugins are loaded. With the increasing number of plugins from various different sources, will this become an even bigger problem moving forward?

Reduce DNS lookups
As mentioned, I use a few external services on my site. I could bring this down by 2 or 3 but not much as I’m using most. I do see a lot of cloudfront here. Is it acually useful or is it basically hampering performance at this point? Not sure…

Honorable mention
Some plugins seem to require a lot of unnecessary resources. Take Ziggeo for example. I only use it on one page but for some reason it thinks it should load on every single page!

I don’t know how easy some of these issues are to fix, but I really hope there are some easy wins to be found here!