Image lazy loading

Mobile traffic has crossed the 50% mark some time ago. That is a huge incentive for webmasters to increase their page performances.

One of the most effective ways to increase the speed of a page in WordPress or any other platform is lazy loading images.

What is lazy loading

bear, predator, zoo
Photo by raincarnation40 on Pixabay

Lazy is a short name for optimum. Well, that is definitely true in tech, but it’s sometimes true in life maybe?

Anyway, what that means is to only load images when they are actually needed. For example. If your website has 10 images on your homepage, the user would download all those 10 images to see it.

In some cases, especially on mobile, the user might not need to see any of them, so that’s a waste of his time and your server resources. If he clicks the first button and goes to the next page then he probably only needed the first image.

Image lazy loading is eco friendly 🌍

Image lazy loading is helping save the planet. While helping your site, you are also helping the planet. How cool is that right?

Due to the fact that some users might not read all your articles to the end (some might get the point faster), they will not load all the images. You just saved the electricity which would have been used to download that image to the user computer and to render it. Its not much, but every bit helps!

How do you add lazy loading

Thinking
Photo by Melanie Dretvic on Unsplash

There are a ton of plugins out there that you can use to lazy load images in WordPress.

My personal favorite is https://wordpress.org/plugins/a3-lazy-load/ because you can lazy load iframes and videos as well. However, I don’t like any performance plugin as they tend to be quite complicated and bloated. I think every plugin should optimize itself, but that’s another story.

So just install that plugin and you will get lazy loading in WordPress. That is what you need to do at this time.

What is native lazy loading

Google logo screengrab
Photo by Christian Wiediger on Unsplash

Native lazy loading is something Google Chrome is supporting starting with Chrome 76.

What this means is that you will not need any specific plugin to do it, and it will work by just setting the loading attribute.

WordPress is going to introduce support for it meaning you might get a set when inserting images through the media library. This is a good thing, as you won’t need extra scripts for lazy loading.

However, this only applies to images for now. If you have iframes and videos, you still need the plugin.

Going further

Performance for images is something that can automatically be done, so you are in luck. Other things like scripts and css will probably be your problem.

To find out more about images best practices check: 5 simple image tricks that go a long way in WordPress

Leave a Comment