Lazy loading is a technique that can be used to improve the speed and performance of your website. By deferring the loading of non-essential images and scripts until after the page has been rendered, you can significantly reduce the amount of data that needs to be loaded.
This can result in a faster, more responsive website that uses less bandwidth and delivers a more engaging user experience.
In this blog, we’ll explore lazy loading in more detail and show you how you can implement it on your website.
- Why is Website Speed Important?
- What is Lazy Loading?
- How a Typical Web Page Loads?
- How Does Lazy Loading Work?
- How Much Data Can Be Saved Using Lazy Load?
- How to Use Lazy Loading on Your Website?
- Should You Use Lazy Loading on Your Website?
Why is Website Speed Important?
Because no one likes a slow website!
We’ve all been there. You click on a link, eagerly anticipating the content on the other side, only to be met with a loading screen that seems to take forever.
It’s frustrating, and it’s even worse when you consider that the average user has an attention span of just 8 seconds. This often leads to them abandoning the page altogether, which is bad news for your business.
That’s why website speed is so important. Not only does it impact your user experience, but it also has a direct effect on your bottom line. In fact, a 1-second delay in page load time can result in a 7% reduction in conversions.
The faster your site loads, the better experience your users will have.
And that’s not just our opinion.
Google has stated that website speed is a ranking factor in the search algorithm…
“A ranking factor” being the keywords here.
Google hasn’t said how much website speed impacts your rankings, and seeing as how there’s over 200 ranking factors, it’s safe to say that website speed isn’t the be-all-end-all when it comes to SEO. But it is still important nonetheless.
Besides search ranking, website speed also impacts your conversions. In fact, Amazon discovered that every 100ms increase in page load time resulted in a 1% loss in income.
Not only that, but fast websites are also more engaging. Studies have shown that users are more likely to stay on a website if it loads quickly. In fact, one study found that a 1-second delay in website speed can lead to a 7% decrease in conversions.
And if that doesn’t convince you, consider this: 40% of people will abandon a website that takes longer than 3 seconds to load.
So, now that we’ve established how important website speed is, let’s take a look at lazy loading and see how it can help improve the speed of your site.
What is Lazy Loading?
Lazy loading is a technique for loading content on demand, usually as the user scrolls down the page. This can improve website performance by making it unnecessary to load all content up front.
Lazy loading is often used for content that isn’t immediately visible to users, such as images or videos. By deferring the loading of this content until it’s needed, you can improve the initial load time of your page.
How a Typical Web Page Loads?
When a web page loads, the browser has to render all of the content on the page. This includes images, videos, text, etc.
Images account for almost 75% of the entire page weight, according to HTTP Archive.
This can take a lot of time, especially if the page is heavy with media content. And even more so if the user’s connection is slow.
How Does Lazy Loading Work?
Lazy loading works by loading content as it’s needed, rather than loading everything.
This is usually done by monitoring the user’s scroll position. When the user scrolls down the page and a lazy-loaded element comes into view or reaches a certain threshold, the content is then loaded.
This can be beneficial for a number of reasons:
- It can improve your page load time, as less data needs to be loaded initially.
- It can reduce bandwidth usage, as only the essential data is loaded.
- It can improve your user experience, as above-the-fold content is rendered immediately.
How Much Data Can Be Saved Using Lazy Load?
It really depends on the page itself, the device the user is on, and the implementation of lazy loading.
If you’re lazy loading images, for example, you could save a lot of data. On a typical page, images make up around 50-60% of the total page weight. So, by lazy loading them, you can reduce the initial page weight by up to two-thirds, maybe more, again it depends on the page and the device used.
If you’re lazy loading videos, you could save even more data. A single video can easily be several megabytes in size, so lazy loading them can make a significant difference to your page load time.
On a mobile device, lazy loading can be even more beneficial. Mobile users are often on slower connections, so lazy loading can help improve the speed of your page.
For example, on mobile, our homepage has an average total page weight of 200kb. With lazy loading, the initial page weight is just 62~kb. As you can see, only 31% of the original page weight, this makes a huge difference to the initial load time. The balance of up to 138kb is lazy loaded as and when needed.
On another site, we saw a 65% reduction. The total homepage went from a 3MB page weight to 1.04MB initial page weight with lazy load enabled.
The important thing to remember is that lazy loading can improve your page load time, which can positively impact your user experience and conversions.
How to Use Lazy Loading on Your Website?
Native Lazy Loading
Chrome 77+, Firefox 75+, and Edge 79+ all support lazy loading natively. This means that you can lazily load content without having to use a third-party library or plugin.
The loading attribute can be used to lazy load images. It works like this:
- Add the loading=”lazy” attribute to an image tag.
- The browser will then lazily load that image when it’s needed.
If you use a content management system (CMS) or web platform, and it’s modern / up-to-date, there’s a good chance that native lazy loading is already built in and you don’t need to do anything.
If you’re not sure, you can check with your platform / CMS provider or developer. They’ll be able to tell you if lazy loading is supported and how to enable it.
If you’re using WordPress 5.5 and above, lazy loading is built-in, and you don’t need to do anything.
Apart from not being support by older and some less known browsers, the only downside to using native lazy loading is that you’re at the browser’s mercy. It will decide when to lazy load your content and can’t change or adjust the loading threshold.
There have been some improvements with the threshold. As of July 2020, in Chrome, the distance threshold is not fixed and varies depending on certain factors.
For browsers that don’t support lazy loading, the content will simply load as normal. So, there’s no harm in using the lazy loading attribute even if the browser doesn’t support it.
Libraries & Plugins
If you’re not using a modern CMS or platform, or if you want more control over lazy loading, you can use one of the many lazy loading libraries or plugins.
One of the most popular lazy loading libraries is Lozad.js. It’s a small (~1kb minified), blazing-fast, and easy-to-use lazy loader.
Or if a plugin / extension is more your thing, there are lazy loading plugins available for WordPress and other popular CMSs.
Should You Use Lazy Loading on Your Website?
There’s no simple answer to this question. It really depends on your website and what your goals are.
Here are some guidelines to help you decide:
Use Lazy Loading If…
- Your website is image-heavy. If your pages have a lot of images, lazy loading can help improve your load time.
- You want to save bandwidth. By lazy loading only the content that’s needed, you can reduce the amount of data that’s loaded. This can be beneficial if you have a lot of traffic, or your users are on mobile devices with limited data plans or slow connections.
- You want to improve your user experience. Lazy loading can make your pages feel more responsive as above-the-fold content is rendered immediately.
Don’t Use Lazy Loading If…
- It negatively affects user experience. The most notable is that it can introduce a delay before certain content is loaded. This can be problematic if the content is needed immediately, such as in an e-commerce catalogue page.
- Your website doesn’t have a lot of content, lazy loading might not make much of a difference.
- Your website is already fast. If your pages are loading quickly, lazy loading might not offer much of a benefit.
Conclusion: Sometimes lazy isn’t bad
Lazy loading can be a great way to improve your website’s load time, save bandwidth, and improve user experience. However, it’s not suitable for every website, and it depends on your goals.
If you’re not sure whether lazy loading is right for your website, the best thing to do is test it out and see how it affects your page load time and user experience.
When implemented correctly, lazy loading can be invisible to users and can dramatically improve page load times. However, if done poorly, it can result in a poor user experience with content appearing slowly or out of order.
It’s also worth noting that lazy loading is not a magic bullet for performance. While it can help, it’s just one piece of the puzzle.
If you’re serious about performance, you need to look at all aspects of your website and make sure they’re optimised. This includes everything from your server setup to your code and design.
Recap
- Website speed is important for user experience and conversions.
- Lazy loading is a technique used to improve website speed and performance by deferring the loading of non-essential images, scripts, and videos until after the page has been rendered.
- It can reduce the initial page weight and bandwidth usage, as well as improving the user experience.
- Native lazy loading is available in modern browsers (Chrome 77+, Firefox 75+, and Edge 79+).
- Libraries and plugins are available as well.
- Whether or not to use lazy loading depends on the content of one’s website, their goals, and other factors.
Limitless Networks, A Kerry Web Design Company
If you’re interested in speeding up your website, or if you’re not sure whether lazy loading is right for you, contact Limitless Networks.
We can help you analyse your website and make recommendations to improve your website load time.
Not quite ready to contact us? Download our free website speed guide. Learn why your slow website is costing your sales and our suggested solutions for speeding up your website.
