Increase the Bubble page load speeds with Cloudflare

[levon]

Hey Bubblers,
we all know how important it is to have fast loading pages and we’ve seen that sometimes the speed might be an issue.
We have discovered that Cloudflare can significantly improve the page load speeds. See screenshots for before and after for our web-site https://bubblewits.com

Before

After

so it went from 5.75 seconds to 0.5 seconds (almost 10x faster!)
we’ve seen the same results for https://zeroqode.com

so if you’d like to experiment with this too here is how to do it.

sign up at cloudflare.com for a free account and add your site there.

when prompted to select a plan choose the free one

then cloudflare will query your DNS settings and will reproduce them but you’ll need to double check your current DNS settings and make sure all records are there - if anything is missing just add those manually.

then you would need to change the nameservers for your DNS (basically you will need to make cloudflare your DNS manager)

once that is done and your nameservers are updated you will need to click on “speed” from the site menu

and enable all the options for “auto minify”

then also apply the “brotli” compression

and rocket loader

you might need to wait about 24 hours until the DNS name servers are updated for the speed improvement to take place.

Make sure to check the page load speed with this tool https://tools.pingdom.com/#!/cS0642/https://zeroqode.com/ before and after the changes to see the impact. And don’t forget to share your results here

@emmanuel maybe you could integrate these compression mechanisms directly in Bubble so it would work out of the box?

Best!

Levon Terteryan
Founder @ Zeroqode & Bubblewits

Bubble Templates
Bubble Plugins
Bubble Courses
Convert Web to iOS & Android
No-code Development Services

[nikolai]

Thanks @levon. Would Cloudflare be used instead of or in addtion to buying capacity boosts from bubble?

[jballou]

Thanks for the tip! Interested in seeing what others metrics are before and after integrating!

JB

[yusaney1]

Hey @levon,
The first image (at least in the miniature) is pointing to airdev ? And second one to bubblewits.
So may that cause the huge load difference? (Not tested cloudflare yet).

[levon]

Sorry, pasted the wrong image, corrected now (we were doing some benchmarking

[levon]

Would Cloudflare be used instead of or in addtion to buying capacity boosts from bubble?

it would be used in addition - because cloudflare can’t increase the Bubble app server capacity to process workflows faster

[sridharan.s]

Great find @levon. Thanks!

As other people implement this, can you please post your before and after results here as well? Would be valuable for everyone to know that this solution does, in fact, work for most/all bubble sites.

[jonathan.timianko]

Awesome!

[romanmg]

Great share, @levon! Thank you

If others are trying it, please post before and afters! I might have a go at this…

[vincent56]

I went this route to get our app unblocked in Russia. That’s hasn’t worked yet but I have also seen increases in page load although not to the extent outlined here though.

[Bradluffy]

What was your increase?

[gregjohnkeegan]

How is this different for Cloudfront @levon? I thought AWS used Cloudfront as default?

[levon]

not really sure about that Greg…

[gregjohnkeegan]

Going to give it a go. @levon if this significantly increases page load (no.1 drawback of Bubble) I’m going to send you a bottle of champagne. This is potentially huge.

[levon]

this needs more testing/experimenting as the speed check tools can show 10 time speed increase while the real user experience will be not as significant (let’s say 2-3fold increase which is still good) …
the good thing it’s easy to play with this and revert back in case if it’s not having impact

[daniel.alberttis]

@levon FYI your before/after screenshots show testing from different locations. San Jose is testing significantly faster than NY on mine as well.

[levon]

here is a test from NY

[jonathan.timianko]

@levon I assume you guys already had your images optimized completely which is why page size didn’t decrease? In my case I have user uploaded images that could be multiple megabytes in size, so I assume if i get a paid plan I get access to their image compression algorithms which could compress the images on my site on the fly with no modification needed on my end? If so, complete game changer.

[gregjohnkeegan]

@jonathan.timianko Are you using Imgix? I wonder if Cloudflare could further improve on the compression provided by Imgix. I’m starting to get really excited.

[jonathan.timianko]

@gregjohnkeegan I’m basically using nothing right now, I don’t have too many photos uploaded at the moment and couldn’t really figure out how to use Imgix when I tried. Guess I’ll give it a shot.