A Guide To Lazy Loading Images In Magento

As the old proverb goes, every second counts. eCommerce site owners would be the first to tell you this. As online stores adapt and evolve to deliver more personalized and seamless shopping experiences for their customers, hoping to secure those crucial first few seconds of undivided attention, it’s not uncommon to see product pages becoming heavier, denser and more interactive. 

High-resolution product imagery, while crucial for effective showcasing (as discussed in a helpful guide by MPB, a leading used photo gear marketplace), often contributes significantly to page “heaviness” and strains server resources. For Magento site owners, this can manifest as slower loading times, as the platform, despite its benefits for managing product catalogs, can still be impacted by the immediate delivery of these bulky image files. Over time, without proper image optimization, these repeated requests can dramatically hinder your store’s overall user experience (UX) and, ultimately, its conversion rates.

The Problem of Page Size and Changing Customer Expectations

Nowadays, the average shopper won’t wait around for more than a few seconds to abandon a page if it doesn’t load all its critical resources and files quickly. Recent studies have suggested that a mere one-second delay in page load times can reduce conversions by up to 7%. For Magento site owners, this represents a substantial loss in revenue that cannot and should not be overlooked. 

Between 2012 and 2022, web page sizes increased by roughly 184% for desktop sites and a staggering 420% for mobile sites. This growth stems from the increase in demand for interactivity and functionality on the web, which can manifest – in an eCommerce context – in pages that display multiple high-resolution product images, zoom-enabled views, 360-degree rotations, scripts, stylesheets, fonts, related product carousels, CTA buttons, case studies, embedded video content, and more.

While all of these visuals and interactive elements contribute to a more engaging shopping experience, they do carry a significant exertion on servers and browsers to deliver all such content quickly and correctly. Sometimes, pages won’t load as quickly as users expect, which can be frustrating and lead to an increase in bounce rates. Over time, if these issues are not proactively addressed, search engine rankings, average order values and conversion rates can be negatively affected.

Luckily, there is a straightforward and powerful workaround to address slow-loading pages while delivering a positive UX for visitors and not hindering their buying journey – the concept of lazy loading images.

Image source

What is Lazy Loading?

While its connotations may sound negative, lazy loading refers to the delayed loading of non-critical resources at page load time.

Instead of loading all images, videos, and interactive elements at once, as soon as a page opens, lazy loading postpones loading images until a user scrolls near them.

Here’s a typical example of lazy loading:

1. When a user first lands on a page, only the resources visible in the initial viewport are loaded.
2. Placeholder images or low-resolution previews appear for off-screen images.
3. As the user scrolls down, images render just before they come into view.
4. This creates a smoother, faster initial page load while still delivering all content as needed.

Images and interactive elements are vital to the design of a web page, take up most of its weight and create a positive customer buying experience, so getting rid of them completely isn’t viable. However, for lengthy product listing pages, category pages with multiple images, and high-priority evergreen pages with content continuously added to it, lazy loading becomes increasingly crucial. 

However, instead of a user’s web browser downloading every resource before the page is completely rendered and thus causing a slower load time, lazy loading means that they get all the high-priority resources first. As users scroll, they are presented with more interactive, engaging elements when they come into view on the desktop or mobile screen.

Benefits of Lazy Loading for Ecommerce Sites

For Magento stores, lazy loading offers a wealth of practical and functional advantages.

• Pages become interactive more quickly thanks to faster page load times.
• Users can begin browsing and clicking without waiting for all the resources to load.
• Faster-loading pages keep users on the screen and prevent them from abandoning it out of frustration.
• A smoother navigation encourages more time spent browsing your product library.
• Faster page load times directly correlate with increased mobile traffic and conversion rates.
• Better mobile performance attracts and retains smartphone users.
• Images only load when needed, preserving valuable bandwidth and costs.
• Fewer individual image requests per HTTP request means less server load.
• Pages satisfy Google’s Core Web Vitals (CWV) UX recommendations and criteria.
• Customers begin to enjoy a straightforward, hassle-free shopping experience.
• eCommerce businesses benefit from an improved bottom line and reputation for putting customer needs first.

Recommendations for Lazy Loading in Magento

Magento makes for an excellent, versatile solution for eCommerce sites. However, different site requirements and catalog sizes will warrant specific approaches if site owners are to harness the benefits of lazy loading.

For instance, not every image should be lazy loaded. Hero images above the fold, featured product images on key pages, logos, and critical user interface elements shouldn’t be lazy loaded. Whereas thumbnails, listing images in grids, carousel images, and any imagery located below the fold should be.

Many eCommerce retailers take high-resolution product images in-house to maintain control over quality and reduce costs. These typically make host servers work hard to deliver resources, which is why it’s important to compress them where possible, without sacrificing image quality. Consider uploading thumbnail images which load immediately while full-size versions are lazy loaded. 

