Hi @essaund,
one way would be to manually add the class skip-lazy to the images that are visible on page load, to exclude them from lazy loading. Or you could use this snippet of code (https://gist.github.com/florianbrinkmann/abdf929694a72e75c33d7a4254301f42) to automatically add the skip-lazy class to the first image in the post. If you want to add it to more than the first, you can increase the 1 in line 50: https://gist.github.com/florianbrinkmann/abdf929694a72e75c33d7a4254301f42#file-functions-php-L50
Hope that helps.
Best,
Florian
Hello
Thanks for your reply.
Now, my intention is to keep lazyload intact on these images but speed up loading. If I exclude them from lazyload then Google’s core web vitals will point them out as elements that need to have lazyload.
Is that possible? Like the lag is a downside a bit. Like all elements on the page have loaded then the images appear later. This happens in split seconds an easy to miss for someone not concerned about user experience.
Hi,
you could use the snippet from above to add a class like no-transition to the first image(s) and use the following CSS to remove the transition after the image is loaded that comes with Lazy Loader:
.lazyloaded.no-transition {
transition: none;
}
That should make them appear faster.
Best,
Florian
