Lazy Loading: The Basics Explained

What is lazy loading?

Lazy loading is the practice of keeping images and other assets on your web page from loading until the user requires them. Resources above the fold will show because they’re supposed to, but images further down won’t load until the user scrolls down to where they’re located on the page.

For websites that don't use image lazy loading, what typically happens is that a user will come to your page, and the browser will download every asset and resource before building the page for the user to see.

If you’ve ever clicked a link, then had to wait a long time before things properly display, it’s likely because that page contains a lot of resources that take a long time to download and render. This type of delay can cause someone to leave a webpage behind, especially if this occurs with every link on the page they click.

But when you implement lazy loading, instead of the browser loading all the resources beforehand, it will instead use a placeholder image for where the image is supposed to go.

As the user scrolls, they may even see that placeholder before the browser inserts the image that’s supposed to be there. This method of loading images can increase your page load time, improving the user experience. This is especially true of websites that host a lot of images or iframes. While it’s important to know what lazy loading images means, you also need to understand that lazy loading doesn’t just apply to images. Various assets and resources can benefit from lazy loading, but the lazy loading of images remains the top function.

Lazy loading vs. eager loading

So now that we've gone over lazy loading, let's discuss eager loading vs. lazy loading.

While lazy loading avoids unnecessary downloads, eager loading is the opposite. With eager loading, all images get immediately loaded as soon as someone opens up the website.

When users come across a page that uses eager loading, they may see some loading indicators or have to wait while all the downloading and rendering occurs. This also means that even if the user never ventures further into the page, all the images will still download, which is the opposite of how lazy loading works.

Eager loading can benefit some websites, such as those with very few or highly optimized images, but for most, this method can slow down a webpage immensely.

Still, for text-heavy sites and those with very lightweight assets, eager loading can work well. For example, a site like Wikipedia benefits heavily from eager loading.

Benefits of lazy loading

The benefits of lazy loading aren’t just the increase in website loading speeds. Lazy loading comes with additional benefits as well, such as:

Faster website load times

Small websites and assets of small file sizes will load fast. Lazy loading helps to shrink the initial size of a website, which helps it load into the browser faster.

A faster website comes with a lot of benefits. When you lazy load images for your website, you can improve conversions, increase and enrich the user experience, and make the site far more SEO-friendly, which search engines will love.

Reduced bandwidth usage

When your images are lazy loaded, website users will only receive the assets they need. This means that the browser will not need to waste bandwidth downloading images that the user will never see. This can create a nice reduction in bandwidth usage over time.

If your site has a lot of images of larger file sizes, that conservation of bandwidth usage can make a huge difference right off the bat. This conservation of bandwidth benefits both you and the user. Since you’re not serving those assets, you’re also keeping bandwidth usage down for your servers as well.

Improved user experience

Lazy loading improves the user experience in several ways.

No one likes a slow site. In fact, slow sites can often make a user feel as if there’s something wrong with the device they’re viewing the site on. Faster loading can also improve the user experience in ways that aren't as noticeable. For example, their browsers will not need to do all the heavy lifting of downloading so much in the background. This can save their system’s resources and allow their devices to run better while they’re on your website.

All that activity from the browser also means activity from the CPU, battery, and other device resources. This is one reason why lazy loading is one of the top mobile SEO best practices.

Better SEO performance

Faster page loads are a critical aspect of search engine optimization (SEO). Search engines often penalize slow sites, and one of the biggest culprits of slow site loading comes from images. If you want to boost your site performance and increase your search engine rankings, you need to maximize your loading speed.

Drawbacks of lazy loading

Lazy loading implementations can come in various forms, and not all methods of lazy loading are suitable for all sites.

Sometimes, implementing lazy loading can become a complex task, especially if you’re using a CMS that would prefer one method of implementation over another.

That also means you can run into compatibility issues when attempting to use lazy loading. You may even have a CMS with lazy loading included by default. When you attempt a different type of implementation, it can create more compatibility issues.

Some other drawbacks can come from how the user scrolls your page. If they scroll it very fast, the lazy loading can’t keep up. This can become detrimental to certain types of websites. For example, E-commerce website development wants images that always remain on the page.

Fast scrolling can also create buffering issues. Additionally, lazy loading creates more server calls that can add up if the user continues.

A final potential drawback comes from reduced caching benefits. Caching usually only works when assets are requested. Or, the information in the cache can sit for a long while and become out-of-date or obsolete because of the rarity of its use due to lazy caching.

This may seem like a lot of disadvantages, but for most use cases, the benefits of lazy loading far outweigh the potential drawbacks.

A lot of the drawbacks also have to do with implementation. Lazy loading can work in various ways, so it's important to get it right. The right implementation will give you the best possible results.

How to implement lazy loading

You can implement lazy loading in various ways. Some manual methods that use CSS can work for those who know what they’re doing. But, CMS solutions that use plugins or add-ons will most likely have a lazy loading module you can install.

Some plugins and add-ons, mainly of the caching variety, tend to also have lazy loading options. You can find open-source libraries with lazy-loading JavaScript code that you can add.

But no matter how you implement lazy loading, there are some best practices that can allow you to take the most advantage of it. They include:

• Only lazy load resources below the fold
• Do not lazy load essential resources required for the initial site or app functionality
• Pay attention to any image loading errors and fix them immediately
• Set very strict lazy load parameters
• Trim lazy loading code to make it more efficient
• Implement fallback solutions for browsers that don’t support lazy loading or JavaScript

Also, since lazy loading isn’t just for images, you may have to figure out different practices for different content.

All of this can become overwhelming, so it’s best to do the implementation, then deal with things singularly as you go along. For example, as you optimize your website for mobile, look at UI design tools that help you to fine-tune the lazy loading.

Optimize the user experience with lazy loading

Lazy loading works as a tool you can use to optimize the user experience and gain all the benefits that come along with that. You don’t have to look at it as a UX vs. UI thing, as lazy loading can improve both.

Also, you don’t have to know everything at a technical level when you have the tools in place that can help you make your site faster without you needing to delve deep into the coding level.

It still helps that you understand some basics, so you can make informed decisions on what to implement or what services to use that can help your site or app perform faster and better for your users. Mailchimp offers a huge number of solutions that can help speed up your website and improve the user experience.

If you need integrations, information, and other resources to help speed up your website or mobile app, look at all the tools MailChimp offers.