Lazy Websites are Fast Websites

Lazy Loading Websites are Fast Websites
  1. Why Website Speed is Important
  2. How to Check & Monitor Your Website Speed
  3. How Websites Slowdown
  4. Optimizing Static Vs Dynamic Sites
  5. How Hosting Affects Your Website Speed
  6. Server Location Matters More Than You Think for Website Speed
  7. Optimize Images
  8. Why You Should Always Use a Content Delivery Network (CDN)
  9. Offload Audio & Video Files
  10. Lazy Websites are Fast Websites
  11. Yes, Your Theme Can Affect Site Speed
  12. WordPress Plugins: Quality over Quantity

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.

Lazy load images below the fold

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.

Jetpack Lazy Loading speed test
I did two speed tests. After turning on Lazy Load images the speed improved by .1 seconds

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.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.