How to lazyload images

Lazy loading is a technique used to improve the performance of a website by defering loading of imagery at page load time. Instead these images are loaded only when needed.

In this screencast, I demonstrate how you can start lazyloading images with the feature rich JavaScript plugin lazysizes.

lazysizes is a fast (jank-free), SEO-friendly and self-initializing lazyloader for images (including responsive images picture/srcset), iframes, scripts/widgets and much more. It also prioritizes resources by differentiating between crucial in view and near view elements to make perceived performance even faster.