Lazy load profile pictures on IPS 4.5

[sobrenome]

If lazy load is enable, why not lazy load profile pictures on IPS 4.5?

On some pages there are many profile pictures with big sized images.

[Thomas P]

Hi,

those are SVG images, which are text and compressed via HTTP Gzip. 🙂

If you mean the uploaded images - good suggestion.

 

Regards,
Thomas

Edited July 17, 2020 by Thomas P

[sobrenome]

5 hours ago, Thomas P said:

If you mean the uploaded images - good suggestion.

Yes! 😊😊😊

[Gabriel Torres]

Just bumping this to say that I've been trying to optimize our website with Google Lighthouse, and one of the suggestions is that we enable lazy loading for the user uploaded avatars. See below. So +1 for enabling lazy loading on users' avatars.

[Gabriel Torres]

After researching about this, browsers have now native lazy loader. We only need to edit the templates to add:

loading="lazy"

To all img tags.

I edited the following templates:

core > front > global

reactionBlurb
reactionLog
reactionOverview
reactionTabs
reputation
userPhoto
userPhotoFromData

This enabled lazy loading for user photos and reactions, and the "Defer offscreen images" warning from Google Lighthouse is now gone! 🙂

(I also made the same edit in my cms custom templates)

Edited January 13, 2021 by Gabriel Torres

[SeNioR-]

Agree, explanation is here.

 

[Matt]

We are discussing this internally. 👍

[SeNioR-]

It really works guys!

Before (unmodified template)

After add lazy-loading attribute to

[Rick Vasquez]

bumping for the incredible tip. This drastically reduces page load times and should be integrated with the lazy load feature in IPS 4.5 or 4.6 when it comes out. Really simple change to the templates made a major difference.

[Jordan Miller]

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

[Jordan Miller]

We have more lazy loading updates on the way as well. Check them out here (and please comment 😊)

 

 

[CoffeeCake]

One day, future time traveler, 4.6 will appear. Until that day, here's a plugin that does what @Gabriel Torres documented for you for 4.5.

 

Lazy Load Images.xml

Submitted to Marketplace as a free resource for those that like the Marketplace thing:

 

Edited February 23, 2021 by Paul E.
Marketplace link.

[Jordan Miller]

2 hours ago, Paul E. said:

One day, future time traveler, 4.6 will appear. Until that day, here's a plugin that does what @Gabriel Torres documented for you for 4.5.

 

Lazy Load Images.xml 4.95 kB · 4 downloads

Submitted to Marketplace as a free resource for those that like the Marketplace thing:

 

Wow. Nice work! Thank you. Curious to see how this performs. 🙏 

I'm eager/excited for 4.6 too. I'll add to my community later today and see what happens. 🙂 

[CoffeeCake]

13 minutes ago, Jordan Invision said:

I'll add to my community later today and see what happens. 🙂 

No idea how it will work with a third-party theme. It's simple theme hooks based on the default theme, and simply adds the loading="lazy" attribute to <img> tags as @Gabriel Torres documented.

[zyx]

On 1/13/2021 at 2:51 AM, Gabriel Torres said:

After researching about this, browsers have now native lazy loader. We only need to edit the templates to add:

loading="lazy"

To all img tags.

I edited the following templates:

core > front > global

reactionBlurb
reactionLog
reactionOverview
reactionTabs
reputation
userPhoto
userPhotoFromData

This enabled lazy loading for user photos and reactions, and the "Defer offscreen images" warning from Google Lighthouse is now gone! 🙂

(I also made the same edit in my cms custom templates)

Thanks, that's great to know!

Presumably the admin cp lazy loading setting has to be enabled for the loading="lazy" code to work?

We are in an odd situation where we actually don't want lazy loading for forum attachments, but would like it in other areas like profile pictures. 

[Ibai]

10 hours ago, theipsguy said:

Thanks, that's great to know!

Presumably the admin cp lazy loading setting has to be enabled for the loading="lazy" code to work?

We are in an odd situation where we actually don't want lazy loading for forum attachments, but would like it in other areas like profile pictures. 

You don't need to enable that setting in ACP. It's enough changing the template bits adding the loading="lazy" property 🙂 

[Jordan Miller]

On 2/23/2021 at 12:37 PM, Paul E. said:

No idea how it will work with a third-party theme. It's simple theme hooks based on the default theme, and simply adds the loading="lazy" attribute to <img> tags as @Gabriel Torres documented.

I installed it but I'm not sure I see any changes? But that's better I presume than seeing something broken lol 

Looking forward to it being baked into 4.6!

[CoffeeCake]

13 minutes ago, Jordan Invision said:

I installed it but I'm not sure I see any changes?

I went to your web site. I had a fight with the thing angry at me that I had an adblocker. Lied and told it I disabled it. It sensed my deceit.

Then I clicked to find a forum post--any forum post. Found one. Conservatorship. Clicked on a topic, and then had a fight with your web site telling me I've had my fill of free content for the day and inviting me to register. While a video played. In the corner. And there were flashing lights.

I tried. 🙂

It should add, in the locations Gabriel Torres mentioned here a loading="lazy" attribute to reaction images, reputation images, and avatars. But, I'm not sure how/if it would work with the custom theme you have installed. There will be nothing visually different, however if you inspect the img tags for those locations, you should see loading="lazy" added, as shown below:

<img src="/path/to/avatar.jpg" loading="lazy">

 

[Jordan Miller]

Just now, Paul E. said:

I went to your web site. I had a fight with the thing angry at me that I had an adblocker. Lied and told it I disabled it. It sensed my deceit.

Then I clicked to find a forum post--any forum post. Found one. Conservatorship. Clicked on a topic, and then had a fight with your web site telling me I've had my fill of free content for the day and inviting me to register. While a video played. In the corner. And there were flashing lights.

I tried. 🙂

It should add, in the locations Gabriel Torres mentioned here a loading="lazy" attribute to reaction images, reputation images, and avatars. But, I'm not sure how/if it would work with the custom theme you have installed. There will be nothing visually different, however if you inspect the img tags for those locations, you should see loading="lazy" added, as shown below:

<img src="/path/to/avatar.jpg" loading="lazy">

 

Is this a bad time to say 'Remove your ad blocker and become a member 🤠'

[Linux-Is-Best]

55 minutes ago, Paul E. said:

I had a fight with the thing angry at me that I had an adblocker. Lied and told it I disabled it. It sensed my deceit.

🤣  You cannot hide. 😂

 

Edited February 25, 2021 by Linux-Is-Best
cleaner video

[Jordan Miller]

6 minutes ago, Linux-Is-Best said:

🤣  You cannot hide. 😂

 

This will give me nightmares lol

[Gabriel Torres]

Returning here just to thank the IPS team @Jordan Invision for adding the Lazy Loading featured we suggested in the 4.6 series! 🙂