Loading images lazily with Jekyll (natively & automatically)
An important metric in today’s websites is performance. Loading images lazily — meaning they are only loaded when they’d become visible — is one of the big wins to implement.
Over time the methods to achieve it changed.
src attribute of an image. The browser then requested and rendered it.
Scroll listeners, when setup without an IntersectionObserver, are bad for the perceived performance. Sure, there’s a library for doing things correctly, but it takes a hit on the website’s weight.
You just need to add the
loading attribute to all your
<iframe> tags. The browser then natively loads them lazily.
As a Jekyll user your website probably contains plenty of images. You could start changing the code and add the required attributes to all images. And let’s hope you do not forget adding them when you write content in a few days from now…
jekyll-loading-lazy plugin sets the needed attributes automatically.
It has zero configuration options.
Your Jekyll website directly profits from native lazy loading.
A quick change for an instant and long-lasting win.
Find its README and the source on Github. The gem is published on RubyGems.