Version 0.10.0+

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 to lazy.


Below are examples of code that fails and passes this check.

✗ Fail

✓ Pass

Disabling this check

If you don't want to defer the loading of images, then you can disable this rule.