Increase the Bubble page load speeds with Cloudflare

Doesn’t that rule mean that you are actually deactivating SSL completely when forwarding Cloudflare to Bubble?

What’s the difference then with flexible?

Interesting :thinking:

Someone with more devops expertise should chime in.

Based on this explanation, with flexible, the connection between cloudflare - bubble server is not secure. I don’t know how hackable that is. I assumed it is because cloudflare recommends against it if you have sensitive data. Why not do Full?

I mean yes, Full is the ideal setting. But with your rule I believe you are just implementing flexible.

In the end, you are disabling SSL completely from Cloudflare to Bubble app. It’s the equivalent of Flexible but with rules.

Maybe I’m missing something :frowning:

Also thanks for this @levon :stuck_out_tongue:

1 Like

Hey, I have also enabled cloudflare and i found out that website is going down multiple times. Tried changing the SSL also. Didnt help? I disabled the cloudflare at the end.

Full setting is absolutely ideal!

Bubble uses XHR/AJAX to send and receive most database data that renders in the Web app (although some things are loaded in index.html and the JS of run_js_page(.js)) which basically holds all the static data that defines your app, component settings, static texts, page structure and plugins used.

According to my experience, I do not currently think that the XHR calls gets passed through unencrypted using the flexible setting, but this is surely something to look into if you decide to use the flexible option. If they run a reverse proxy of some kind, this would be risky, I do not think Bubble XHR (Express) server accepts unencrypted connections so I guess unlikely.

I would have a bigger concern about flexible if the Bubble pages that were sent unencrypted were server-side rendered (may happen in the future). (Server side rendered pages would potentially contain sensitive data in the HTML or pure JS files.)

Again, to be on the safe side opt for the FULL setting.

Thank you all — Levon kramwe, and guys from the wonderful bubble.io project – with your comments I could improve the whole speed thing to a real impressive outcome, I did not even expect when I started optimizing.

1. Cloudflare (caching the files in the network) and as in post said. Also Argo is increasing - again - response times by > 60% at my site.

  1. next to cloudflare, do not forget adding PWA elemnts (caching on the browser side)

The outcome was finally perfect score in Google Lighthouse Tests with almost 100, also on Mobiles.
Then in page rules I did set “cache everything”, for all secondra.com/* pages. I would recommend a thourough test on your app with any adjustments in Cloudflare, with a documentation (I did it in a simple spreadsheet).

For me, there is no disadvantage in using bubble anymore, and I think these caching-optimizations has to be done in any development framework one chose. So it is the work of the “Webmaster” if you have one. In most bubblers corporate situation it is me & you, haha. :sunglasses:

2 Likes

Speed is always a relative measure I have learned, and it is not just “Page Load -fully loaded plus 2 seconds idle” time. It is, what the users experience, especially the “above page fold” UX - not one simple figure. As some wouldn´t believe, checkout amazon´s page loading time, and we can see how worthless this one figure is for sucess or UX. It has to be founfd project by project, testet, and tested again on all settings changes of anything you add or change in Cloudflare or the PWA settings. And then test again. See amazon page laod time finish of 32 seconds and Load 4.13 sec. Slow can mean financial succ

ess, interesting.

1 Like

@levon is this practice/tip still relevant now that Bubble natively works through Cloudflare? I’m trying to speed things up a little more past the standard app architecture side, and wondering if this is an extra thing I can do?

@help Hi Reece, I think it’s irrelevant now

3 Likes

Thanks for clarifying :slight_smile:

Hello, can you confirm it’s still irrelevant ?

Yes, still

Note : Bubble as backend, and front end using a single html element including html/tailwindcss, alpine.js and other js libs (without plugins-I use few Bubble plugin but the idea is later to remove them and use the libs in the pages requiring these lib)

hello @meinharttv thanks for sharing,
Wondering what is " PWA elemnts" and how should I apply this to my bubble app?

Thanks!

Thanks, @levon
Load time reduced by approx. 50% ( 6.86s down to 3.68s ). Fully loaded single page mobile ready app. 20+ group/psuedo pages, custom JS, custom CSS, 20+plugins,
Estimated: 800+workflows, 4000+ workflow steps, 2000+ element conditionals. So likely JS heavy.

The improvement is impressive.
John

3 Likes

hello @levon !

just came accross with this post here and checking the forum it seems that this practice is now outdated, once Bubble already handles the cloudflare integration. Is that correct?

i checked my app at gtmetrix and i see a huge difference on page load speeds of ~4s less when comparing the access from Canada and Brazil (where i am and users are).

this fact made me think that maybe i could have some improvements by optimizing some cloudflare configuration to have my source nearer from South America.

do you envise that the change from nameservers would bring any gains?

as a reference, now gtmetrix tells me that my SPA loads from Brazil on 11,4s (FCP 7,6s) and from Canada on 7,1s (FCP on 3,8s) → 4,3s less for full loading / 3,8s less for FCP. huge difference!!

hello @jgellis, nice improvement! where are you located? would appreciate to know more about your settings at cloudflare. could we talk?

Hi @vizinhotop.adm , we did find the Cloudflare service improved our access speeds however shortly after we tested this Bubble actually implemented a Cloudflare environment which negated the advantage of us repointing our DNS and subscribing. In additions the recent changes in price has moved us totally in another direction.

We are migrating off of Bubble over the next several months and re-writing our app as a full stack architecture where we have complete control over our code. We are leveraging a multi site VPS service in the US and will be using Cloudflare API services to speed up traffic flow from the EU when we move into that market mid next year since we are in North America.

Sorry I can not offer more help.

Cheers,
John

1 Like

thanks for the feedback… maybe this is a path that i might pursue in the near future, as i am based on south america. the response times here are awful…

still investigating the options on the table, as i would not intend to move off bubble yet.

1 Like