Jump to content

Native Lazy Loading - Finally fix scrolling topics


Recommended Posts

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

1995_spacer.gif.c0d83c5d049a92bb711bbcc42efec681.gif

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.

forget men in black GIF


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. :wub:

 

Edited by Everade
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by Dll
Link to comment
Share on other sites

  • 2 weeks later...
Posted (edited)
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 by Everade
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

√ó
√ó
  • Create New...