How Online Retailers Get Moving With Lazy-Loading Images

One second of page delay could cost Amazon.com $1.6 billion in annual revenue. But scraping this one second is a tricky task, especially for online retail, with websites all about product images. Consumers want to see high-quality photos of a product from every angle before they click “Add to Cart.” Still, a large number of high-resolution images means large page sizes, and a proportionally large chance of a slow-loading page.

How Lazy Loading Benefits Online Retail

Despite its name, lazy loading is a smart and proactive technique that’s a big innovation in web design. It keeps an eye on how the user scrolls the site to load images only right before they become visible. At the end of the day, these small intentional delays cut overall page load time. More importantly, this approach provides consumers with a smooth and satisfying experience by solving several well-known problems at once.

First, it helps to keep up conversion rates. According to a recent report, if users have to wait longer than five seconds for a page to load, they're 20 percent more likely to leave a website without buying anything. And chances are, they’ll never come back. So even though picture quality is important, good web performance pays off every bit as much as a fancy photo shoot of specially designed products. Furthermore, lazy loading helps you achieve both goals at the same time.

Credit: Uploadcare

On top of that, lazy loading helps with search engine optimization. If there are many visitors leaving your website almost immediately, search engine algorithms can deem that it's irrelevant. This leads to a decrease in website ranking and position in search results, as well as advertising reach and overall revenue. However, optimized image loading can keep visitors on-site and prevent all that.

A better mobile experience is also possible with the lazy loading technique. Google data shows that more than half of overall web traffic comes from mobile devices, and people using them are more sensitive to page weight and load time. Yet big, unoptimized images load too slowly and waste too much traffic, harming the overall customer experience with irritation and disappointment. As a result, more than 50 percent of mobile users leave a page that takes longer than three seconds to load, pulling the conversion rate down.

How Lazy Loading Technology Works

Basically, all lazy loading techniques are aimed at monitoring users’ activity on a website and intentionally postponing the loading of off-screen images until they appear in the field of view.

Usually, the lazy loading feature is built into complex image delivery systems, which can also handle image compression and manage different formats to ensure good responsiveness on a whole range of devices. Some of these tools can deal with all tech-related issues to adjust images to user context, such as locations, devices, browsers, etc. They not only render images at the right moment, but provide automatic enhancement and optimization using a number of tools.

If you care about speeding up a page with lazy loading, you might also consider better optimization opportunities. For instance, systems like Adaptive Image Delivery have a smart image optimization technique that recognizes which device each user has and automatically shows images best suited for that screen. Therefore, the picture of the product appears on the consumer's screen not only at the best moment, but also in the best format.

Despite great automatization, such systems usually provide you with full control. You can turn various features on or off and adjust them in the way that’s best suited for your platform.

Lazy Loading Bottom Line

Page load speed is crucial for the e-commerce customer experience. Given the diversity of devices and customer preferences, it can be challenging to achieve success in the highly competitive field of online retail. This requires great attention to web performance and user experience. There are a whole range of techniques like lazy loading that can take the technical burden off your shoulders, thus giving you the freedom to focus on working with customers and developing your business through an effective website.

Igor Debatur is CEO and co-founder at Uploadcare, the end-to-end solution to handle file processing and management for the modern web.