How to enable lazy loading for Magento 2?

For many websites, slow page loading time is one of the critical issues that have a negative impact on user experience. Among many reasons leading to this undesirable situation, images - the most popular type of content on the web are also cited.

Resizing and compressing your images properly before their upload is a must-do if you want to get your page loading fast. But what happens after images are uploaded? Is there a method to optimize them a bit more and improve page loading time?

In today’s post, we will introduce to you a beneficial technique that defers the loading of non-critical resources (images, for example), leaving them” off-screen” until you need them - Lazy Loading.

Now, let’s get started!

What is Lazy Loading?

Known as one-demand loading, Lazy Loading is an optimization technique for the online content, be it a website or a web app. The basic idea behind the use of Lazy Loading is to load only the required section and delays the remaining until the user needs it. That means they will not need to have to wait for images on the page to be loaded and, therefore, can start using the web page sooner.

Here is what happens when a lazy loading script is applied to your images:

• Users start scrolling as you read the content of the page
• Instead of having an image appearing into the viewport, you will see a blurry placeholder image
• Right after that, the original image will quickly replace the placeholder image.

Advantages of Lazy Loading

Now, we will analyze a couple of excellent reasons why you should consider lazy loading images for your website.

Reduce perceived and real loading time for your pages

Long pages rich in images are longer to load. As we know, the page is totally usable after the image data has fully downloaded. Assume that we lazy load your image until they reach the customer’s viewport instead of letting them loading from top to toe; the loading time issue will be solved quickly.

As a result, the page weight is lessened and speeds up the loading webpage.

Bandwidth conversation

Most lazy loading solutions work by loading images only if the users scroll to the location where images would be visible inside the viewport. Users accessing the web on mobile devices and slow-connections will be super thankful because Lazy loaded images will save your readers data and bandwidth.

Save system resource

Thanks to lazy load technology, the resource of both server and client will be conserved. JavaScript or unnecessary code execution is avoided.

Improve the customer’s shopping experience

With the support of Lazy Loading, the store owner can deliver a “wow” effect and make the customer fall in love with their website for the first time. Apart from fast loading speed, vividly animated image transactions will pleasure customers during their surfing and shopping time.

Lower bounce rate caused by slow page load

Consumers tend to place certain expectations when browning to a webpage. It is estimated that approximately 50% of users expect a webpage to load less than 2 seconds, and a 1-second delay in page load causes an 11% decrease in page viewers. The improvement in page loading supported by Lazy Loading significantly contributes to keep customers on-site and lower the bounce rate effectively.

The influence of Lazy Loading on SEO

Having a fast website allows you to increase the effectiveness of many SEO activities. Besides, you can save your money and win users from both organic and paid search results.

On the other hand, it may be a bit problematic that fewer search engine results can be partially caused by Lazy Loading. Because resources default to placeholder content, a search engine crawling through the website is likely to misinterpret or ignore the contents of the resource.

There is one hack tip that helps you overcome this pitfall. By added links to lazy loaded content, search engine crawlers can be able to access the webpage out of the content. When a search engine indexes the website, it follows these links and indexes the content it finds. That means the lazy loading website will be structured in a same way as a traditional website, while still assisting users to load content quickly.

How to install Lazy Loading on Magento 2

Firstly, you need to download the Lazy Loading extension. But do you know where to download it within a minute? Mageplza would love to provide you with a thoughtful and high functioning Lazy Loading technology. You can find amazing features along with practical uses from our module.

Now, we are going to explain the necessary steps to install Mageoplaza Lazy Loading on Magento 2 via composer

Step 1 Login and Get Mageplaza Access Keys

You should begin with login into your Mageplaza account before accessing to My Account > My Access Key then create new Access Keys here

Please notice that:

• Publish Key is User Name
• Private Key is Password

Now, please save these keys for the next setting

Step 2 Extension Installation

If it is the first time you install Mageplaza extension via composer, you should run the command line below:

composer config repositories.mageplaza composer https://repo.mageplaza.com

Then, keep continuing with this one

composer require mageplaza/module-lazy-loading

A message will appear

Learn more about getting Magento Access Key here

In the next step, insert the Mageplaza Publish Key and Private Key gained from Step 1 into the User Name and Password required for Mageplaza Authentification

Consequently, please type Y to save the Credential for the next setting when you receive a request of Store Credential Authentification.

After typing Y, all of the necessary files for your module will be downloaded

Now, it is time to complete the installation by running the following command line

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

How to configure Lazy Loading?

After installing extension on your site, you need to set up the configurations and experience the way extension works on your site. It is so simple to set it up. Now, we will guide you on how to configure Lazy Loading.

Firstly, please follow this way Stores > Settings > Configuration > Mageplaza Extensions > Lazy Loading

General configuration

Choose Yes/ No to enable/ disable the extension

Apply for: This option allows you to choose one for multiple pages at apply lazy loading at the same time

Exclude pages with URL by entering the page’s link to the blank field

Exclude Css Class by entering the class name containing the image in the blank field

Exclude text by entering the the title or alt of the Image tag

Loading Threshold: This features supports you to choose the distance from the screen to the product image to get lazy loading processed. In the threshold range, products will still load without scrolling

Loading Type: There are 2 kinds of loading types: Icon and Placeholder

• Icon: You can upload your custom icone, resize one width and height
• Placeholder: You can process the loading effects:
  • Blurred
  • Low Resolution
  • Transparent

Conclusion

In a nutshell, Lazy Loading is a fantastic technology that benefits your business in many ways, such as reduce the site loading time, improve customers’ shopping experience, decrease bounce rate due to slow page load, etc.

As many providers are offering this extension for free, you can download and experience the way it works right on your site.

Let’s try our recommendations and share your success story with us. Thank you so much for your reading time.