Skip to main content
New Idea

Implement lazy loading for images

Related products:None
timcavey
bjoern_schulze
Suvi Lehtovaara
Gabolino
Blastoise186
  • timcavey
    timcavey
  • bjoern_schulze
    bjoern_schulze
  • Suvi Lehtovaara
    Suvi Lehtovaara
  • Gabolino
    Gabolino
  • Blastoise186
    Blastoise186

Blastoise186

Hi,

I’ve been recently thinking about ways to improve platform performance, and a recent thread reminded me about this idea which I forgot to post previously. 

For my own websites that I run, I make heavy use of the server level caching and optimization features to massively improve performance across the entire stack, one of which is lazy loading images and media. It helps to improve page loads by only initially loading in resources that are actually visible when the user first lands on the page, and then load in other resources when they’re about to become visible on a Just-in-Time basis. This helps to ensure I’m not dumping 50mb worth of media gallery all at once onto a user who only wants to view two or three images. It also reduces the pressure on both sides and breaks things down into much smaller chunks.

I feel it’s something that inSided might benefit from, especially for media heavy threads, or for ones where there’s almost no images in the opening post, but loads of images five replies deep. These currently bog down page loads even if the user isn’t going to see everything. If it was lazy loaded, the page could be snappy and lightning fast, without losing anything else.

Ideally, it would be great for responsive placeholders and transition effects to be applied as well, so that the layout of the page doesn’t suddenly jump all over the place when an image loads in and renders. It could also look really nice too, if you do it right!

timcavey
Forum|alt.badge.img
  • Helper ⭐️⭐️
  • March 30, 2021

I think this is a great feature idea. We have an issue where members upload images from a mobile at the actual size, it’s unnecessarily big. If these weren’t loaded by default whenever the topic was opened, surely page loading speed would increase. Our mobile page speed insights score would be a lot better I’d wager! 

 

@Blastoise186 you also mentioned a possible feature where these images are auto resized…. is this a possibility?  


Blastoise186
Forum|alt.badge.img
  • Helper ⭐️⭐️⭐️
  • March 30, 2021

That can indeed be done. I use QUIC.cloud myself for my WordPress based sites, which works pretty well for what it does. But even in cases when that can’t be used, there’s other options as well. I think AWS has one, but due to the crazy huge number of products and services in the AWS catalogue, you can literally never find the right one! :stuck_out_tongue:


Blastoise186
Forum|alt.badge.img
  • Helper ⭐️⭐️⭐️
  • March 30, 2021

The other thing to note as well here, is that despite the file size limits, Totodile (my Samsung Galaxy A70) can still pull off some pretty impressive snaps at very high resolutions and quality, some of which can be up to 32MP. Trust me, even filming a five minute video of my router doing a firmware upgrade once caused the resulting file to be nearly 200mb in size!

Smartphone cameras are becoming higher quality all the time, which puts a lot of pressure on the platform. I feel that bumping the upload limit in exchange for better image optimisation to crunch the file sizes back down, allowing WebP support and lazy loading combined will almost certainly take the edge off it.


Hello @Blastoise186 and @timcavey I'm glad you raised the topic of lazy loading. We actually did a POC to implement so lazy loading which were are testing with two customers at the moment. It does not apply to all images but it is covering at least half of the homepage widgets. That POC is also helping to reduce image size, again it is not making really small but better than loading them full size.

I just enabled this POC on your prod environment so you can be part of testing it. It would be great if you could share any feedback on this.

cc @Kenneth R @dilekgencer 

 


Blastoise186
Forum|alt.badge.img
  • Helper ⭐️⭐️⭐️
  • April 2, 2021

Woohoo! I’m on it. Thanks @Marion Frecaut . :)

If anyone can break it, I probably will.


Blastoise186
Forum|alt.badge.img
  • Helper ⭐️⭐️⭐️
  • April 2, 2021

Yup, as I suspected. I managed to break it. :rofl:

But I did get some useful data from my testing just now. I’ll let Ken know.


timcavey
Forum|alt.badge.img
  • Helper ⭐️⭐️
  • April 5, 2021

Hi @Marion Frecaut and thanks for adding us to this trial = exciting!

 

Some feedback from one of our regulars: 

 

“I've been struggling to get a photo and a video sequence uploaded into the Forum this morning.
I got lots of errors displayed in a red box, typically "wait for your graphics to upload before saving". I would possibly expect that with a video, but it was occurring with just a 12kB JPEG too!”

 

Do you think this is related?


Blastoise186
Forum|alt.badge.img
  • Helper ⭐️⭐️⭐️
  • April 6, 2021

That’s weird @timcavey , but I don’t think it’s related.

I’ve been able to throw a few larger JPEG and PNG images into one of my posts just fine, albeit via editing but it’s close enough. Lazy loading doesn’t normally apply to editors either, only to view mode...


timcavey
Forum|alt.badge.img
  • Helper ⭐️⭐️
  • April 6, 2021

I’ve also had an issue in opening up some pages of some topics in Control, via the front end. Some topic pages bring up this error message, but if you navigate to an earlier page, it opens it up, sometimes with comments missing. As you can tell, I’m still figuring out the behaviour of this but, and I’ve raised this as a support ticket and Tom is looking into it.

 

Whoops! Page not found

Sorry, the page you are looking for might have been removed, or is temporarily unavailable.

Did you come here through our website?

 

 

Just flagging this here in case it’s related to our place on this Lazy Loading test.


Thanks, both for all this feedback! @Blastoise186 I'll ask Kenneth to share the input you found.  @timcavey thanks for creating a support ticket about it, it was the best option here.


Blastoise186
Forum|alt.badge.img
  • Helper ⭐️⭐️⭐️
  • April 6, 2021

No worries @Marion Frecaut ! :)

The PoC overall seems to be working pretty well, aside from those potential snags. It has also allowed me to uncover a few other potential improvements as well.

What I can say though, is that with the PoC enabled, a totally fresh load of the homepage takes roughly five minutes to fully load in on my “chaos engineering” test where I simulate some of the most horrible network conditions possible via my network controller - 2001 broadband speeds with 128kbps download. Still takes around three or four minutes to load anything useful at all, but much better than eight minutes previously.

Doing the throttling via my network controller is more realistic than using Chrome DevTools, since it forces everything that goes through my router to be at the reduced speeds, not just that one tab.

Turning off the throttling and going full speed (8 meg down, 2 meg up) makes things a little faster now than they were last week. It’s not quite as noticeable for repeated page loads, but the first hit really benefits. In some cases, I’m seeing a 20% benefit so far, but mainly 10% average is more common for me.


Updated idea status NewOpen


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings