Does lazy loading hurt SEO?

What is lazy loading?

Lazy loading is a strategy that identifies resources as non-blocking or non-critical, loading them only when they are needed. This approach helps to shorten the critical rendering path of a web page, which directly translates into reduced page load times. By deferring the loading of certain elements, a website can speed up its initial page loads and decrease network usage for visitors.

MDN Web Docs explains that this method allows non-critical resources to load only if required, which can significantly improve the user experience. For example, images or videos that are far down a page and not immediately visible to the user do not need to load as soon as the page opens. While eagerly-loaded content triggers the load event when it has all been loaded, it is possible, or even likely, that lazily-loaded content within the visual viewport may not have loaded yet at that time.

How does native lazy loading work?

You can implement lazy loading for images and iframes using a native browser feature, which eliminates the need for custom JavaScript code or external libraries. MDN Web Docs notes that the `loading` attribute on an `<img>`, `<iframe>`, `<video>`, or `<audio>` element instructs the browser to defer loading of linked resources when these elements are off-screen, until the user scrolls near them.

When this attribute is applied, lazy-loaded images only begin to load as the user scrolls through the page. web.dev states that Chrome, for instance, loads images at different priorities based on their location relative to the device viewport. Browsers that do not support the `loading` attribute will simply ignore it, meaning the content will load eagerly as normal without causing errors.

Does lazy loading affect Largest Contentful Paint (LCP)?

Yes, lazy loading can negatively impact Largest Contentful Paint (LCP) if not used carefully. LCP is one of the Core Web Vitals metrics, measuring how quickly the main content of a web page loads. To provide a good user experience, web.dev recommends that sites aim for an LCP of 2.5 seconds or less for at least 75% of page visits.

A common mistake that harms LCP is lazy-loading the LCP image itself. web.dev warns that you should never lazy-load your LCP image, as this will always lead to unnecessary resource load delay and negatively impact LCP. This often happens when the LCP element is lazy-loaded with a JavaScript library that hides its `src` or `srcset` attributes, perhaps as `data-src` or `data-srcset`.

To ensure your LCP resource loads as early as possible, it is critical that the resource is discoverable in the initial HTML document response by the browser's preload scanner. All browsers render images on the main thread, so anything that blocks this thread can also cause unnecessary element render delay. You can hint to the browser which resources are most important using the `fetchpriority` attribute, for example, `<img fetchpriority="high" src="/path/to/hero-image.webp">`. However, setting a high priority on more than one or two images makes this priority setting unhelpful in reducing LCP.

What are the best practices for lazy loading images?

To use lazy loading effectively without harming performance metrics like LCP, follow specific guidelines. web.dev cautions against lazy-loading images that are likely to be in the viewport when the page first loads, especially LCP images. Instead, use `loading="lazy"` only for images that are outside the initial viewport.

For images that are critical or appear above the fold, ensure they are loaded eagerly. You can also use the `fetchpriority="high"` attribute for one or two truly critical images to signal their importance to the browser, but avoid overusing it. Additionally, to prevent disruptive layout shifts as images load, web.dev recommends adding `width` and `height` attributes to all `<img>` tags. This allows the browser to reserve enough space on the page for the images before they fully load.

How can you test lazy loading?

You can test your lazy loading implementation to ensure it is working as intended and not negatively impacting performance. web.dev notes that Lighthouse 6.0 and higher factor in approaches for offscreen image lazy loading that can use different thresholds, allowing them to pass the "Defer offscreen images" audit. This audit helps verify that images not immediately visible are indeed being lazy-loaded.

For individual images, MDN Web Docs explains that you can determine if a given image has finished loading by examining the value of its Boolean `complete` property. This can be useful for debugging or for custom scripts that need to react to an image's loaded state.

Common questions