Magento 2 Lazy Loading extension

Posted by Huy Dao on March 16th, 2021

Magento 2 Lazy Loading extension allows speeding up the site load by showing the image only at the demanding time. Lazy Loading improves site performance and reduces bounce rate due to slow loading.

How does Lazy Loading work? What are the benefits?

Lazy Load image means that the images aren’t loaded until the user scrolls and images come into the browser’s viewport.

The process of Lazy Loading typically likes that:

  • You visit a page and scroll through the content
  • Instead of the actual image, you see a blurry placeholder image
  • Instantly after that, the actual image replaced the placeholder.

With Magento 2 Lazy Loading, the page stacking time is diminished altogether. The page isn't difficult to stack the entire pictures from top to toe on the double. All things considered, the pictures can be stacked just when they are looked over, arriving at clients' viewport.

The page weight is eased up and speeds up the stacking of the page.

Lethargic Loading rations transmission capacity by conveying pictures to clients "on-request" when they come into clients' viewport.

Lethargic Loading monitors both worker and customer assets, in light of the fact that, for certain pictures, JavaScript and other code really should be delivered or executed.

Since the page stacking is accelerated altogether, other than energized picture exchanges, clients will have a superior encounter during their time surfing and shopping.

As indicated by Hubspot, 47% of clients anticipate that a webpage should stack under 2 seconds and a 1-second deferral in page load causes 11% abatement in page watchers.

Along these lines, improve page stacking by Lazy Loading upholds stores to keep clients on location, which diminishes the bob rate successfully. 

Most remarkable features of the extension

Sluggish Load Images

Defer pictures until arriving at the client's viewport

With Lazy Loading, just pictures inside the perceptible piece of the page will stack. Pictures out of view won't stack except if the client looks down the page and they materialize.

Improve page stacking

Magento 2 Lazy Loading augmentation is truly valuable to the long site pages. Since it doesn't require some investment to stack absolutely all pictures without a moment's delay, the page load is accelerated altogether. Thus, it diminishes the skip rate coming from moderate page stacking.

Different Lazy Loading impacts

Sluggish Loading module offers assorted stacking impacts for the store administrator to apply effectively and appropriately.

Placeholders

  • Straightforward: This is the most prescribed one to improve Lighthouse results.
  • Obscure: Smooth stacking exchange
  • Low goal: Blurred or pixelated stacking
  • Stacking symbol

Utilize any stacking symbol when stacking pictures. Transfer any symbol (gif, jpg, svg, png) as you wish.

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">

Like it? Share it!


Huy Dao

About the Author

Huy Dao
Joined: February 8th, 2021
Articles Posted: 36

More by this author