Most people consider being lazy a vice – something that you have to overcome to do cool things. But in web development, lazy loading can be a powerful tool.

Lazy loading is a design pattern in computer science where you defer initialization of an object until the point at which it is needed.

In web development it’s pretty similar. Basically you don’t load an asset until you need it.

That generally means you’re going to load all of the assets above the fold. And any static files like images below the fold you can load as the user starts to scroll down.

Advantages of Lazy Loading

There are a couple of advantages to this method:

• Improve the initial page load – this is obviously good for the user loading the page
• Decrease resource consumption – this is actually good for all users because your web server will have less work to do because lots of users don’t scroll and don’t need all of the assets. That means it will have more resources for the users who do need all of the assets.

Implementing Lazy Loading

There are a few different plugins that can lazy load images for you. In our case I’m going to show you the easiest option to use.

Jetpack has lazy loading built in. Right now this is included in the main Jetpack plugin but it might also be moved into a separate plugin, Jetpack Boost.

And here's the best part about lazy loading. It's a single checkbox. It doesn't cost anything. You just check a checkbox.

The benefits depend a lot on how many images on your site. On my site I have a handful of images below the fold. If you have dozens of images this could drastically speed up your site.

All you have to do is install a plugin, check a checkbox, and you could see a .1 second improvement. I'll do that on every website. It's one of the easiest speed improvements you can make.