We have a custom module that adds 3 "related posts" at the end of each blog post. The way it's written (and I'm not a dev), it doesn't have a typical "img" tag. Iv'e switched to lazy loading on hundreds of our pages and images, but not for this module. And the module is putting 3 images on every page, so it has a big impact on google scores/redflags, for not being deferred images.
Here is the section of our custom related-posts module, that I think is relevant to the images being used:
With those pieces to work with, how might I go about getting those images added via the related posts module, to be lazy loaded?
Is there something I could put in the class .related-image .related-img that would work, or is there more to do? If I added an LL script like lozad, can I then just add something to the .related-image line to make it all work, or do I need to add something to the module calling on the class?
Nov 22, 202110:15 AM - edited Nov 22, 202110:15 AM
Guide | Elite Partner
Some dev-minded help with lazy load situation
Oh, @MiaSrebrnjak and I forgot to tell you, since you use height on the .related-image .related-img, you could also change the fixed height to aspect-ratio. Since it has good support by all modern browsers.
But if you want to do this properly, you can also resize the image max width and height so it won't load the full image. Read the documentation about it. So your code will look like this: