You may have heard (or even issued the call) that \u201cwe can just use lazy loading!\u201d when looking for a way to slim down a particularly heavy web page.<\/p>\n
Lazy loading is a popular technique for gradually requesting images as they come into view, rather than all at once after the HTML of the page has been parsed. It can reduce the initial page weight, and help us hit our performance budgets<\/a> by requesting images when they’re needed.<\/p>\n It can be effective. But it also comes with some baggage of its own. We\u2019ll get to that! In fact, Rahul Nanwani did an extensive write-up that hits several lazy-loading methods<\/a> and illustrates just how complex some are.<\/p>\n In this post, we\u2019ll look at an implementation that’s already been covered in brief detail in this post by Preethi<\/a>. We’re going to expand on that so you can add your own implementation of lazy loading to your site as I\u2019ve done on this little demo site<\/a>.<\/p>\n <\/p>\n We\u2019ll cover these topics along the way:<\/p>\n <\/p>\n Here\u2019s what we\u2019ll be building:<\/p>\n\n
picture<\/code> and source<\/code> elements<\/a><\/li>\n