How to Lazy Load Images on WordPress Sites (4 Easy Steps)

Images are an essential element in all websites. It is always best if you have them to present your website smartly, at the same time, you have to make sure your site loads faster. It’s a challenge for all websites in the world. In this critical situation, you must find an alternative way to load your images that does not affect page load time. Lazy loading can be a great help in this case. Today, we will learn how to lazy load images on WordPress sites.

Without lazy loading, all images on a web page load immediately. This can potentially harm performance on web pages with many images. Your website speed matters to your visitors. No one likes to enter a site that takes too long to load. Study says that a one-second delay in page response can result in a 7% reduction in conversions (r-1). Lazy loading images is one of the most useful optimization technique that helps immensely to load your WordPress site faster. 

What is Lazy Loading?

Lazy loading is an image optimization technique that loads the images on the viewport and delays downloading and rendering images that are below the fold. In this system, the web browser builds the web page DOM without downloading and preloading videos on the page. The images and videos are only visible when the visitor scrolls down to them.

How Lazy Loading Works

You literally don’t need any images that you don’t see. Loading all images right away is unnecessary and wasteful of network resources. If visitors don’t scroll towards those images, they would have been loaded without any purpose.

What’s the point of loading all images at once? Lazy loading stops loading the images your visitors are not on. Lazy loading is like preloading images & videos as they appear on the viewport while delaying the rest. This is how actually lazy loading works.

How to Lazy Loading Images on WordPress Sites?

Enabling lazy loading on a WordPress site is easy. You just need to install a plugin to do this. For this tutorial, we will use a3 Lazy Load. It’s a lightweight and easy to setup plugin. You don’t have to go through a lot of steps to start lazy loading. Let’s get started.

Step 1: Install & Activate a3 Lazy Load WordPress Plugin

First of all, you need to install the a3 Lazy Load WordPress plugin. You can go to Dahsboard>Plugins>Add New, then search a3 Lazy load plugins and click install.

Once you have installed the plugin, you need to activate the a3 Lazy Load plugin to make it work. You just have to hit the activate button. And, you are done.

Step 2: Decide What Images to Lazy Load

You can decide which images and where to enable lazy load. By default, all options will be open. You can close them one by one. 

Step 3: Exclude Images from Lazy Loading

If you want some images to be excluded from lazy loading, you can also do that. Enter image class names in the “Skip Images Classes”  box or if the image has no class name by adding the exclusion skip-lazy class name or data-skip-lazy attribute to the image. Examples, by class <img class=”skip-lazy”> , by attribute <img data-skip-lazy>. If you want more than one images to be excluded, separate class names by commas

Step 4: Lazy Load Videos and Iframes

This plugin also lets you lazy load video and iframes. By default, this option is on. You can decide to turn this off in the settings. There’s an option to exclude specific items from the lazy loading. Lazy loading does not work for shortcodes.

Apart from these, you can tweak many other options given inside this plugin’s settings. Lazy loading starts working just after installing and activating the plugin. Tweaking the available options is just up to you.

Some Free WordPress Lazy Load Plugins

1. A3 Lazy Load
2. Lazy Load by WP Rocket
3. Lazy Load for Videos
4. Lazy Load Optimizer

These are some of the widely used free WordPress lazy load plugins available on the WordPress plugin directory. 

WordPress’ Default Lazy Loading Feature

Lazy loading is a must-have performance improvement now, WordPress finally has brought lazy loading feature to its core. With the release of WordPress 5.5, now you have the lazy loading feature without installing any third-party plugin. But with some plugins like A3 Lazy Load lets you have better control over lazy loading images on your site.

How to Disable Default Lazy Loading Feature in WordPress?

If you wish to disable the WordPress’ default lazy loading feature you can do it just by adding the code below to your WordPress site.

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

If you don’t want to write any code, you can disable this feature by installing the Disable Default Lazy Loading plugin into your site. It’s easy. Just install and activate the plugin. No other settings involved.

Want to check your website’s loading speed?
Read our article to know 7 best online tools to check website speed for free.

When it comes to loading your web page faster, every byte counts. As images make up most of a website’s weight, loading all your web page’s images at a time affects the load time severely. And, when you can barely imagine websites without images. Unless you manage them wisely and find a way like lazy loading to serve them that helps you load the website faster, your site is in danger.

Reference

1. A 1 second delay in page response can result in a 7% reduction in conversions.