[Product enhancement] New page load speed improvements

Announcements
1

Hi everyone, my name is Jennifer, and I’m a Lead Technical Product Manager at Bubble. Excited to announce we’ve cut our JavaScript payload by 7%, saving over 300kb per page load. This means faster load times for all apps built on Bubble!

This little update is just the beginning - it’s a step towards significantly faster load times across Bubble in 2024.

We’ll keep everyone updated on further improvements we make in the new year. Happy Holidays!

40 Likes
4

Awesome! Could you tell us how? Is js loaded dynamically or just removed unneeded js?

2 Likes
5
  1. Great!
  2. If the JS has become more efficient, will this also mean reduced WU usage? One would guess that if Bubble itself is loading less resources and therefore reducing page load speed, it should affect our usage charges as well.
7 Likes
6

I’m sorry but where is the data supporting this claim? From a new app created in april to experiment with WU I have recorded the network tab on a page and the js size in Byte is:
early.js 23813
run.js 2546522
static.js 20335
dynamic.js 53320
total 2643990

Same app, empty page, tested just now, the js size in Byte is:
early.js 24223
pre_run_jquery.js 89795
run.js 3430277
static.js 602301
dynamic.js 96629
total 4243225

What am I missing?

Edit: I was not on the last bubble version. I updated to version 28 and tried again:
early.js 24223
pre_run_jquery.js 89795
run.js 3402494
static.js 602301
dynamic.js 96732
total 4215545

Maybe this is another optimization that happens only in the live app? I always assumed there wasn’t a build step before deployment of the live version.
I am sure I am missing something.

Edit2: I created a new empty app and repeated the load of an empty page:
early.js 24223
pre_run_jquery.js 89795
run.js 3402494
static.js 16608
dynamic.js 88053
total: 3621173

Edit3: mystery solved :slight_smile:
The size went up after april and this is the initial result of the work done to bring it down.

8 Likes
7

From a technical standpoint, can anyone explain how much a 7% reduction of 300kb in page size means for page load speed? It obviously saves 300kb worth of network traffic, but would that also reduce the client-side processing required etc or not necessarily?

1 Like
8

There is a lot going on client-side after downloading js. If you want to read more about this look here and here

5 Likes
9

Great questions, we’ll be circling back with some detailed answers next week!

7 Likes
10

Hi @jennifer.javier any detailed update on this? Currently contemplating an app build on Bubble and would like to know if this improvement in page load speed would have a positive effect on WU and ultimately on pricing?

11

Hi everyone,

I wanted to offer a few more details about these improvements and answer some common questions:

Overview of size changes over time:

  • Beginning of 2023: Started with a JS file size of 2.8MB. This grew to 3.9MB due to new features and additional inclusions (even with browserify and terser minification).
  • April 2023: Shifted to esbuild. File sizes remained at 3.9MB post-esbuild switch.
  • Mid-December 2023: Implementing tree shaking (still an ongoing effort) brought us down to 3.4MB. You can reference archived pages to verify previous file sizes using https://archive.org/.

Minification context:

  • Our current approach to minification is less aggressive in shortening names compared to earlier in the year. This change means we can’t directly compare current file sizes with those from before.
  • It’s the compressed file size that really matters for download speeds. Compression algorithms work to eliminate repeated data, including longer names.
  • File size primarily affects download time and parsing / processing time. The impact is more significant on mobile devices with slower connections and CPUs.

WU clarification:

  • WU costs for loading pages are fixed, and client-side speed enhancements don’t influence server resource consumption.

Continued optimization efforts:

  • We are working toward having both tree-shaking and minification for optimal performance and minimal file sizes.

Happy upcoming holidays everyone!

9 Likes
12

Thanks for adding more context. It makes sense now: it’s a size reduction compared to the increased size due to recent features added.

Happy holidays :slight_smile:

2 Likes
13

Hi @jennifer.javier, please, can you share with us the plan and the target of the speed improvements? The speed is very important for applications such as marketplaces, landing pages, etc.

image
image2026×1596 216 KB

14

Just my 2 cents, but personally I don’t feel like these tests don’t paint an actual picture of… well anything. I spent lots and lots of time focusing on these numbers, trying to decrease page load times anywhere I could, meanwhile not one of my clients complained about speed.

In comparison, here’s Microsoft Office’s webpage performance

image
image1708×1774 295 KB

Vs my Bubble app

image
image1668×1638 253 KB

To be honest I haven’t checked these statistics in well over a year, and they are much better than the last time I checked them!

6 Likes