What is it?
With the connotation associated with the word lazy, it’s hard to imagine anything beneficial coming from the rest of the phrase… except when it comes to lazy loading.
Lazy loading is the process in which, rather than bringing up an entire webpage and all its information at the start, only the necessary page elements are loaded. This can be anything from images, charts, or videos not at the top of a webpage that a user may or may not scroll down to look at.
As you may have gathered from the explanation above, lazy loading is essentially telling the browser to procrastinate by saying, “wait to load images until it’s necessary.”
But why go through the hassle of making certain elements load later than others? What’s the benefit? In several words: it’s a better user experience.
For Example…
Say you’re reading a blog post with an image at the top of the page and a few diagrams near the bottom; you might not scroll through to the lower parts of the text for a while, so the website will wait and display the diagrams gradually as you reach them.
This way, the page loads faster at first because the browser only loads one image at the start instead of several.
On the opposite side of the spectrum, there is eager loading when all the elements on the page are loaded upfront. Essentially eager loading is the browser saying, “Everything will be taken care of at the start.”
And while procrastination and laziness typically carry negative connotations in the real world, in specific cases such as this, it’s more efficient.
Benefits and (minimal) Drawbacks
As you may have gathered, lazy loading reduces the time it takes for a page to load by decreasing the initial page weight (aka, there is less information for the server to bring up when a page loads).
This is not only good for your website users, especially if they don’t have a great internet connection—which would increase loading times exponentially, but having a shorter load time can also improve your Core Web Vitals score. This element is called “Defer offscreen images” on your Page Speed audit.
Furthermore, it wastes less data and resources.
For people who don’t have unlimited data plans (think mobile devices), the amount of data used to load a webpage without lazily loaded images and videos is increased—even if they don’t scroll down the page to see all of the loaded elements. This means they use more data, which can cost them more money.
On the flip side, there is always an off-chance that a user may request the page resources faster than expected. Like if a user needs to scroll down a page quickly, they might have to wait for the images to load, which could negatively impact their experience on the website.
The other potential issue is additional code for the browser to load and process. Suppose an inexperienced or lazy (no pun intended) developer adds the lazy loading code in a way that’s inefficient for the browser. In that case, the increase in that overall time might outweigh the time saved by the lazy loading.
Implementing Laziness
One of the more common ways to implement lazy loading is to add the HTML attribute loading in an image tag. By adding loading=“lazy”, the browser then knows to wait to load the image until the user scrolls close to it.
Here’s an example:
<img src="test-image.jpg" alt="test image" width="100" height="100" loading="lazy">
The good news is that most popular platforms have already implemented lazy loaded images, or if it doesn’t come standard, you can usually “upgrade” to include that feature.
Web developers can use other programming frameworks to implement more sophisticated lazy loading. JavaScript frameworks Angular and React support lazy loading. If you want to know more about this subject, take a look at this article by Mozilla.
Some things to be mindful of…
Be sure to double-check that the images or videos you would like to have lazy loaded are lower on the page. You don’t want to lazy load above-the-fold elements like the website logo that appear at the top of the webpage. For these cases, you can leave off the loading=“lazy” attribute or use loading=“eager”.
And while lazy loading is more easily noticed with images and videos, other page resources such as JavaScript, CSS, and iframes can also be lazily loaded. If you see something about ”Eliminate render-blocking resources” on your Google Page Speed report, this is one way to fix it.
Final Notes
As you can tell, lazy loading is almost always a good idea for websites.
It makes your website load faster, which makes your users happy. In addition, it can also help get your website to rank higher on search results pages since it improves Web Vitals and performance—a win-win situation.
Have any other questions regarding lazy loading? Any tips or tricks for us to try out? Let us know in the comments.
And as always, let us know if you need further help optimizing your website. Contact us, and we’ll be happy to find the solution that works for you!