Image Optimization, Web Performance February 27, 2020 by Olga Kokoulina

Get Moving with Image Lazy Loading

Perhaps you’ve heard of books printed on demand. You make an order when you need a hard copy, and only then does the publisher actually print it. No piles of boxes stored in warehouses, no items lying unsold, and no trees wasted.

By analogy, lazy loading on websites makes images load only when you actually scroll to their location on the page. Sometimes, it doesn’t even load all of them, like when you’re too lazy to read the whole page.

So, What Is Image Lazy Loading? 

A picture is worth a thousand words, so it’s no wonder many websites rely on graphics to convey their messages. It’s not a bad thing, actually, since we’re mostly visual types of users. Still, the number of images used on a website has a direct impact on the page load speed. To face this challenge, web designers use image lazy loading.

Lazy loading is a web-design technique that intentionally postpones the loading of offscreen images until the moment a user scrolls down the page. Meanwhile, placeholders are used.

A typical placeholder for a lazy loading image
An example of placeholder

Why would anyone in their right mind deliberately delay the downloading of content? Because users might not even see those images.

Without lazy loading enabled, all graphic elements on a page are loaded at once. If the website has plenty of visual content, this drastically increases image bandwidth and harms the performance. Users have to wait longer, they bounce more often, and the conversion rate drops. And we wouldn’t want that, right?

What Makes Lazy Loading So Important in 2020?

There are two key aspects that lazy loading can significantly improve: a website’s ranking in Google, and the overall user experience. These two are all about page load speed and the rational use of data. 

Lazy loading & SEO

In Google Analytics, there’s a metric called Bounce Rate. It measures the percentage of visitors who leave a website after seeing just one page. When your website contains plenty of images that slow down the load, the chances are that instead of going deeper, a user will give up. If there are many such users, that’s a signal to Google that your website is irrelevant and provides a poor user experience. The result? It drops down lower in the search results. 

Also, in 2018, Google officially rolled out its PageSpeed Update. Speed has always been a ranking factor, but as a result of that update, page speed is now a ranking factor for mobile searches as well. Given that mobile internet usage exceeded desktop usage in 2016, every additional second may cost you visitors and conversions.

Lazy loading & user experience

Speaking of mobile devices, it’s not a secret that now we use our smartphones more often than ever before, and obviously everyone prefers quick loading rather than slow. In 2018, Google found out that 53% of mobile visitors leave a website that takes longer than three seconds to load. But it’s not only about speed. 

If your website visitors have limited mobile data plans and use 3G or 4G internet, you’re basically pouring their money down the drain by loading stuff they might never see. With image lazy loading, you save their bandwidth and they only pay for the content they actually consume. It also helps you save their system resources—battery and memory, in particular—since less content requires less processing.

In short, enabling the lazy-loading feature makes your website more mobile-friendly, but the same goes for desktops too. Too much hassle when using a website can easily discourage users. They’ll simply go somewhere else, even if they’ve already put something in the shopping cart. For online retail websites, it’s a disaster.

Image Lazy Loading Techniques

In an ideal world, all websites would lazily load images by default, and we wouldn’t have to tweak it manually at all. In reality, there are two primary ways to lazy load. 

Native lazy loading in a browser

This development makes it seem as if the ideal world has already arrived. Unfortunately, it hasn’t, but it’s a good first step. 

In Google Chrome, starting from August 2019, you can use the loading attribute to lazy-load images without the need to code or employ a JavaScript library (more on this in a minute). 

The attribute has three values: 

  • "eager": fetch an image right on page load
  • "lazy": fetch an image when it’s in the viewport or close to it
  • "auto": let the browser decide how to load (used if the attribute is omitted)
<img src="cat.jpg" loading="lazy" alt=".."/>

The key benefit of native lazy loading in a browser is the ease of implementation. All you need is some basic HTML knowledge to add loading="lazy" to img elements. 

Yet, with ease comes lack of control. The native attribute doesn’t allow developers to set custom thresholds for loading images. The exact value for what is meant by “close to the viewport” is left up to the browser. Say, if a user has a 4G connection, the browser starts loading lazy images that are 3,000 px below the viewport. Maybe that’s okay for desktops, but it might be too much for mobiles (the viewport of the iPhone XR, the largest Apple smartphone, is 896 px). But this is by no means the biggest flaw of native lazy loading.

The key problem is that outside of Chrome, this attribute doesn’t work. If the majority of other browsers don’t have the feature yet, your efforts to use native built-in lazy loading are quickly derailed.

