Lazy Load for Magento 2

Lazy Load Images

• Delay images until reaching the user’s viewport

• Improve page loading

Lazy Loading to the most popular pages

Easy to apply Lazy Loading to the most popular pages on any store site. Here are the pages/sections that are always visited:

Category Page

Product Page

CMS Page

Search Page

Related, cross-sell, up-sell blocks

The kind of pages always contains the most product images. Therefore, it is very useful to apply the Lazy Loading to them.

Various Lazy Loading effects

Lazy Loading module offers diverse loading effects for the store admin to apply easily and suitably.

• Placeholders

• Loading icon

Transparent: This is the most recommended one to improve Lighthouse results.

Blur: Smooth loading transaction

Low resolution: Blurred or pixelated loading

Use any loading icon when loading images. Upload any icon (gif, jpg, svg, png) as you wish.

Set loading point time

By default, images are loaded immediately when they appear on the screen. However, if you want the images to load earlier, you can use the threshold parameter.

For example, if the threshold is 200px, the image load appears within 200px far from the viewport (invisible loading).

This maintains the constancy of image appearance while it saves bandwidth.

Exclude Lazy Loading with ease

In case you do not want to apply Lazy Loading to all images, there are multiple ways to add exclusions.

Exclude page with URL: Page(s) with the exclude URL(s) will not be applied with Lazy Loading. For example: /gear.html

Exclude CSS class: Images with exclude CSS class will not be applied with Lazy Loadinging. For example: <img class="downloadable-product" src="lifelong.jpg">

Exclude Text: Image title or image name with the exclude text will not be applied with Lazy Loading. For example: <img title="lifelong" src="download.jpg">