Page Preloading Strategies

What do you guys use to hide slow loading pages?

My page shapes/ elements load at least 2 - 3secs quicker than my data so the user experience appears a little dodgy.

I’ve tried covering the entire page with a shape and set the conditional ’ when page is loaded (entire)’ this element is not visible but it’s not a smooth UX and seems to make the process seem longer. I also still see the original page loading for a split second after the custom element is hidden.

3 Likes

Great question! Would love to hear how other people are solving this as well.

We have one page that has hundreds of elements, including several full pages in iframes (that are conditionally shown/hidden). iframes look particularly bad when loading because they often show a broken icon/skull when the iframe container is loaded but the page within the iframe is still loading. So, we’ve put a dark background with a loading indicator on the page for the first 10 seconds (similar to when gmail loads). We add tips on this page so that people have something to read/learn in that time. All in all, this is not ideal because it’s slow, but it works.

In my opinion, making pages feel like they load quickly is critical to conversion rates and an positive UX. Am curious about best practices with this on Bubble.

2 Likes