Native Lazy Loading - Finally fix scrolling topics

[Everade]

This is what scrolling topics with images in IPB looks like:
(Tested with 1gbit/s internet connection <10ms latency)

Why is this bad?
Text + Images + Scrolling = Forum

And this affects 3/3 of your product. (quickmath 😛)

What i'm trying to say is that, new features are cool, we love them.
But don't forget your roots, they need some love too.

Reason for the scrolling/loading issues:
IPB preloads the spacer.png file instead of the actual image, then it goes for the image itself.

This blocks all content from being rendered, because that's how browsers handle it, which results in a truly awful scrolling experience.

It's normal for community members to sometimes come up with a great piece of topic or post, which consists of many images to make it look nice and clean.
So it's not uncommon, i see this problem on my board all the time.

Todays browsers all feature native lazy loading.
 

Spacers' death shall be imminent. 

 

Edited July 29, 2021 by Everade

[Nathan Explosion]

Wasn't native lazy load added with IPS 4.6?

[Stuart Silvester]

We added it to profile photos.

We can't completely replace the Javascript solution yet, Safari & iOS do not support the native method. It is on our radar though and we're keeping an eye on support.

[Nathan Explosion]

8 minutes ago, Stuart Silvester said:

Safari & iOS do not support the native method

[aia]

36 minutes ago, Stuart Silvester said:

We added it to profile photos.

We can't completely replace the Javascript solution yet, Safari & iOS do not support the native method. It is on our radar though and we're keeping an eye on support.

It would be better to use the native method everywhere and fallback to the JS-based method only when needed, so the majority of users of modern browsers won't experience problems just because of a minority of technically backward Apple browsers. It's very easy because native lazy loading works perfectly fine when used with JS-based method at the same time.

[The Old Man]

Hi,

I've added native lazy loading on some non-IPS website pages which display a up to a couple of hundred thumbnail images on each, it works fine on my iPad (2017, ios 14.6) but you do still have to enable it under Safari > Advanced > Experimental Features > Lazy image loading.

 

[Everade]

1 hour ago, 13. said:

It would be better to use the native method everywhere and fallback to the JS-based method only when needed, so the majority of users of modern browsers won't experience problems just because of a minority of technically backward Apple browsers. It's very easy because native lazy loading works perfectly fine when used with JS-based method at the same time.

Getting school flashbacks where you have to wait to move on because the stupid kids still don't get 1 + 1.

 

2 hours ago, Stuart Silvester said:

We added it to profile photos.

We can't completely replace the Javascript solution yet, Safari & iOS do not support the native method. It is on our radar though and we're keeping an eye on support.

Fallback like @13. mentioned please.
Your product's main feature should be prioritzed above 2 bad browsers that form a minority.

Altough yes, safari is the 2nd most used browser, it's still only 18% of the world market (and declining).
So a fallback for these should do until it can be removed eventualy.

https://gs.statcounter.com/

 

It's not just a simple scrolling issue but an overall performance killer.

[Dll]

The thing is, unless the image sizes are specified on the page, it doesn't matter which method you use, the page will still jump around as it loads. So, instead of height: auto, as it seems to be at the moment, the height of image thumbnails really should be set to the correct number of pixels. 

Edited July 29, 2021 by Dll

[Ibai]

I would not recommend enabling lazy loading for all the images. It makes the forum way slower in my experience.

[Everade]

On 7/29/2021 at 5:06 PM, Dll said:

The thing is, unless the image sizes are specified on the page, it doesn't matter which method you use, the page will still jump around as it loads. So, instead of height: auto, as it seems to be at the moment, the height of image thumbnails really should be set to the correct number of pixels. 

Yes, layer shifting still happens without specifing the size, that's why you should always specify the size. But layer shift is a whole different story. 😉

However even without specifications, it would still gain a big performance boost because the important content can be loaded before images are starting to show up.
Which is the main purpose of lazy loading.

On top of that, the current system blocks the entire text to be loaded when scrolling, which is most likely the worst case scenario for a forum.
 

On 7/29/2021 at 11:47 PM, Ibai said:

I would not recommend enabling lazy loading for all the images. It makes the forum way slower in my experience.

Test it and see it for yourself.
It's technically not possible to make it slower, that's not how any of this works.
You don't want to enable lazy load in every case, critical images should be loaded directly of course, but that's basically not existant in a topic and/or post.
 

Lazy loading reduces initial load time due to reduced page weight, which is one of the most important things for a website.
It's also a bandwith conservation as it only loads content on request.
And a system resource conservation, as it conserves both server and client resources.
Which is similiar to what we have right now, but WITHOUT the mentioned drawbacks in my original post.

As long as you're not running it on Netscape with a last century potato on dial up that doesn't support lazy loading of course.

 

Edited August 14, 2021 by Everade