Lazy Loading.

Lazy loading ensures that a website doesn't download all images at once. The browser only fetches content further down the page once the visitor scrolls close to it. This saves data usage for the content that is immediately visible. According to web.dev, images are the most frequently requested file type on most websites and usually require more bandwidth than anything else.

How Lazy Loading Works

Modern browsers support lazy loading without any additional software. To enable this, an image or an embedded iFrame is given the attribute `loading="lazy"` in the HTML. According to web.dev, the browser then waits until the element is within a calculated distance from the visible area before loading it. With a fast connection, Chrome starts loading about 1,250 pixels before the element becomes visible; with a slow connection, it starts about 2,500 pixels before, so that the image is usually fully loaded by the time the user scrolls to it.

In addition, there are JavaScript-based solutions, such as the IntersectionObserver API. According to Google Search Central, all of these methods are suitable for search as long as content is loaded as soon as it enters the visible area. Google does not scroll, click, or swipe on your page.

What Your Business Should Keep in Mind

Never delay loading the first large image. Google explicitly advises against using lazy loading for content that is immediately visible when the page opens. The cover image is often the largest element and therefore determines the Largest Contentful Paint metric in the Core Web Vitals. In projects, we often see that a plugin delays the loading of all images across the board, including the top one.

Specify the width and height for each image. Without fixed dimensions, the browser won't know how much space to reserve. According to web.dev, the content will then jump around as the page reloads, and in the worst case, the browser might even load all the images immediately because they initially appear to be zero pixels in size.

Check whether Google can see the images you've uploaded. According to Google, the URL Inspection Tool in Search Console shows whether the image URLs appear in the rendered HTML. Our article " How to Use Google Search Console Correctly" explains how to use this tool.

Before and after. In our Cologne-based trades website report, the median LCP on mobile was 6.0 seconds; only 12.5% of pages achieved 2.5 seconds or less. Only measurement can show whether a change helps.

Frequently Asked Questions About Lazy Loading

Does lazy loading hurt my ranking? Not if content is loaded automatically without any action on the visitor's part. However, according to Google, Search does not load content that only appears after swiping, clicking, or tapping.

Does lazy loading always make a page faster? No. In an analysis by web.dev, pages with lazy loading had, on average, a worse LCP than pages without it. web.dev emphasizes that this is a correlation, not proof, but recommends loading images in the above-the-fold area normally.

Does this apply only to images? The HTML attribute is available for images and iFrames—such as embedded maps or videos. According to MDN, the principle can also be applied to scripts that aren't needed during the initial page load.

The Speed Check shows you whether your cover image is loading too slowly and where your page is losing time. You can also reduce file sizes by using the WebP image format.