Discourages use of the [lazysizes JavaScript library](https://github.com/aFarkas/lazysizes) for lazy loading images, iframes, and scripts.

You should avoid using third-party libraries over native browser features to avoid large JavaScript bundle sizes and slow load times. [Learn more about theme performance](/docs/storefronts/themes/best-practices/performance).

This check identifies uses of the `lazyload` class, `data-srcset` and `data-sizes` attributes, and `data-sizes="auto"`.

## Examples

The following examples contain code snippets that either fail or pass this check.

### ✗ Fail

The following example includes a `lazyload` class:

```html
<img src="a.jpg" class="lazyload">
```

The following example includes a `lazyload` class, a `data-srcset` attribute, a `data-sizes` attribute, and `data-sizes="auto"`:

```html
<img
  alt="House by the lake"
  data-sizes="auto"
  data-srcset="small.jpg 500w,
  medium.jpg 640w,
  big.jpg 1024w"
  data-src="medium.jpg"
  class="lazyload"
/>
```

### &#x2713; Pass

The following example uses the native `loading` attribute instead of the lazysizes library:

```html
<img src="a.jpg" loading="lazy">
```

## Disabling this check

You should disable this check only if you want to support lazy loading of images in browsers that don't support the `loading="lazy"` attribute.