Stand with 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.
Post Contents [hide]
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 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.
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.
How to Define Lazy Load Blocks?
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:
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.