> Deprecated: > This check only exists in Theme Check `v1.X.X`. > Lazy loading has been observed to be more detrimental than helpful when used _everywhere_. You're often better off not lazy loading at all. Lazy loading is a strategy to identify resources as non-blocking and load them only when needed. It's a way to shorten the length of the critical rendering path, which translates into reduced page load times. You should load images only when they're needed on a page, and consider using placeholders until customers scroll down the page. This can also help with perceived performance as the page looks like it’s loading quicker than it actually is. Rather than using a library, you should set your img or srcset's [`loading` attribute](https://web.dev/browser-level-image-lazy-loading/) to `lazy`. You should apply `loading="lazy"` only to elements that aren't initially visible when the page loads. Only images that require user interaction can be safely lazy loaded without negatively impacting the rendering performance. For example, user interactions might include clicking, hovering, or scrolling. ## Examples The following examples contain code snippets that either fail or pass this check. ### ✗ Fail ```html <img src="a.jpg"> <!-- Replaces lazysizes.js --> <img data-src="a.jpg" class="lazyload"> <!-- `auto` is deprecated --> <img src="a.jpg" loading="auto"> ``` ### ✓ Pass > Note: > You need to also set the CSS `width` of the `img` for the image to be responsive. ```html <img src="a.jpg" loading="lazy"> <!-- `eager` is also accepted, but prefer `lazy` --> <img src="a.jpg" loading="eager"> ``` ## Disabling this check If you don't want to defer the loading of images, then you can [disable this check](/docs/storefronts/themes/tools/theme-check/configuration). However, you should consider specifying `loading="eager"` for images that you don't want to lazy-load, such as images in sections that might be placed in different locations on a page.