Jump to content

Lazy loading for Profile Photos


SeNioR-

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 .

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 3 weeks later...
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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 month later...
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...