Faster image loading through an app - tiny 1 pixel images early in onboarding?

I am trying to make my app load faster for users - I have a corona live test app and, even with small file sizes, there is a noticeable lag in loading images the first time they are seen by the user.

I was wondering (without testing yet)… might it be worth deliberately ‘hiding the images in sight’ on the second screen of my app, maybe using cloudinary to have width=1 pixel kind of thing, to load all of the needed images into memory? Otherwise there is a really abrupt wait at each step through my process throughout the app.

Any experiences or ideas? Thanks!

If the image is extremely important to load right away the first time, you can throw it inside of a title component and then you CSS to adjust the title boundaries. For whatever reason, in my experience, the title component loads instantly. :man_shrugging:

2 Likes

Are those images stored in Glide?

Yes, they are all stored in Glide. There is at least a 1 second delay when a screen opens the first time for a user. BUT these images are displayed from an If-then-Else column. I have another set of images on one screen (the first onboarding screen) that is from an inline list (flags to pick a language) and those are shown immediately.

Maybe I need to rethink how I present images and just have them all as separate images with visibility settings (for speed, with a sacrifice on elegance).

I have changed the design components and the column where the images are. Rather than ITE pulling images from another sheet, I now put the images into separate columns in the sheet I am using (CollectUser) as template columns with the image URL.

It is faster… but still noticeable that other elements load first.

@Robert_Petitto how do you do the CSS for title? I have not done that before - thanks!