What is lazy loading images?
Lazy loading is a technique that defers the loading of non-critical resources at page load time. Instead, these res...
For further actions, you may consider blocking this person and/or reporting abuse
I added lazy loading to my Jekyll blog a couple weeks ago, and the results were immediately noticeable. Now most of my pages get a solid 100 on PageSpeed Insights.
I wrote a Python script, thumb, that lets me quickly generate scaled-down thumbnails of each image in my assets folder. These are about 1 KB each and serve as fuzzy/blurry placeholders. I then use the IntersectionObserver API to replace the blurry images with the actual image.
On top of all that, I'm also using WebP with fallbacks and generating WebP copies for all of my images in one go with another Python script, webp, that basically just wraps around the
cwebpandgif2webpCLI tools that Google ships.Thanks for sharing your experience.
Great intro-post for us that's never implemented lazy loading.
For the future it would be best of you did something similar for loading thumbnails/compressed/blurred images before real ones for performance.
How is this library? github.com/aFarkas/lazysizes
lazysizes is a good well-documented library, I have personally never used it.
there are other library options as well:-
->blazy
->lozad.js
->react-lazyload
The motive of this article was to show how lazy load works under the hood. Otherwise, you can always grab a library and call it a day.