How to speed up Magento 2 sites with Lazy Load Products & Images

As now website speed is a Google ranking factor, the slow loading speed of a site can negatively impact its rankings on search engines and vice versus. And that’s really bad if your Magneto 2 website is taking too much time to load.

While there are several factors that cause your site to load slower, many online stores see the most common problems in products and images loading.

And the good news is you can optimize it! But how?

Use Lazy Loading!

In this article, I’ll go over the importance of loading speed and how you can use Lazy Loading to speed up your website.

Table of Contents

• Why is loading speed important to Magento 2 sites?
• How to speed up Magento 2 sites with Lazy Load Products & Images
  • What is Lazy Load Products & Images?
  • Mageplaza Lazy Loading - an effective tool to speed up your website
• Install Mageplaza Lazy Loading for Magento 2
• Conclusion

Why is loading speed important to Magento 2 sites?

I’m sure that you already understand how loading speed matters to your online website.

And, here are typical reasons to make it clearer, in details:

1. Loading speed - the first impression on your website

If you want visitors to love your website, at first sight, you can’t afford to ignore your site speed because it’s the first impression you ever make.

If your website loads fast, you’ve made a good impression and vice versa. It immediately creates a good sense of shopping experience for first-time visitors. Some might consider the fast-loading speed as a profession, efficiency, and trustworthiness. That’s definitely what every website owners want their website to look like.

A slow website radiates insecurity and wastes the time of visitors. In fact, 79% of customers reveal that they won’t return to a website if the loading speed is terrible.

2. User experience

Your customers always want the best online shopping experience. That’s what makes loading speed is absolutely crucial for your eCommerce website.

Back in 2011, when customers’ expectations for a light-speeding website were already highly set. According to Kissmetrics, 47% of online shoppers stuck out for a website to load in 2 seconds or less. Also, 40% of them would abandon a site that takes more than 3 seconds to load. The percentages are rasing higher now.

3. Website speed influences Google rank

When it comes to website rankings, Google does take website loading speed into account. In 2018, Google included page speed as a ranking factor for mobile searches to help users find what they are looking for faster. Google observes every web page performance and brings searchers lightning-fast webpages.

Therefore, even the loading speed is a ranking factor not as strong as others like relevance and authority, if your website is low, it’s challenging to take and secure your site’s position on the top search engine result pages (SERPs).

Read more: What Google is looking for SEO

4. Fast load speed increases conversions

That sounds ambiguous, but website speed has an impactful power over your site’s conversions and sales. Don’t believe me?

Take a look at how Google found out when they added page speed in the ranking factor list for mobile searches - a 20% reduction in abandonment rate.

That’s impressive!

When users have trouble with a page loading speed, they are more likely to abandon the navigation and never go back. This action increases the bounce rate and definitely decreases the conversion rate. So if you want to see a growth of sales, make your Magento site load faster. In case you don’t know, the average load time on the desktop is 2.2 seconds, and it’s 5.7 seconds for mobile (HTTP Archive)

How to speed up Magento 2 sites with Lazy Load Products & Images

What is Lazy Load Products & Images?

Lazy Load or on-demand loading is a technique used to optimize the online content on a website or a web app.

The concept of Lazy Load is to defer the loading of unnecessary resources at page load time. Instead, it’s only loading the required section. The remaining ones will be loaded when users need it.

With Lazy Loading, the page’s products and images only load when users scroll down the page instead of loading them upfront. Therefore, it’s no longer an entire web page that’s loading, but all page’ elements only load at the moment of need.

Lazy load products and images carry two main advantages:

• Improve website performance: With Lazy Load, you get the right number of products, and images need loading at the right time. Less loading images means lesser resource requests. It reduces consumption time and space usage, which enables users to access the content they initially go for faster and avoids the interruption due to limited network and server bandwidth as well as unnecessary code execution.

• Cost-effective: With Lazy Load, the images that are not visible will never get loaded. This change reduces a significant number of bytes transferred when pictures or any other assets of a website are delivered. Therefore, website owners can see a vast reduction in delivery costs by using Lazy Load.

Mageplaza Lazy Loading - an awesome tool to speed up your website

There are different ways to increase a Magento website loading speed. However, applying Lazy Load is one of the most optimal options. In this article, I’ll introduce to you an extension that surely helps you build a lightning-fast website.

The extension is Mageplaza Lazy Loading for Magento 2.

Mageplaza Lazy Loading for Magento 2 is a free powerful tool that can decrease your site loading time, reduce bounce rate, and shoot up conversion rates as a result. Lazy Loading takes your website performance to the next level by loading images only at the moment of need.

With Lazy Loading extension, instead of loading all images at the same time, it only loads those entering the viewpoint when users scroll down the page.

In general, Mageplaza Lazy Loading for Magento 2 has the following major advantages:

• Reduce the initial loading time of a webpage
• Avoid competition in server and network bandwidth
• Save system resources
• Improve user experience
• Reduce bounce rate caused by slow page loading

