From the course: Developing for Web Performance

Unlock this course with a free trial

Join today to access over 24,600 courses taught by industry experts.

Lazy-loading images

Lazy-loading images

From the course: Developing for Web Performance

Start my 1-month free trial Buy for my team

Lazy-loading images

“

- [Instructor] What if I told you the absolute biggest, most impactful performance optimization you can implement with images is to just not load the images at all? Sounds like not what you want, right? Actually, it's exactly what you want. Let me explain. Say you have a standard web page. There is a header and maybe a featured image and then some content and some images and videos, and maybe an iframe or something else. When the browser loads this page, it loads in all of the images, even if the user never scrolls and never gets to see them. Or rather, that's how it used to work until very recently. Loading images, videos, and iframes the user never scrolls to has always been a major performance issue on the web. We're simply wasting data that we shouldn't be wasting. To deal with this issue, developers started adding lazy loading JavaScript libraries that would wait for the user to scroll close to an element before the…

Contents