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
- Why You Should Choose Magento 2 Lazy Load Extension
- Magento 2 Lazy Load Download & Installation
- How to Configure Magento 2 Lazy Load
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.
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.
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.
Here I’m using FileZilla to install the Magento 2 Lazy Load extension.
Step 1: Log into your Cloudways dashboard via FTP client.
Step 2: Extract the downloaded extension and upload it to the server as shown in the below screenshot.
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
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.
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.
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.
Enable: Yes/No to enable/disable the Magento 2 lazy load extension.
Apply For: Select pages to apply lazy loading on. You can select one or multiple pages at the same time.
Here are the three ways to exclude pages: With URL Including, Exclude Css Class and Exclude Text:
Loading Threshold: Set the distance from the screen to the product image to process lazy loading.
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.
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.
Let’s also checkout how it works with the live Magento store.
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.
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]