Feature Request - Skip Lazy Load Using Image Class Name

[kestraly]

Great work Jisse with this plugin, my thoughts would be perhaps adding the ability to skip lazy loading by adding classs="skip_lazyload"

Then in yireo/magento2-next-gen-images/view/frontend/templates/picture.phtml

Perhaps adding something like this

if(strpos($class, 'skip_lazyload') === false){
$originalTag = preg_replace('/(\/?)>$/', $lazyLoading . '\1>', $originalTag);
}

Giving the ability to skip lazy loading for images that are above the fold?

Perhaps even allowing the skip_lazyload to be determined in system.xml configuration.

This issue can be closed once read.

[jissereitsma]

Thanks. But I think this functionality would be much more to be picked up by a module that deals with lazy loading right? The core feature of this module is to replace existing image formats with newer formats, like WebP. The feature of lazy loading was once added via a PR. However, the more features would be added for lazy loading, the more I would say that this really needs to be a separate module.

Note that the lazy loading feature can be disabled in this module. So if you are going to go through specific templates to add a CSS class skip_lazyload, you could also simply just disable this lazy loading addition and add it manually to all templates instead. It sounds to me like the same effort.

Unfortunately, detecting the fold itself is actually something PHP will never be able to do, it purely is a JavaScript thing. Theoretically, this means also that adding lazy loading needs to be done via JavaScript as well, with something like the intersection API...

[kestraly]

Sort of, but it was more a case of just disabling it for a few elements that are above the fold that get flagged by GTmetrix and Google Insights.

So adding a skip_lazyload to the homepage banner and category images was the only requirement I had for it.

It works out as a 2 minute fix rather than going through all the templates and adding lazy load. I didn’t really want to add another library to the already overweight Magento.

[MagePsycho]

+1 I am also looking for a solution. The banner I have on the homepage is above the fold and giving an issue in google page speed. If there's a way to skip the images for lazy loading would be great.

[MagePsycho]

@jissereitsma I have a third-party banner module. Adding <div class="third-party-banner-wrapper skip_lazyload">...</div> skips the .webp conversion also.

Can we just skip the loading="lazy" attribute only but keep the .webp conversion?

[jissereitsma]

@MagePsycho The skip lazy load feature is not designed to also skip the WebP conversion. Could it be that there is some other reason why the WebP conversion is not working? For instance, if you disable the lazy loading feature in the WebP module, then WebP should logically work everywhere. If it does not, it is a different issue, which needs to be investigated separately.

[MagePsycho]

@jissereitsma It's only skipping the images under that div. So you mean it should still convert for that div even if it has class="skip_lazyload"?

[jissereitsma]

It should.

Note that this class is responsible for skipping things on an entire page: https://github.com/yireo/Yireo_NextGenImages/blob/master/Util/ShouldModifyOutput.php That's the only occurrance of the word "skip" in my extension as of yet. The issue is therefore still open because the feature request was not picked up yet. The functionality that you mention could be causing this bug of yours, does not exist in the actual codebase, only in this thread.

[MagePsycho]

I check the Yiero code base where the "skip_lazyload" has been used but surprisingly I didn't find it. But I noticed the usage of $block->setLazyLoading(false) for the block for which you don't want the lazy loading.

So can we utilize $block->setLazyLoading(false) for my banner block in order to remove the lazy loading? In other words, what's the correct approach if you wanna bypass lazy-loading?

[jissereitsma]

Theoretically, you can, because you can intercept blocks with either observers or DI plugins. But if you are asking if it is supported by this very extension, the answer is no. The existence of this very issue here is showing that the feature is not yet implemented. Otherwise, the issue could be closed.

[kestraly]

@MagePsycho - Adding the that change in the first post works a treat for me. Just have to copy vendor/yireo/magento2-next-gen-images/view/frontend/templates/picture.phtml to your theme

app/design/frontend/vendor/theme/Yireo_NextGenImages/templates/picture.phtml

Then replace

$originalTag = preg_replace('/(\/?)>$/', $lazyLoading . '\1>', $originalTag);

with

if(strpos($class, 'skip_lazyload') === false){
$originalTag = preg_replace('/(\/?)>$/', $lazyLoading . '\1>', $originalTag);
 }

Next put skip_lazyload as a class for your image and it won't add the lazyload tag, but will ensure you have webp generation and tags.

I then added https://github.com/fisheyehq/module-lazyload which adds JS library lazysizes https://github.com/aFarkas/lazysizes, where you can find CSS examples for lazy loading.

I do appreciate @jissereitsma putting in so much time with this plugin, which is a very very nice addition.

[MagePsycho]

@kestraly With your fix, it also skips the <img/> to <picture/> conversion. Theoretically, it looks like it should do the job.

[kestraly]

There must be something else getting in the way. All the images still work fine for me with the picture tags with or without lazyload being added.

I would just insert an image into a CMS file and add the class="skip_lazyload" to test it., but so far no issues for me. However this plugin has not converted any home page banners I have to webp, but that's not an issue for me.