- Published on
What is Lazy Loading?
- Authors
- Name
- Nico Bistolfi
- @nicobistolfi
Lazy Loading is a technique that loads the images of a website only when they are needed. Like it´s shown in the video below.
https://www.youtube.com/watch?v=Ry3XI3z6P8M&t=1s
The images will be loaded only when the user scrolls (when the user needs the content.)
How lazy loading works?
Once a user enters your website, the browser will read the HTML and it will start rendering the website to the user’s screen (all the text, images, and the hundreds of technical parts of a website that run at the back).
Instead of Lazy Loading, a standard solution loads all the content inside the page. For example, if a website has 20 images, they will be loaded all at once, and don’t prioritizing if the content is demanded or not. This results in more network usage and a slower website. That means a worst User experience and not Google friendly.
Why should I consider adding Lazy Loading to my website?
Using the Lazy Loading technique on the website will make that only images that are needed (visible) for the user will be loaded. The rest will wait to load until the moment the user scrolls and it makes sense to invest in network usage to load that content.
Lazy Loading has some benefits not only for your website but also for your visitors and clients:
- Better User Experience.
- Reduce website size and that means you will have a faster website.
- Improves your SEO rankings.
- Lower network usage (you spend money!)
- Google-friendly.
- Probably will impact directly on your conversions (because your users have an amazing experience with your website).
- Gives you higher customer retention. Reduces the chances the user will leave the website.
-> In other words, Lazy Loading means that the images of your website won't be loaded until they are needed.
Lazy Loading is enabled by default for any website using Piio. So, if already have Piio on your website, you are one step further, congrats!
Wanna know more about Image Optimization? Read this article.