I just created a new, blank Bubble app and ran it through GTMetrix. I tested 5 times and it took an average of 5.5 seconds to load (5.8, 7.2, 5.8, 2.9, 6.1).
I did the same thing with a blank page on my other app that’s on a professional plan with 2 additional units of capacity and the result was 6.1 seconds on average (5.2, 7.8, 5.2, 6.4, 5.8).
If a blank page takes that long to load, how are we ever supposed to have a performant site?
Thought I’d post an update in case it’s helpful to anyone in the future. I went back and forth a bit with Bubble support and here’s what they said:
GTMetrix and most page performance checkers are optimized to return the highest scores for static websites. Since Bubble websites are Javascript based web pages, they will produce less favorable results from these online checkers. You have been able to reproduce this by checking a blank app. This occurs due to a few different factors:
By design, Javascript apps and their packages are larger and will take longer to load. They provide more functionality, preventing movement between pages and thus, new page loads. However, to achieve this, more data is loaded at page load to support the app and it’s packages. The app’s javascript and supporting packages are considered render-blocking resources in a traditional HTML sense. However, in a fully javascript based app, this isn’t as intuitive for the reason below.
By design, Javascript web apps are asynchronous meaning, they can be loading data and updating what is seen on the screen at any point in time. Because of this, it’s normal to notice the page taking a long time to load but, in most situations, the site is usable before a performance checker determines the page is fully loaded.
Page performance checkers are optimized for HTML websites which change the DOM by moving between pages. Javascript apps have to load ALL data for the entire site when initially loaded. A traditional HTML site can load each page as needed creating potentially shorter load times.
Javascript web apps cannot be cached in the same way a HTML site can. For example, on my Wordpress instance I run a plugin called Autooptimize that caches pages in my app to achieve a higher page ranking and page load speed. Due to the dynamic nature of javascript apps, this cannot be done as efficiently.
Ultimately, using a page performance checker isn’t always the best way of gauging the speed of a javascript based app. You can use the app’s Logs -> Capacity -> “Page load metrics” section to get an idea of real page load speeds in the app. You can modify the “percentile” filter to get an idea of average speeds (50%) as well as outliers (99% and 1% settings).
Bubble does CSR (client side rendering) which is much slower than SSR (server side rendering).
Bubble pages feel slower to load than something like wordpress which does SSR and, perhaps even more importantly, this impacts SEO materially. There’s things you can do to mitigate the problem a bit with Bubble, but CSR is simply worse for SEO than SSR. Our SEO consultant, for example, said they’ve changed big sites from CRS -> SSR and doubled the search traffic with that one change.