High Performance Images

Chapter 8. Lazy Loading

Guy Podjarny

At the beginning of the book, we discussed the large percentage of requests and bytes that images account for. Much of that is due to the sheer amount of data needed to communicate a high-resolution visual. However, another significant portion is usually wasteful. A huge number of images are in fact never seen by the user, and do nothing but waste bandwidth and resources.

The one to blame for this waste is the scroll bar. We’re all very familiar with scrolling down on pages, and today very few pages fully fit on a screen. Only 38% of an average web page is immediately visible on a typical desktop screen (see Figure 8-1). Over 80% of image requests deliver images that are not visible when the page is loaded.

This pattern is even more noticeable on mobile devices, which have smaller screens. The smaller visible area can hold less content (and fewer images), and yet website owners often try to serve the same content regardless of viewport. They often do that while avoiding horizontal scrolling, as it provides subpar user experience. Such mobile pages compensate for the lack of horizontal space with vertical space. In other words, if they can’t make the page wider, they’ll make it longer… which increases the portion of images not immediately visible during load.

While long pages are often the right design and UX decision, images that aren’t immediately visible do have a performance cost. They compete with visible content for bandwidth and CPU, ...