How to enable lazy loading for Magento 2?
Vinh Jacker | 3 days ago
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?
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.