What is lazy loading?
A key skill that every developer needs is smart laziness. It's important to do the least amount of coding to get a function to work because that will help prevent performance and memory issues. That's why we're going to talk about lazy loading today.
Lazy loading is a clever concept that can improve page load speeds dramatically. It's pretty simple at the core. All lazy loading means is that your page doesn’t load certain elements until someone is looking at them.
You've probably seen this quite a bit. Whenever you go to those websites that have the infinite scroll on the page, that's using some form of lazy loading. There's usually some kind of placeholder or loading wheel to let you know that the content is about to show any second.
It's used a lot when it comes to loading images and videos because these resources take up a lot of memory and bandwidth to load and that slows down a website. When you lazy load images and videos, you aren't using the real thing at first. You'll have some kind of placeholder just to keep the spot open.
Then as someone scrolls down the page and the picture comes into view it magically pops up. That's because you have an event listener that catches when the picture moves onto the screen. That's the basic way to handle lazy loading. It gets the job done and you get to speed up your website fairly easily.
But there are other, better ways of doing this. One of those methods is using a JavaScript library to handle the lazy loading for you. You don't have to write any code. All you have to do is use the right parameters in the right places in the library and you're good to go.
Here's a few good lazy load libraries:
- Lazysizes https://github.com/aFarkas/lazysizes
- Yall.js https://github.com/malchata/yall.js
- Lozad.js https://github.com/ApoorvSaxena/lozad.js
Another option if you want to get more hands on in the code is to use the intersection observer object. This will give you access to methods that make it super easy to determine whether an element is on the screen or not and other useful information. You can learn more about how to use the intersection observer here: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API.
Now you know what lazy loading is and a few different ways you can use it in your code. Just a pro tip here. You might not want to lazy load everything on the page. If you can regular load the images or videos that will be at the top of the page, then do that. Lazy loading is more helpful when there's a lot of content further down the page and it slows down that initial load time.