We’re fighting to improve the page load time for one of the applications, and faced some interesting points to be looked into.
Among everything else, we have used to use the tool called https://www.webpagetest.org/
The pages shows a breakdown of load time per each element and it has some interesting data on it.
Here’s what a summary load time is currently looking like:
While we do have some heavyweight items on the page (video background), it still looks like too much.
The breakdown of loading time shows the following step taking the biggest chunk:
The other bigger items are related to youtube video loading, but they take 1-2 seconds max each as per the report.
Any suggestion what this may be and how to improve the load time?
The site as well gives us a D for “Cache Static Content” point, and gives the examples (a whole bunch of) of the following items as per what it means:
So while for me personally the site opens in 2-4 seconds (including mobile version), I don’t know if it’s because I have good connection and thus negating all the issues outlined, or it’s just that I have the site cached and thus everything is faster for me.
But otherwise - does it really make sense to look into the highlighted issues and will they be able to help to improve the load times when (and if) they are resolved?
I also think this is a very important topic. You can design the best and most-useful webapp in the world. If your site takes to long to load people will never know because they bounce before it loads…
What I also found out is that site loads one font several times:
Does anybody know how to avoid that?
Also, it would be great if you could share some advice on how to improve speed.
One thing I recognized: When I “downsized” workflows and Conditions to a minimum page size went down about 1 Megabyte (which is a load when thinking about mobile).
I agree with all that the page load time is significant on Bubble but that comes with added cost in infrastructure on the Bubble end. This cost of course would translate to us as users.
What you can do to increase the speed is setup Cloudflare. I have not done it on a Bubble app yet but it’s very straightforward. This way cloudflare caches these scripts/images/etc. and serves them from multiple servers around the world. This should increase the page load by at least a couple seconds.
Other than that, focus on the image elements. Use styles where possible instead of image backgrounds for example as they call from CSS much faster.
You should be able to trim quite a bit down.
@emmanuel does bubble run on a content delivery network? Like Cloudflare? If not, perhaps it should by default. It should drastically speed things (and take loads off the server).
In this case guys you may not want to mess with double content delivery networks as it likely won’t do much if anything and may cause you issues down the road.
There are various seo tools out there that analyse page speed. Use one and fix the identified slow-loaders. Typically these will be images, you may have some scripts that are slow loading but alot of that has to do with the script source. If the script calls out to a slow server it will slow your load time down as well.
One hack to the script issue if you’re facing it is set the html element containing the script to load after 5-10 seconds or so. Give it enough time to load the rest of the elements, then pop the script on the page 10 seconds later.
Yeah, but in my particular case, all images are optimized, and there are no slow scripts on the landing page.
The errors which the speed analysis tools is throwing at me (quoted above) are something that I do not know how to deal with using the bubble framework, hence the question IF and HOW we can do anything about it.
I agree that this is a very important topic for the Bubble Community. Page load times have a significant impact on the UX and Conversion Rates, both of which are integral to building an economically viable business model.
Here are two ways I know to minimize the problem:
One way to increase page load times is to set certain images to hide by default and then trigger them to load once the page had loaded (or once concent above the fold has loaded). Then way you’re prioritizing what gets loaded first so that it feels like the page loads quickly.
You can take this a step further and, for example, display an image background on page load. Then, when content above the fold is loaded switch out the image to be the video. If you set the image to look like the first screen of the video, then that should improve the overall user experience of waiting for everything to load.
Am eager to hear everyone else’s hacks / suggestions too.
I should add another hack that’s become so core to my development approach on Bubble that I forget to mention it, but it’s by far the most effective thing we’ve done:
Instead of having a bunch of separate pages all over the place, we often put groups of related pages onto a single page and then users navigating between each “page” just hides a full page group and shows a new full page group.
With this approach, it can take a few extra seconds to load the first page but then everything after that loads quickly. So, it’s likely not a great approach for landing pages since initial load speed is so critical, but works great for when user’s sign into their account because it’s okay to take a handful of seconds to load their personalized homepage and when everything else feels quick after that it more than makes up for the initial delay.
After reading through that whole thread, I understand you just went through some issues with Safari. That’s got to be frustrating, for sure.
It sounds like that type of issue is still uncommon though and fairly easily fixed now that we know how to fix it. So, I don’t think it should be a deterent for the 1 page approach. Just my opinion of course.
You are right, there is a fix that can work for some (maybe even most) cases, but in case your page has Repeating Groups in hidden groups, it doesn’t resolve the problem, unfortunately.
Good thing that Safari isn’t the most common of the browsers, but some people prefer to stick to it, and that does create issues
Is there anyway to optimize above the fold display in Bubble??
It amazes me that google’s page speed test tool say to optimize above the fold display on almost every page I have tested but I have never seen a web dev tool that actually does this easily.
Yes, Bubble makes this quite straigtforward since they have an option to run a workflow when page content is loaded above the fold.
As such, you can set elements below the fold to hidden by default and then set-up a workflow to display them once the page is loaded above the fold. This should materially improve page load speeds when you have lots of content below the fold.
I’d be really interersted to hear if anyone has tested this and can provide specific page load times for before and after.
I’m not sure that will help. The real problem is that heavy CSS, js, etc files in the head are forced to download before anything is rendered.
What you really need is for them to be loaded after some text with inline styles is loaded above the fold so the user has something to keep them busy while the rest is downloaded in the background.
I can’t believe this is not standard option in all web dev tools.
Valuable insights @graeme.cox. Thanks for sharing.
It seems to me that the Bubble team has gone to a lot of trouble to set-up the system so that it’s performant. They use a CDN, dynamically adapt image sizes, etc.
Nonetheless, there are still performance challenges. I suspect the problem you’ve identified is the root cause for the performance problems and seems to me like it may be very challenging to solve for an application like Bubble to solve, since they’ve created a generalized solution that we customize for our apps. That would also explain why it’s not typically solved for web dev tools, as you indicated.
Anyone else have insight into this? Is this the root cause for much of the slowness?