So, what’s precisely equipped in this extension?

Now, you already know what is Lazy Loading, it’s time to dig deeper into the features of Mageplaza Lazy Loading for Magento 2. You’ll rest assured that it’s worth your try when all the features are at your proposal.

1. Speed up your website by lazy loading images

Usually, all assets of a website, including images, videos, and others, will load at the same time. For sites with plenty of assets and content, it’ll take a considerable amount of time for all of them to fully loaded. This loading process, of images, for example, will extend the loading time of the entire page that the user is currently navigating.

Online shoppers are not patient enough to wait for your page to load more than 2 seconds. That’s the reason why they leave slow websites and memorize a lousy shopping experience.

Lazy Loading doesn’t waste time on showing unrequired images while still guaranteeing the visibility of images on-demand.

2. Apply Lazy Loading to various pages

Lazy Loading is simple-to-use and applicable to all kinds of pages. Some most-visited pages, include Category page, Product page, CMS page, Search page, and Related, Cross-sell, or Up-sell blocks. These pages usually contain the most product images on an eCommerce website.

Therefore, the more pages in which you’re running Lazy Loading, the more images on your website will be asynchronously lazy-loaded. This makes your website loading speed faster than ever.

With the popularity of images among several types of content on the website, it’s more crucial to optimize images on your site. However, even when properly optimized, it’s inevitable to deal with the photos’ weigh, which causes your images to take a long time to load. That’s why having a Lazy Load extension at your disposal is a great way to solve this problem right away.

3. Offer multiple lazy loading effects

If you feel like your pages, look boring while lazy-loading images, you can diversify the process by applying different loading effects provided by the Mageplaza Lazy Loading module.

When it comes to lazy-loading images, it’s usually about loading placeholders and icons of the images. You’re going to apply effects to these elements.

For placeholders, there are three types of loading effects, in particular. The most popular and recommended type is “Transparent.” The next one is “Blur,” which creates a smooth loading transaction for your images. And the final one is “low resolution,” which reduces the quality of your images during the loading process. It means your images will be blurred or pixelated until they’re fully loaded. For the loading icon, you can upload any icon in different forms, including GIF, JPG, PNG, SVG; and edit the height and width of your icons easily.

Tips: You can use Magento 2 Image Optimizer here!

4. Customize the loading time

An outstanding feature of Mageplaza Lazy Loading is that it allows you to set the loading point time for images by using a threshold parameter. This highlight makes it become a perfect option replacing the Magento default.

Instead of loading the image right when it appears on the screen, you can configure your images to load anytime you want within a fixed threshold range. Accordingly, the products or images meet the threshold’s condition will still load even when the user is not scrolling to its position yet.

For example, if the threshold is 300px, the image placed within 300px far from the viewpoint is already loading itself. It is called invisible loading. It’s a way for bandwidth-saving while ensuring the constancy of your website’s images.

5. Easy to exclude lazy loading anytime

Stopping Lazy Loading from running is just as simple as applying it to your website. You can do that in several ways from the backend configuration:

• Exclude the CSS class: When you assign images with “exclude CSS class,” Lazy Loading will not affect those images. Here’s an example: <imgclass=”downloadable-product” src=”lifelong.jpg”>

• Exclude page with URL: exclude pages with URL set up in the configuration not to apply Lazy Loading on those pages.
• Exclude text: Lazy Loading will not have any influence on image title or image name that contains specific text written in the configuration. For example: <imgtitle=”lifelong” src=”download.jpg”>.

Install Mageplaza Lazy Loading for Magento 2

It only takes a few steps to install and get Mageplaza Lazy Loading for Magento 2 ready to run on your Magento 2 store.

To download and install the extension, refer to this guide.

To configure the extension, follow the following step-by-step instruction:

Step 1: Log in to the Magento Admin

Go to Stores > Settings > Configuration > Mageplaza Extensions > Lazy Loading.

Step 2: General configuration

• Enable the module by choosing Yes
• Choose the pages where you want to apply the Lazy Loading effects. Those pages include Category Page, Product Detail Page, CMS Page, Search Result Page, or Related, Cross-sell, Up-sell Products page.
• Exclude pages out from the Lazy Loading effects with URL, CSS class, or text.
• Set up the loading type: Loading icon or Placeholder.
  • For the icon: You can upload your own file in GIF, PNG, JPG, SVG file. It’s also easy to resize the icon height and width.
  • For placeholder: Select the display effect for the placeholder from three different types: blurred (with transition), low resolution, and transparent.

Step 3: Save the configuration and test Lazy Loading action on your pages

For more information, refer to this guide.

Conclusion

If your customers are constantly complaining about the slow loading speed of your Magento website, it’s time to fix the problem. Using Lazy Loading is the simplest method to implement. It only takes a few minutes to have this useful module equipped in your Magento 2 store, which optimizes the image loading and, thus, improves your site overall speed.

Explore Mageplaza Lazy Loading for Magento 2

Related post: 16 Steps to Speed Up Your Store