How to Lazy Load Images within Magento Blocks or Containers

With Magento 2 Lazy Load and Page Speed Optimizer extensions, you can lazy load images within pre-defined blocks that you can choose in the configuration panel. Also, you can specify custom blocks/containers, and this article will show you how to do this correctly.

Step-by-step guide:

  1. In the main Magento menu, go to the Plumrocket tab > select Lazy Load Configuration
  2. In the Blocks field under the Image Lazy Loading tab, list the blocks or containers within which all images should be lazy loaded. The list of supported formats is described in this article below.
  3. Click Save Config.
Magento 2 Lazy Load extension - Lazy Load images within custom blocks or containers

How to Specify Custom Containers

If you want to lazy load images inside the whole section (footer, sidebar, etc.), you can specify the container name. For example, footer.

How to Specify Custom Blocks

Custom blocks can be identified by their name, class name, or template.

Block Name

The advantage of lazy loading images by block name is that it can be applied across different Magento instances, as custom themes usually don’t change block names. Please note, that block aliases are not yet supported.

To use this method, you need to find the block name in the Magento layout. For example, category.products.list.

Block Class Name

By specifying the PHP class name of the block, you will initiate the lazy loading of images within it and all inherited blocks. It is especially useful for widgets as their block names are anonymized.

Format example for the block class name:


Block Template

You can use block templates to lazy load images inside them, for example, if blocks don’t have class names.

Format examples:



Was this article helpful?