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.

Take the following steps to configure Image Lazy Load in Magento 2:

  1. Install Magento 2 Image Lazy Load Extension by Magefan.
  2. Navigate to Stores > Configuration > Magefan Extensions > Lazy Load.
  3. Enable the extension by choosing "Yes" in Enabled select box and define blocks (Lazy Load Blocks text area) for which images should be loaded via lazyload.

Magento 2 Image Lazy Load Configuration

In the Lazy Load Block field you can define:

 - Block name in the XML layout, e.g.:

product.info.details

 - Block template file name. e.g.:

Vendor_Module::folder/file.phtml

 - Block class name, e.g.:

\Magento\CatalogWidget\Block\Product\ProductsList\Interceptor

- To enable image lazy load for Magento 2 CMS Blocks, in the block content you should add this HTML comment:

<!-- MAGEFAN_LAZY_LOAD -->

Example:


                
                 
                 Magento 2 Image Lazy Load