Is there a workaround? You might probably think of using a polyfill, a micro-library that fills in gaps in the functionality of browsers. But again, there’s a slight hitch. Since it’s a JavaScript library, it takes longer to load than a webpage’s HTML code. Resolving those conflicts would mean writing more code, so instead of enjoying the ease of a native solution, you’ll end up creating more crutches.

In a nutshell, native lazy loading is not sufficient to provide a smooth experience in any browser and on any platform—at least for now.

JavaScript-based solutions

If you prefer to get fuller control over how a website behaves, you’ll need to be no stranger to JavaScript. Again, there are two possible ways to go: get a ready-made JS library or manually create your own custom code.

Using JavaScript-libraries

Сompared to writing code from scratch, grabbing a JS library seems to require the minimum effort. If you don’t really care what’s inside as long as it does the job for you, here’s a list of JS libraries recommended by Google:

But is getting a JS library the perfect solution? No, and here’s why.

The peculiarity of any open-source library is that it aims to cover as many feature requests and use cases from developers as possible. As a result, the library grows like a snowball. 

For example, jquery-lazy adds 35 KB to a page’s size if you implement it for image lazy loading. Is that critical? Good question.

In the screenshot below, you can see a PageSpeed Calculator by Paul Irish. The most impactful metric—33% of the whole PageSpeed Score—is Time to Interactive, which indicates how long it takes a website from the moment its users tap on a link until it’s ready to use. 

JavaScript is a more demanding resource for loading than a mere image, and that’s the point. By using an open-source JS library, you’ve checked the lazy loading box, but you’re harming the key PageSpeed Score metric. 

image load time in lighthouse scoring calculator
Lighthouse Scoring Calculator

Rolling out image lazy loading from scratch 

If you’re comfortable with JavaScript, you can create a custom solution that’s tailored to the needs of your website with no excessive components added. 

To do that, you’ll need to put event handlers on scrolling, resize, and orientationChange events. When any of them occurs, we see which images enter the viewport or are close to it. Then we pick the value from the data-src element, put it into the src attribute, and thus trigger the load. 

A newer technique for doing the same thing is using the Intersection Observer API. It monitors the overlapping of elements, so you can detect when an image enters the viewport, and start loading. Unlike implementing events, you don’t have to write additional lines of code. Plus, it delivers better performance, since observers act asynchronously. 

Is that the answer to all your prayers regarding image loading? As always, there are a couple of cons worth considering.

First of all, creating custom code for lazy loading can cost a pretty penny, since you not only need to write a piece of code but also maintain it. Once Google rolls out its next update, you’ll need to do some more work to keep your website(s) properly ranked.

Secondly, there’s a challenge with responsive design. Lazy loading, in its traditional sense, was created when the task was just to load some images efficiently. Today in our multi-device era, we need to efficiently load up to 20 variants of each image so they look good on every screen. That’s hard.  

So, are there any other options?

Lazy Loading with Adaptive Delivery by Uploadcare

To achieve the best performance and user experience, you might need a solution that is not limited to image lazy loading but covers image delivery as a whole. This is exactly what Uploadcare does.

Uploadcare is a combo of a CDN API and an optimized JS library. Thanks to its deep backend integration, it’s only 3 KB in size and solves four mission-critical tasks:

  • Provides image lazy loading
  • Handles image compression
  • Ensures responsiveness on various devices
  • Converts images into WebP format

As you can see above, solutions that are focused on lazy loading alone often fix one thing and break another. Image optimization is important, but it’s not the only thing that affects the customer experience. That’s why lazy loading is just a part of the Adaptive Delivery bundle by Uploadcare.

Adaptive Delivery is an Uploadcare technology that adjusts images to user context: their locations, devices, browsers, and more. Not only does it render images at the right moment, but it saves you headaches by providing automatic image enhancement using a number of filters and transformations.

The lazy loading feature is enabled by default, so you can forget about it and just reap the rewards of the optimal load times it provides to your users. Still, the control is all yours. Turn it off if you wish, or customize the behavior to find the best performance for your website.

Adapt images to end-user context: location, device, browser, and handle all tech-related issues automatically. Try Adaptive Delivery to instantly increase page loads, improve the User Experience and streamline your business metrics.

It’s Your Turn Now

The word “lazy” is often associated with avoiding work. In the case of image lazy loading, it’s quite the contrary: it’s making an effort to defer an unnecessary process and make the performance better. 

In this blog post, we’ve covered a handful of ways to get started with lazy loading. But in fact, it doesn’t matter exactly how you deal with the issue of page loading; just do it for the sake of your users.

Tags
Leave a comment

*

*