[Free] How to radically optimize image rendering speed within repeating groups

Excellent writing. Would love to see a post about compressing images before upload.

It’s impossible to compress multiple images before upload.

This makes for a horrible UX on mobile.

We developed a plugin for that using TinyPNG, which you can run with a recursive backend or backend workflow on a list!
But I’ll keep this suggest in my list of article to release :heart:

1 Like

Amazing!!! That’s something I’ve been trying to do for a long time!! Thanks for sharing!!

Question: Do you know if putting a audio player loading the next audio, if it caches the file? I’m doing this, but I’m not sure if it works

I believe Chrome will not download the file. unless it’s played.
So your best shot here would be to have the audio player with the “auto-play” feature as muted/no volume.

Let us know!

Good idea, I’ve just implemented it! I will wait for the answer of my users to know.

What’s happening is that iPhone have done an update which often pauses the audio in the middle of its first play. After it’s played entirely once, it goes smoothly.

If it solves the problem, I let you know

So far, it helped to cache the audio file, thanks for the tip!!

On the other hand, it didn’t eliminate the bug cause by iPhone’s update, but it helped a lot.

Thanks for the tip!

Sorry, we were switching from Bubble to Webflow!
You can now subscribe here: Blog

@drixxon @julian.valentin

The new tutorial is live, about how to optimize single-page apps using tab pre-fetching! :yum:
It’s here:

5 Likes

I’m about to go through the tutorial right now, very excited!!!

1 Like

After implementation in my own app: This method is much smoother when switching between pages, albeit with the drawback of needing a longer loader on first app launch.

The notifications page and our search page (just a repeating group with users) both load in instantly, just as advertised. Our home page and profile page also load in instantaneously.

Originaly, I applied the initialize state to a whole lot of elements, nearly all pages + floating groups.

That broke it. Specifically, the repeating groups on all the different pages.

However, after trimming the fat and limiting the state to just a few pages // groups things are swell.

I did notice that even after trimming the fat, one of my repeating groups still wasn’t working // loading. After some debugging, I found out that one of my plugins RGAnimation was causing the issue.

RGAnimation makes my home feed rg (think instagram) scroll buttery smooth so I’m sort of torn right now as to who’s getting the boot.

All in all, this method, though simple, is ingenious and it’s insane that you’re the first person to expose // explore this. I’ve been searching for faster methods of loading in groups for years at this point. I attribute my single-page app structure to @rico.trevisan (who might find this guide useful)

This type of method you’ve created gives us even more power as app builders, so thank you very much.

@pork1977gm RGAnimation breaks Repeating Groups when this method is used. This thread might be useful to you.

I restructured my app so I no longer needed // was using the custom java you implemented, but even with it enabled, my repeating groups refuse to load in.

Thanks for the comment, I really appreciate it and I’m glad it serves someone! :smiley:

1 Like

@vnihoul77 - awsome post and nicely thought out! - this is the type of stuff that makes bubble great to use :slight_smile:

@drixxon - I’ll implement this on the demo page for the RG Animation plugin next week and get it working for you!

Paul

2 Likes

Thank you @pork1977gm


Regarding Bubble’s new version 21 Performance update :

As you were a few to ask me in PM, this update is not affecting the behaviour of pre-fetching, as elements are still considered visible by Bubble from a user-perspective and therefore are still pre-fetched.
Just make sure the Fetcher RG is somehow visible (eg. 1x1px on the page)

very informative and well explained, thank you for sharing this

Wow - very useful for my app, and excellently explained.

Thanks so much for being so generous with your time.

Thank you! Very appreciated!

Thanks for the unique solution here!

Can this approach be used for regular feed, example feed similar to Linkedin’s, speaking of pre-fetching?

Also can’ figure out how you made this part, to add state in brackets where you can work in equation?

example235252

Thanks!

1 Like

Absolutely! I will write another post about it soon. Feel free to subscribe to our blog if you don’t want to miss it :yum:

This is an experimental feature you can enable from under the Settings > Versions tab of you app :rocket:

2 Likes

Oh, what a great news! Thanks!

Is it TBA or time is known? We need it! :smiley:

Check mine feed -.- Conesult - Digital business incubator