Configuring Image Lazy Load is one of the great tips for Magento 2 image optimization that allows you to improve your website loading speed and reduce the page size by loading images gradually.

Once your images are lazy-loaded you are sure there won't be any delay in loading the page caused by images so that your customers receive the best user experience.

How to Configure Image Lazy Load in Magento 2?

First, you need to install the Magento 2 Image Lazy Load Extension by Magefan. Then, navigate to Stores > Configuration > Magefan Extensions > Image Lazy Load and enable the extension. There are two options you can choose from. Let's talk more about both.

Lazy Load All Website Images

All you need to do to lazy load all website images is choose a corresponding option in the Blocks to Lazy Load select box. However, if you want to exclude some images from the lazy load, define them in the Lazy Load Blocks section and specify how many First Images from those blocks To Skip.

lazy load all images

Lazy Load Selected Website Images

In case you want to lazy load only some specific images, choose Selected in the Blocks to Lazy Load select box. Then specify the blocks with images you want to lazy load in the Lazy Load Blocks field. Additionally, you can skip the first images from these blocks from being lazy loaded.

lazy load selected blocks in magento

Configure Other Options

Finally, choose which Method to use for lazy loading. You can go for Non-jQuery JavaScript Library or Native Browser Lazy Loading. Then enable the Include Noscript HTML tag option if you want to display lazy loaded images even when the JS is disabled in the browser settings. 

Lazy load configuration Magento

How to Define Lazy Load Blocks?

In the Lazy Load Block field you can define:

  • Block name in the XML layout, e.g.:
  • Block template file name. e.g.:
  • Block class name, e.g.:
  • To enable image lazy load for Magento 2 CMS Blocks, in the block content you should add this HTML comment:


Magento 2 Image Lazy Load

Don't forget to test lazy load images once you save the settings. However, note that some images might be written in CSS, so you need to apply lazy load for CSS background images too.