Cookies setting

Cookies help us enhance your experience on our site by storing information about your preferences and interactions. You can customize your cookie settings by choosing which cookies to allow. Please note that disabling certain cookies might impact the functionality and features of our services, such as personalized content and suggestions. Cookie Policy

Cookie Policy
Essential cookies

These cookies are strictly necessary for the site to work and may not be disabled.

Information
Always enabled
Advertising cookies

Advertising cookies deliver ads relevant to your interests, limit ad frequency, and measure ad effectiveness.

Information
Analytics cookies

Analytics cookies collect information and report website usage statistics without personally identifying individual visitors to Google.

Information
mageplaza.com

How to enable lazy loading for Magento 2?

Vinh Jacker | 10-01-2024

How to Enable Lazy Loading for Magento 2? How to Enable Lazy Loading for Magento 2?

The Most Popular Extension Builder for Magento 2

With a big catalog of 224+ extensions for your online store

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?

ALT_TITLE
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

ALT_TITLE
Get Mageplaza Access Keys

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

ALT_TITLE
Installation

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

ALT_TITLE
Installation

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

ALT_TITLE
Installation

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

ALT_TITLE
Installation

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

ALT_TITLE
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

ALT_TITLE
Apply Lazy Loading for

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

ALT_TITLE
Exclude pages with URL

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

ALT_TITLE
Exclude Css Class

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

ALT_TITLE
Exclude text

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.

Table of content
    Jacker

    With over a decade of experience crafting innovative tech solutions for ecommerce businesses built on Magento, Jacker is the mastermind behind our secure and well-functioned extensions. With his expertise in building user-friendly interfaces and robust back-end systems, Mageplaza was able to deliver exceptional Magento solutions and services for over 122K+ customers around the world.



    Related Post

    Website Support
    & Maintenance Services

    Make sure your store is not only in good shape but also thriving with a professional team yet at an affordable price.

    Get Started
    mageplaza services