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 cwebp and gif2webp CLI tools that Google ships.
I am a JS developer with industry experience in OTT and E-commerce domain building websites, web applications and PWA. I specialize in JavaScript with experience in react, node.
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.