Chrome's Native Lazy Loading now live

[asigno]

Chrome's native lazy loading is now live on Chrome 76

https://web.dev/native-lazy-loading

 

Please can we have this enabled as default with a fall back for other browsers.

 

[Fast Lane!]

Agreed.  Native is better than custom.

[bfarber]

It's only a beta feature (i.e. it's hidden behind a special flag you have to manually enable) in Chrome 76, which was released 13 days ago.

I think we need to give a little time for this to mature first, but definitely when it does I think moving to natively supported browser functionality where possible would make sense.

[aia]

1 hour ago, bfarber said:

It's only a beta feature (i.e. it's hidden behind a special flag you have to manually enable) in Chrome 76, which was released 13 days ago.

No, it's live in all browsers based on chromium 76+. Caniuse just didn't updated their info yet. Test it yourself, it works in latest stable chrome by default.

[bfarber]

https://web.dev/native-lazy-loading

Admittedly I haven't tested it, I was going directly by the documentation on the very website you linked to. Perhaps this sentence means prior to 76 you had to enable the flags, and if so that's great that it's out "stable" now. Still, if no other browsers support the functionality, and Chrome only began supporting this functionality 13 days ago, it's probably worth giving the feature some time to mature before jumping on it. ;) 

[asigno]

@bfarber No it's live now if you've downloaded the latest v76.

 

The BBC have just done a quick case study on it as below:

 

[Fast Lane!]

6 hours ago, asigno said:

@bfarber No it's live now if you've downloaded the latest v76.

 

The BBC have just done a quick case study on it as below:

 

That's pretty awesome.  We have a fairly tech neutral audience and chrome is nearly 50% of our users.

[aia]

14 hours ago, bfarber said:

it's probably worth giving the feature some time to mature before jumping on it. ;) 

It will be mature enough when next Invision Community will be released ;)

Personally i would love to have this feature in IC as soon as possible, because ~83% of my users are using chromium-based browsers, and most of them are on up-to-date versions. It's good enough value for giving them this native feature and use IPS's implementation as Polyfill for other small group of users.

[Fast Lane!]

UserPhoto template... these changes will ad it for basic user photos across the suite.  In post images are TBD on updating...

{{if $member->member_id and \IPS\Member::loggedIn()->canAccessModule( \IPS\Application\Module::get( 'core', 'members' ) )}}
{{$memberURL = ( $warningRef ) ? $member->url()->setQueryString( 'wr', $warningRef ) : $member->url();}}
	<a href="{$memberURL}" {{if $hovercard}}data-ipsHover data-ipsHover-target="{$memberURL->setQueryString( 'do', 'hovercard' )}"{{endif}} class="ipsUserPhoto ipsUserPhoto_{$size}{{if $classes}} {$classes}{{endif}}" title="{lang="view_user_profile" sprintf="$member->name"}">
		<img src='{$member->photo}' loading='lazy' alt='{$member->name}'>
	</a>
{{else}}
	<span class='ipsUserPhoto ipsUserPhoto_{$size} {{if $classes}}{$classes}{{endif}}'>
		<img src='{$member->photo}' loading='lazy' alt='{$member->name}'>
	</span>
{{endif}}

 

[asigno]

Does anyone know if this is being used with 4.5?

[bfarber]

13 hours ago, asigno said:

Does anyone know if this is being used with 4.5?

We use a custom lazy loading solution, rather than the new built in lazy loading option Chrome provides. As time goes on and and the behavior is more widely adopted by other user agents, we will explore switching to the native option.

[h2ojunkie]

5 hours ago, bfarber said:

We use a custom lazy loading solution, rather than the new built in lazy loading option Chrome provides. As time goes on and and the behavior is more widely adopted by other user agents, we will explore switching to the native option.

Chrome and FF both support it.  MS edge chromium engine will release on Jan 15th'ish. So about 60% of all web traffic is covered with loading=lazy right there (until safari adapts it). 

In addition, loading=lazy works intelligently in combination with traditional lazy loading scripts (they built it into the browser engine).  You actually get even better performance when using BOTH.   There's zero downside to including that attribute on all images and iframes in addition to the javascript version. You get the best of both worlds. 

[asigno]

@h2ojunkie It'll actually be about 85% of web traffic come Jan.

https://gs.statcounter.com/browser-market-share/desktop/worldwide

[asigno]

I've just received confirmation from an Apple Webkit engineer it's coming to Safari too.

[Fast Lane!]

My vote is to follow the web standard versus having a "heavy" native/custom solution. It's easier on IPB to maintain and better for speed overall. 

[bfarber]

The standard wasn't published until after we implemented our own solution, and I'm certain in due course we will switch over to it.

[Tom S.]

On 12/17/2019 at 9:47 PM, h2ojunkie said:

Chrome and FF both support it.

Might be the wrong thing or out of date, but this says FF does not support it:

https://caniuse.com/#feat=loading-lazy-attr

[Sovereign Grace Singles]

Just curious how lazyload affects people using ads? Don't ads load with the page regardless of scrolling without lazyload? Seems that this would cut "impressions" down quite a bit?

[Fast Lane!]

Lazy load is only for images; not ads.  Google would never torpedo their core product.

Edited December 20, 2019 by Fast Lane!

[aia]

Well, it now supported in all popular browsers:

1. all current chromium-based browsers (Chrome, Edge, Opera, Yandex, etc).
2. the future release of Firefox (75, will be released in less than a month).

These browsers are covering more than 94% of traffic on my websites, so I already implemented native lazy loading on some of them. And it works just great 

Edited March 10, 2020 by Mr 13

[Fast Lane!]

I think IPB should migrate to this now since it's a standard versus custom.  Custom requires in-house support of the code which alone is a decent reason to swap over. It also requires additional JavaScript overhead that is no longer required. 

[bfarber]

I've brought this up internally for further consideration in a future release now that support is starting to gain more traction. 🙂

[sobrenome]

On 3/10/2020 at 11:59 AM, bfarber said:

I've brought this up internally for further consideration in a future release now that support is starting to gain more traction. 🙂

Great news!