Add lazy loading in Theme

[blogi-kriptovalyut]

Summary

Sometimes pages contain an awful lot of images. In that case we want these images to only load when the user scrolls down.

Motivation

When your blog post has a lot of content and the people have to scroll to see the images of the content, then Google suggest loading the images after the whole DOM is loaded first.

Most modern websites use lazy loading of images, frames and other site elements

[mmistakes]

I don't think there is much the theme can do here. Could certainly add the new loading=lazy attribute to hero images as those are theme driven. But what you're asking is to apply that to the images found in a body of a post/page.

This isn't something the theme can directly impact. You'd need some sort of Jekyll plugin to rewrite <img> elements generated by the Markdown conversion.

Back when my personal site was powered by Jekyll I did this. You can find the plugin source here. You'd also need to install the Lazysizes script to make it work as that was the method I used for lazy loading to support browsers that don't have the new loading attribute.

This plugin does something similar and is actually packaged like Jekyll plugin with docs... unlike mine.
https://github.com/kenchan0130/jekyll-lazy-load-image

[blogi-kriptovalyut]

I don't think there is much the theme can do here. Could certainly add the new loading=lazy attribute to hero images as those are theme driven. But what you're asking is to apply that to the images found in a body of a post/page.

This isn't something the theme can directly impact. You'd need some sort of Jekyll plugin to rewrite <img> elements generated by the Markdown conversion.

Back when my personal site was powered by Jekyll I did this. You can find the plugin source here. You'd also need to install the Lazysizes script to make it work as that was the method I used for lazy loading to support browsers that don't have the new loading attribute.

This plugin does something similar and is actually packaged like Jekyll plugin with docs... unlike mine.
https://github.com/kenchan0130/jekyll-lazy-load-image

Thanks for your reply.
It seems to me that this is a really important function that meets the needs of today.
I found such a solution, but haven't tested how it works yet. It looks pretty simple.
https://jekyllcodex.org/without-plugin/lazy-loading/

[gildesmarais]

If you don't want JavaScript and automatically add loading=lazy, then https://github.com/gildesmarais/jekyll-loading-lazy seems like a perfect fit. :)

[blogi-kriptovalyut]

If you don't want JavaScript and automatically add loading=lazy, then https://github.com/gildesmarais/jekyll-loading-lazy seems like a perfect fit. :)

Thanks for the link, one of these days I will definitely try this solution !
p,s, sorry for my English :)

[piyushpaliwal]

You can actually try https://nhoizey.github.io/jekyll-cloudinary/