Hi Everybody.
I have an issue. I have a lot of products and some products are give defer off screen images issue.
For Example:
Mistake:Lighthouse Report Viewer
Unmistake: Lighthouse Report Viewer
Thanks for everything…
1 Like
You certainly have a fair bit of work cut out for you based on those lighthouse reports! There is a lot of tips in there and I’m not sure exactly which one you were referring to. But I always recommend people approach their website improvement iteratively - fix one thing at a time, maybe 1 issue every week.
If you want to defer loading of images into they are in the viewport or very nearly in the viewport there are quite a few nice open source libraries out there. Personally I have had pretty good experience with the lazysizes JS library and have used this as part of what it took to get my website to 100/100 on lighthouse.
So maybe start there as your one iteration for this week and see how much your score goes up!
1 Like
These days you are probably best off using the browser native support for lazy loading rather than relying on a JS library.
You can just add loading=“lazy” to the images and the browser will take care of it automatically (best if you can skip it on the hero images for the page though).
1 Like
It is encouraging to see lazyloading becoming native!! But I found browser support in the real world to still be quite poor (Lazy loading via attribute for images & iframes | Can I use... Support tables for HTML5, CSS3, etc) and it only applies to certain elements.
- Native Lazyloading doesn’t work on any iPhone,iPad, or Safari on Mac. iPhones are still a pretty high percentage of web traffic and certainly part of CrUX data and google’s observation of core web vitals.
- Firefox only supports loading lazy on image elements
With LazySizes I can detect other non-image elements coming into the viewport and defer loading of those other elements (like the social sharing links for posts on my site, they don’t exist in static site DOM, lazy loaded from a CloudFlare Worker only when they are entering the viewport).
But I understand the intent… browser’s may replace this JS soon. 
1 Like