Lazy loading for Profile Photos

[SeNioR-]

 

Have you considered introducing Lazy Loading for Profile Photos? This would help with page loading speed, If someone uses GIF or a lot of weighty pictures.

[Everade]

Yes please, the impact can actualy be quite extensive.

Please also add lazy loading for the "Ranks" system which allows image uploads. ?app=core&module=membersettings&controller=ranks

forums/admin/?app=core&module=membersettings&controller=ranks

They're also missing lazy loading. ~

[Fast Lane!]

Have you guys considered just editing the skin to add loading=lazy to the image tags?  It's supported by most browsers these days.  

[Adlago]

IPS for delayed loading images uses data-src in java script.
I apply the following for a user photo on my site - in a template userPhoto
I replace this

<img src='{$member->photo}' alt='{$member->name}'>

with

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src='{$member->photo}' alt='{$member->name}'>

For react like in a template  reactionOverview
I replace

<img src='{$reaction->_icon->url}' alt="{lang="reaction_title_{$reaction->id}" escape="true"}">

with

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src='{$reaction->_icon->url}' alt="{lang="reaction_title_{$reaction->id}" escape="true"}">

This works well on my site.

[Everade]

2 hours ago, Fast Lane! said:

Have you guys considered just editing the skin to add loading=lazy to the image tags?  It's supported by most browsers these days.  

Of course, that's absolutely possible, but the point here is that i don't want to mess with the template all the time, but get it "fixed" in the main release instead.

I use IPB because i want something i can rely on without the need to code, change or modify it all by myself and then fix it up again after every single IPB patch manualy.
So having things works natively is always the best way to go.

 

 

@Adlago Yea i noticed. I also noticed that in hundreds of topics (especially older ones) chrome (and google webmaster tools) reports performance issues on any posted image and whatnot simply because it doesn't seem to work properly. Chrome recognizes it as missing "lazy loading" and results in bad performance ratings eitherway. Not good for SEO ratings from what i can tell.

Would prefer to get the data-src solution being replaced with native lazy loading which is widely supported by now.

[Adlago]

6 minutes ago, Everade said:

Yea i noticed. I also noticed that in hundreds of topics (especially older ones) chrome (and google webmaster tools) reports performance issues on any posted image and whatnot simply because it doesn't seem to work properly. Chrome recognizes it as missing "lazy loading" and results in bad performance ratings eitherway. Not good for SEO ratings from what i can tell.

Would prefer to get the data-src solution being replaced with native lazy loading which is widely supported by now.

This is a good idea - but not everything is accepted by html5 validation. I've experimented with much better performance attributes, but unfortunately validation html5 makes them errors

[Adlago]

PS. The only unpleasant thing about using the data-src is that the IPS has fixed the delay time in javascript. My experiments report that the time that IPS has fixed, for the data-src, is ideal for desktop, but it is a bit for mobile ... I will be happy if IPS takes this time as an option in ACP, so that the administrator can increase / reduces this time for different devices. Moreover, this time should be longer for sites using ads, and less for sites without ads ... It is especially important for mobile .

[Stuart Silvester]

There was a reason we didn't add it to profile photos in the first place, it caused some issues due to how some of the profile photos can be loaded in content via AJAX.

We do ultimately want to move towards native lazyloading (which wasn't a thing when we designed this functionality) it would just be nice if Apple finally supported it on MacOS and iOS - https://caniuse.com/loading-lazy-attr

[Gabriel Torres]

@Adlago I simply added loading="lazy" to img tags from reactions, user photo, and custom blocks/templates from cms. Working like a charm here. BTW user count accessing our website using Safari is currently only at 6.86%. 

 

 

 

Edited January 13, 2021 by Gabriel Torres

[SeNioR-]

@Gabriel Torres

What if someone comes in from a browser that doesn't support Lazy Loading? Pictures will not be displayed at all? Have you checked?

Safari is second in the ranking by statcounter.com with almost 20% of global market share so it cannot be completely ignored.

[Gabriel Torres]

2 hours ago, SeNioR- said:

What if someone comes in from a browser that doesn't support Lazy Loading? Pictures will not be displayed at all? Have you checked?

I am not a Mac user, so I haven't tested this yet.

2 hours ago, SeNioR- said:

Safari is second in the ranking by statcounter.com with almost 20% of global market share so it cannot be completely ignored.

It depends on the market. Our website is specific for a single country (Brazil), and as mentioned, only 6.86% from our users use Safari.

[Stuart Silvester]

4 hours ago, SeNioR- said:

@Gabriel Torres

What if someone comes in from a browser that doesn't support Lazy Loading? Pictures will not be displayed at all? Have you checked?

Safari is second in the ranking by statcounter.com with almost 20% of global market share so it cannot be completely ignored.

 

1 hour ago, Gabriel Torres said:

I am not a Mac user, so I haven't tested this yet.

It depends on the market. Our website is specific for a single country (Brazil), and as mentioned, only 6.86% from our users use Safari.

It's an extra attribute on the image tag, if a browser does not understand it, it will be ignored. It won't break anything.

[SeNioR-]

So you can safely add this attribute in an upcoming release for Profile Pictures and still keep "native lazy loading" for other images until Mac adds support (If tey ever do). I think that's a good solution.

Edited January 14, 2021 by SeNioR-

[SeNioR-]

It really works guys!

My test:

 

[Jordan Miller]

I can confirm our next release (4.6) will include lazy loading for profile photos. 🙂