Day 11 of⚡️ #30DaysOfWebPerf ⚡️
One major way we can get image savings is through lazy loading images not in the viewport.
Chrome now supports this natively using Intersection Observer! addyosmani.com/blog/lazy-load…
⚡🦄🐈🌈🐼🍕🎂🍾🎉🐶⚡🦄🐈🌈🐼🍕🎂🍾🎉🐶⚡🦄🐈🌈🐼🍕🎂🍾🎉🐶⚡🦄🐈🌈14:45 PM - 22 Nov 2019
Sadly, it doesn't look like it's on the radar for non-Google browsers anytime soon. 😭😭😭😭😭😭
caniuse.com/#feat=loading-…14:45 PM - 22 Nov 2019
If you use @googleanalytics, you can import your data into @caniuse to see your specific users - the top-right of the screenshot above shows that only 40% of my users have native lazy loading support.
I wrote a quick post on setting this up here: sia.codes/posts/google-a…14:46 PM - 22 Nov 2019
So if native lazy loading isn't supported by most of your users' browsers, then JavaScript-based tools are your best bet.
yall.js by @malchata is one great solution: github.com/malchata/yall.…
And @katiehempenius wrote up a full tutorial on lazysizes: web.dev/use-lazysizes-…14:46 PM - 22 Nov 2019
Top comments (0)