a low quality image or solid color block) appears in the viewport, which is then replaced by the final image. When you visit a page, and as you begin to scroll down, at some point as you approach an image below the fold, usually a placeholder (e.g.

In the next sections, we'll look at our options.įor images, lazy-loading should always be accompanied by image optimization, the use of modern image formats, and a responsive image strategy to generally reduce the amount of data that needs to be loaded when requesting these resources. While we'll mainly focus on image loading in this recipe, it's worth noting that lazy loading can be applied to just about any resource on a page: HTML, stylesheets, JavaScript, images, videos, or iframes.Īnd the good news is that lazy-loading is pretty easy to implement. Lazy-loading is therefore a best practice, especially on websites with a lot of (media) content. Lazy-loading of resources, on the contrary, delays the loading of below-the-fold resources until they are actually needed, i.e., until the user scrolls near them, which results in a much smaller initial payload and improved performance. Taken together, all these factors are ultimately bad for your business and for the environment. But it also affects the overall user experience and performance of your website, and therefore also hurts from a SEO perspective.

This is a big waste of resources in terms of data transfer, processing time, and memory usage. The richer the content on the page, the more stuff will likely be loaded unnecessarily and the longer the user has to wait until the page loads.

When you visit a website that doesn't implement lazy-loading, the browser loads every single resource on the opened page, regardless of whether the user ever scrolls down to view such off-screen content. Images and other media files are usually large in size and contribute the largest part to a website's payload.

Loading image