With mobile commerce continuing to grow, you may wish to trigger loading earlier on mobile devices considering the overwhelming percentage of web traffic (62.54% in Q3 2024) and users’ propensity for faster scrolling. Serve appropriately sized images based on specific mobile devices and screen sizes, and also be especially cautious about which images and resources to lazy load when users are connected to mobile data and not WiFi. 

Common Lazy Loading Mistakes to Avoid

Those new to lazy loading may encounter problems when implementing it site-wide for the first time. 

One common obstacle is whether search engines can see content post-implementation. Consult a developer to deploy appropriate data-src attributes and noscript fallbacks to ensure lazy loading works correctly. Image information can be included in product schema (structured data) markup.

Another frequent problem with lazy loading is unexpected layout shifts which happen as images load. This is why it’s important to set specific image dimensions and width/height attributes, while leveraging CSS to maintain containers at set dimensions. Tracking CLS (Cumulative Layout Shift) as part of regular Core Web Vitals performance tracking will help site owners master the art of lazy loading with proper stability and containment. 

Image source

How to Implement Lazy Loading in Magento

Magento offers several approaches to implementing lazy loading across your site. Depending on any technical restrictions you may have, as a loose guide, consider the following approaches.

Via Magento 2 

Since Magento 2.4.0, the platform has included some basic image optimization features. That said, for site-wide lazy loading, additional instructions and parameters must be set.

Example of how to enable native deferred loading in Magento layout XML:

    

        

            

                true

            

        

    

Magento Extensions

For many eCommerce providers, dedicated extensions offer a straightforward way to implement lazy loading. These include (but are not limited to) page speed or image optimizers such as:

• Amasty
• MageWorx
• Apptrian

Such extensions allow you to customize which images to lazy load, along with threshold and placeholder settings. These (and others) often combine lazy loading with other performance improvements like code minification, browser or server-side caching, and CDN integrations.

Custom Implementation

For developers comfortable with Magento’s architecture, establishing a custom integration for lazy loading can be preferable.

Example of custom lazy loading implementation in Magento:

  define(['jquery', 'domReady!'], function($) {     'use strict';          // Basic implementation of lazy loading     $(function() {         $('img[data-src]').each(function() {             var img = $(this);                          // Create observer for this image             var observer = new IntersectionObserver(function(entries) {                 entries.forEach(function(entry) {                     if (entry.isIntersecting) {                         img.attr('src', img.data('src'));                         observer.unobserve(img[0]);                     }                 });             });                          // Start observing             observer.observe(img[0]);         });     }); });  

Magento PWA Studio

If you’re using Magento’s PWA Studio for a headless implementation, you can leverage React components for lazy loading:

import { LazyLoadImage } from ‘react-lazy-load-image-component’;

// Inside your component      alt={product.name}     src={product.image.url}     threshold={100}     effect="blur" />  

What Is EcomBalance? 

EcomBalance is a monthly bookkeeping service specialized for eCommerce companies selling on Amazon, Shopify, eBay, Etsy, WooCommerce, & other eCommerce channels.

We take monthly bookkeeping off your plate and deliver you your financial statements by the 15th or 20th of each month.

You’ll have your Profit and Loss Statement, Balance Sheet, and Cash Flow Statement ready for analysis each month so you and your business partners can make better business decisions.

Interested in learning more? Schedule a call with our CEO, Nathan Hirsch.

And here’s some free resources:

• Monthly Finance Meeting Agenda
• 9 Steps to Master Your Ecommerce Bookkeeping Checklist
• The Ultimate Guide on Finding an Ecommerce Virtual Bookkeeping Service
• What Is a Profit and Loss Statement?
• How to Read & Interpret a Cash Flow Statement
• How to Read a Balance Sheet & Truly Understand It

Lazy Loading: A Vital Ecommerce Site Addition

Lazy loading represents a pivotal addition to any eCommerce store, particularly for those leveraging Magento. When deployed correctly, it delivers images quickly to users only when needed, minimizing load time, fostering a positive all-round experience, and contributing to a more seamless buying experience.

Those running eCommerce stores via Magento should consider lazy loading if they are trying to navigate the growing amount of competition in this terrain. Mobile commerce and the need for personalized, interactive shopping experiences are only going to grow in demand, so don’t let heavy pages and large images weigh down your Magento store’s untold potential.

Just as optimizing your Magento store’s loading speed improves efficiency, having a clear view of your finances is essential for informed decision-making. Arrange a callback to discuss how eComBalance can streamline your bookkeeping and provide you with clear financial insights.

This article originally appeared on EcomBalance Blog and is available here for further discovery.