This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

📣 Try the fastest hosting platform with pay-as-you-go pricing & 24/7 expert support! MIGRATE NOW →

How to Speed up Magento 2 Sites With Lazy Load Products’ Images

Updated on December 24, 2021

5 Min Read
Speed-up-Magento-2-sites-with-Lazy-Load

As a developer, I’ll often hear about “slow page load”. Of course, I’m not the only one in this boat. We’ve grown used to visiting sites that perform phenomenally, which adds to how unbearable the experience feels with ones that don’t.

There could be multiple reasons behind a slow-loading website. One issue that Magento store owners especially tend to face is down to the hundreds of images on their web page. 

In this blog, I’m going to talk about how the Magento 2 Lazy Load extension helps to improve the page load and keeps users from leaving your store.  

What Is Magento 2 Lazy Loading

The core concept behind lazy loading is a design pattern mainly used for web templates and architecture. Normally, when a user opens an online store or website, the entire page’s contents are downloaded and rendered in a single go. In this time period, the browser caches the web page. Not only does this result in extra consumption of memory and bandwidth, but it can’t ensure that the user will go through the web page. 

It’s better to load all of the content when the user accesses a part of the page that requires it. This is possible through Magento Lazy Loading, which creates pages with placeholder content. This is only replaced with actual content when the user needs it.

Scale Your Magento 2 Store With Ease

One-Click Magento installation with your own managed Magento hosting solution.

Why You Should Choose Magento 2 Lazy Load Extension

The Magento Lazy Load extension by Mageplaza helps the development team shorten their web pages’ load time. It doesn’t spend time loading all the product images at once. This results in a significant decrease in the bounce rate.

Magento Lazy Load only loads images within the visible part of the page. Product images that are out of view won’t be loaded until the user explores that particular section by scrolling down.

Let’s explore some of the more features of the Magento 2 Lazy Load extension.

Allows Lazy Loading to the Magento Store Pages

The Magento 2 lazy load extension allows you to easily apply Magento lazy loading to the images of the most popular pages. Here are some pages users visit most often::

  • Category Page
  • Product Page
  • CMS Page
  • Search Page
  • Related, cross-sell and up-sell blocks

Various Lazy Loading Effects

The Magento 2 Lazy Loading module offers transparent, blurred, and low-resolution diverse loading effects for Magento store admin to apply easily as per their choice.

Set Loading Point Time

The Magento 2 Lazy Load extension allows developers to use the threshold parameter if they want the images to load earlier. This still maintains image quality and saves bandwidth.

Other Ways to Improve Magento 2 Lazy Loading

You can apply lazy loading to only select images, through various ways to add exclusions:

  • Exclude page with URL
  • Exclude CSS class
  • Exclude text

More Lazy Load Benefits

Here are some other Magento 2 Lazy Load benefits that you may find useful:

  • Easily enable or disable the Lazy Loading extension via Magento Admin Panel
  • Set the loading threshold
  • Choose the loading type: icon or placeholder
  • Upload loading icon, and resize as per your own choice
  • Compatible with other extensions: Product Options, Image Optimizer, Configurable Product Grid View, and Free SEO Module among others.

Book a Personalized Cloudways Product Demo With One of Our Expert

Magento 2 Lazy Load Download & Installation

Now it’s time to download the Magento 2 lazy load extension by Mageplaza. The great thing about this extension is that it’s FREE for the community edition. 

Mageplaza Page Load Extension

Here I’m using FileZilla to install the Magento 2 Lazy Load extension. 

Step 1: Log into your Cloudways dashboard via FTP client.

Cloudways Magento Application credentials

Step 2: Extract the downloaded extension and upload it to the server as shown in the below screenshot.

Mageplaza Extension Upload

Step 3: Run the following commands to complete the installation process.

First, you need to enable the Mageplaza_Core file to install all the dependencies for the Magento 2 Lazy Load extension. To do that, run this command.

bin/magento module:enable Mageplaza_Core

Followed up by: 

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy

Pricing 

The Magento 2 Lazy Load extension by Mageplaza is FREE for the Magento Community edition. However, the Enterprise Edition cost $200, and the installation service costs $50.

Magepplaza Lazy Load Extension

Compatibility

Yes, it’s compatible with the latest Magento 2.4.x.

Optimize Magento Speed Like a Pro

Subscribe now and get a free ebook to your inbox.

Thank You

Your Ebook is on it’s Way to Your Inbox.

How to Configure Magento 2 Lazy Load

Log in to your Magento admin panel. Navigate to Stores > Settings > Configuration > Mageplaza Extensions > Lazy Loading.

Mageplaza Lazy Load Extension Installation

Enable: Yes/No to enable/disable the Magento 2 lazy load extension.

Extension status enable

Apply For: Select pages to apply lazy loading on. You can select one or multiple pages at the same time.

Magento Pages options

Here are the three ways to exclude pages: With URL Including, Exclude Css Class and Exclude Text: 

three ways to exclude pages

Loading Threshold: Set the distance from the screen to the product image to process lazy loading. 

Loading Threshold

Icon: Process lazy loading with icon. Show more fields:

Upload Icon: Click the Choose File button to select the image you want to display during lazy loading processing.

Icon size

Resize Icon Width: Enter the width of the image displayed. The default value is 64px.

Resize Icon Height: Enter the height of the displayed image. The default value is 64px.

Placeholder: You can process lazy loading with a placeholder.

  • Blurred: The product image is blurred during the processing of lazy loading.
  • Low Resolution: Product image quality is reduced during lazy loading processing.
  • Transparent: Display transparent images during lazy loading processing.

Placeholder type

Let’s also checkout how it works with the live Magento store.

Wrapping Up!

I personally like the Magento 2 lazy load extension with its minimal but excellent features. Give it a try and let me know if you have any queries regarding the process. 

Apart from that, if you want to experience the extraordinary performance of your store, give managed Magento 2 hosting a shot.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Abdur Rahman

Abdur Rahman is the Magento whizz at Cloudways. He is growth ambitious, and aims to learn & share information about Ecommerce & Magento Development through practice and experimentation. He loves to travel and explore new ideas whenever he finds time. Get in touch with him at [email protected]

×

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Want to Experience the Cloudways Platform in Its Full Glory?

Take a FREE guided tour of Cloudways and see for yourself how easily you can manage your server & apps on the leading cloud-hosting platform.

Start my tour

CYBER WEEK SAVINGS

  • 0

    Days

  • 0

    Hours

  • 0

    Mints

  • 0

    Sec

GET OFFER

For 4 Months &
40 Free Migrations

For 4 Months &
40 Free Migrations

Upgrade Now