Lazy Loading vs. Eager Loading

Lazy loading: What is it and why should you care?

A beautiful website is great, but not if no one sees it. 

You may have designed a stunning website, but if it doesn’t load quickly, you may be losing traffic. 

Various different studies have shown that about 50 percent of internet users expect a webpage to load in two seconds or less, meaning if it takes three seconds to spin up your site, there’s a decent chance you’ve lost your visitor. 

On the flip side, it’s actually possible to increase conversions by decreasing page load time. 

When performing research into how to make your website quicker, there’s a chance you’ve come across the term lazy loading.

If you aren’t sure what this term is, no worries. You’re not alone.

What is Lazy Loading?

Lazy loading (also known as deferred loading) is the action of only loading necessary page assets as they are needed with the purpose of conserving system resources and improving overall speed and performance. 

In terms of images, lazy loading means that any image not immediately needed will not load until it is called for. 

It works by adding attributes to the original content.

By deferring image loading until needed, web pages are able to load quicker with just the immediately-needed images. 

Images on the page that aren’t in the users’ window of view will be filled with a placeholder image until needed.

If you’re an instagram user, you’ve probably seen this feature several times before. Next time you use Instagram, visit a popular page and notice that photos do not load until a user scrolls down to where those photos are. 

What is Eager Loading?

Whereas lazy loading takes its time loading images, eager doesn’t have the same patience.

Eager loading is the action of force-loading all the assets on a page at once. It loads related entities, even if the visitor never scrolls down to it. 

You may have seen eager loading in action before as well. If you have ever visited a page with a lot of photos or videos that displayed a loading screen, that’s eager loading. 

Eager loading allows you to load all of your resources at once, but it can lead to much slower speeds and increased bandwidth and resource usage. 

Lazy Loading vs. Eager Loading

In the terms of which type of loading works best, it all depends on your individual needs. 

Lazy loading offers a range of perks such as reduced requests, quicker load time, less resources, and bandwidth conservation.

This is especially helpful if you have a lot of photos on a page or an article that contains several photos.

And with mobile sites, where users tend to be even more impatient

Eager loading ensures that your site and all its related assets load at once. 

If you have lightweight assets or fast queries, eager loading can be a good option because it can save time by not having to execute additional SQL queries.

Lazy Loading in WordPress

WordPress introduced lazy loading for images by default in WordPress 5.5.

Until 5.5, users would have to install a third party plugin to lazy load images. 

This should offer a big improvement in site speed for millions of WordPress users.

“With WordPress enabling native lazy loading by default, it would significantly impact performance and user experience for millions of sites, without requiring any technical knowledge or even awareness of lazy loading as a concept,” said WordPress core committer Felix Arntz in the 5.5 announcement post. “Adopting the new loading attribute is a great chance for WordPress to lead the way for a faster web overall.”

Lazy loading can now be added to any page by adding the “loading” attribute to any “img” tag.