How To Lazy Load Images To Speed Up WordPress

Page load speed is one of the most important elements of your WordPress site. I’ve already given some general tips on speeding up WordPress and cleaning your WordPress database to improve performance. But today, I’ve got a new tip for speed:

• Lazy loading your images on WordPress platform.

Images are one of the biggest objects your visitors will have to download when they visit your site – which makes them one of the biggest things that can slow down your site. On average, images make up 63% of a web page’s size.

But when you lazy load images, your images only load once a user scrolls down the page. This makes your initial page load time much faster, as you only have to load the additional resources if a reader engages with your page.

In this post, I’ll show you how to set up lazy loading for WordPress with a free plugin called a3 Lazy Load.

Benefits of Lazy Loading WordPress Images

I already mentioned the main benefit of lazy loading images:

Faster initial page load times.

30% of users want sites to load in under one second, so this is incredibly important for your success.

But lazy loading also has a secondary benefit for your users. You’ll actually help conserve your users’ bandwidth. And with a significant portion of web traffic being mobile devices, that’s actually a pretty nice thing to do for your visitors.

Negative Effects of Lazy Loading WordPress Images

There is one potential negative of lazy loading your images.

If part of your strategy involves trying to rank your images on Google Image search, you may hurt your image SEO by lazy loading images.

You won’t negatively affect your regular rankings, but images may not rank as well.

You can always use the Fetch as Google tool to check how Google views your site when it comes to lazy loaded images. If Google shows your images in the tool, you have nothing to worry about.

Otherwise, you may want to consider how much you value Image Search versus improved page load times.

How to Lazy Load Images with WordPress Plugin

To lazy load images for your WordPress site, you can use the free a3 Lazy Load plugin. This plugin is listed at the wordpress.org plugin repository and can be installed like any other WordPress plugin.

Once you install and activate the plugin, you’ll have a new “a3 Lazy Load” option in the “Settings” tab of your dashboard sidebar:

 

Click on that to configure the plugin. The plugin will be enabled by default, but if you ever need to turn it off, you can toggle the “Lazy Load Activation” button to “OFF”:

In the “Lazy Load Images” section, you can pick the specific image types to lazy load. For example, you could have all the images in your sidebar load instantly, but still lazy load images in your content.

By default, lazy loading is turned on for all image types:

You can even exclude a specific CSS class of images if you want to be really specific.

The plugin can also help you lazy load videos in the “Lazy Load Videos and iframes” section. Enable/disable lazy loading for specific locations just like you did with the images:

The “Script Load Optimization” box lets you tweak a minor performance detail for your site. The default is set to place the script in the footer, which is the optimal method. But if you need to move the script to your header for some reason, you can do that here.

Note: Only change that setting if you have a specific reason to do so.

The “Effect and Style” tab lets you change the background for your image placeholders, as well as the loading effect for your images. You can choose to either display a spinner or just have the images fade in:

Finally, the “Image Load Threshold” tab lets you make your images load before the reader actually scrolls to them. This is a really nice feature because it lets you maintain good user experience. Readers won’t actually know images are lazy loading.

Here’s how it works:

If you set the “Threshold” to 500px, images will start to load once the reader has scrolled to 500px above where the relevant image starts. You can adjust this number to find the sweet spot for your site:

That’s all there is to it!

Your images should now start lazy loading according to your preferences.

Final Thoughts

There are other free WordPress plugins that can help you enable lazy loading, but a3 Lazy Load has the best features out of any of the free plugins that I have tried.

After implementing lazy loading, do make sure to check your site with the Fetch as Google tool. It’s always a good idea to make sure Google is not experiencing any indexing problems.

As long as Google can crawl normally, your readers will enjoy faster page load times and a better user experience without any negatives to your site.

Have you used any lazy loading plugin for your WordPress site? Let me know about it in the comments below.

Don’t forget to share this post!

Subscribe for more videos

Source: https://wpsutra.com/lazy-load-images/