Jump to content

Lazy load profile pictures on IPS 4.5


sobrenome

Recommended Posts

  • 5 months later...

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

  • 1 month later...

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 by Paul E.
Marketplace link.
Link to comment
Share on other sites

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. 🙂 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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 🙂 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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">

 

Link to comment
Share on other sites

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 🤠'

Link to comment
Share on other sites

  • 3 months later...
  • Recently Browsing   0 members

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