How does the loading="lazy" attribute improve page performance?

What is browser-level lazy loading?

Browser-level lazy loading is an HTML attribute that tells the browser to delay loading certain resources until they are needed. MDN Web Docs explains that lazy loading is a strategy to identify resources as non-blocking or non-critical, loading them only when necessary. This means resources that are not immediately visible on the screen are not loaded right away.

You can use the `loading` attribute on elements like `<img>`, `<iframe>`, `<video>`, or `<audio>` to instruct the browser to defer loading of linked resources. For example, web.dev notes that the `loading` attribute can lazy-load images without needing custom JavaScript code or a separate library. The value `lazy` specifically defers loading of the resource until it reaches a calculated distance from the viewport, as defined by the browser.

MDN Web Docs clarifies that for an `<img>` element, `eager` is the default value, which loads the image immediately regardless of its position. The `lazy` value defers loading until the image is near the viewport. Similarly, for an `<iframe>` element, `eager` loads the iframe immediately on page load, while `lazy` defers its loading until it reaches a calculated distance from the visual viewport.

How does lazy loading improve page performance?

Lazy loading improves page performance by reducing initial page load times and network usage. MDN Web Docs states that this strategy shortens the length of the critical rendering path, which is the sequence of steps a browser takes to render the initial view of a page. A shorter critical rendering path directly translates into reduced page load times.

By deferring the loading of off-screen resources, lazy loading allows non-critical content to load only when it is needed. This can speed up initial page loads and reduce the amount of network bandwidth consumed. For images, MDN Web Docs explains that lazy loading avoids the network and storage bandwidth required to handle the image until it is reasonably certain that it will be needed, which improves performance in most typical use cases.

The same principle applies to iframes. MDN Web Docs notes that the intent of lazy loading iframes is to avoid using the network and storage bandwidth required to fetch the frame until the browser is reasonably certain it will be needed. This improves performance and can reduce costs in most typical use cases, particularly by decreasing initial page load times.

Which HTML elements support the loading attribute?

The `loading` attribute can be used on several HTML elements to control when their linked resources are loaded. MDN Web Docs specifies that this attribute is applicable to `<img>`, `<iframe>`, `<video>`, and `<audio>` elements. It instructs the browser to defer loading of these resources when they are off-screen until the user scrolls near them.

For both `<img>` and `<iframe>` elements, the `loading` attribute accepts two primary values. The `eager` value, which is the default, tells the browser to load the resource immediately upon page load, regardless of whether it is currently within the visual viewport. In contrast, the `lazy` value defers loading the resource until it reaches a calculated distance from the viewport, as determined by the browser.

When should you use loading="lazy"?

You should use `loading="lazy"` for images and iframes that are not immediately visible when a page loads. Web.dev explains that lazy-loaded images load as the user scrolls through the page, making it suitable for content below the initial viewport. This ensures that resources are fetched only when a user shows intent to view them.

However, it is crucial to avoid lazy-loading images that are likely to be in the viewport when the page loads, especially the Largest Contentful Paint (LCP) image. Web.dev cautions against this practice, stating that lazy-loading an LCP image will always lead to unnecessary resource load delay and negatively impact LCP. Using lazy loading means the resource will not be loaded until after the layout confirms the image is in the viewport, which can cause it to load later than it otherwise would.

To prevent disruptive layout shifts, web.dev recommends adding `width` and `height` attributes to all `<img>` tags. MDN Web Docs emphasizes that while explicit `width` and `height` attributes are recommended for all images, they are especially important for lazy-loaded ones. If lazy-loaded images do not intersect a visible part of an element, they will never be loaded because unloaded images have a width and height of 0, even if loading them would change their visibility.

What happens if JavaScript is disabled?

The behavior of `loading="lazy"` when JavaScript is disabled has specific nuances. MDN Web Docs documents that for both `<img>` and `<iframe>` elements, loading is only deferred when JavaScript is enabled. This means that if JavaScript is not active, the browser will not apply the deferral mechanism for these elements.

MDN Web Docs explains that this behavior is an anti-tracking measure. If a user agent supported lazy loading when scripting was disabled, a site could potentially track a user's approximate scroll position throughout a session. This could be done by strategically placing images or iframes in a page's markup and then tracking how many are requested and when.

Despite this, web.dev notes that browser-level lazy loading for images still ensures that images load even if the client disables JavaScript. This implies that while the *deferral* mechanism might not be active without JavaScript, the images will still be loaded, likely falling back to an eager loading behavior rather than being entirely absent.

What about browser support for loading="lazy"?

Browsers that do not support the `loading` attribute will simply ignore it. In such cases, the resources will be loaded eagerly, which is the default behavior for images and iframes. This ensures that content remains accessible even in older browsers, though without the performance benefits of lazy loading.

Common questions