WordPress Performance – Lazy Load Images

This tutorial is a part of the WordPress Performance series. Every single byte does matter for great performance. And we are following the same rule to collect the great score for our website.

We are going to use the Lazy Loading technique for images to improve performance.

What is Lazy Loading?

Lazy loading is technique that defers loading of non-critical resources at page load time. Instead, these non-critical resources are loaded at the moment of need.

How Lazy Loading works?

The Lazy Loading technique goes something like:

  • You arrive at a page and begin to scroll as you read the content.
  • At some point, you scroll a placeholder image into the viewport.
  • The placeholder image is suddenly replaced by the final image.

We are going to test the Lazy Loading technique with the WooCommerce shop page.

Performance before Lazy Load Image

We are collecting our website’s performance score by running the audit task through the Lighthouse extension provided by Google. You can find the Audit tab in the developer console.

WordPress Performance Audit

The audit starting automatically by pressing the Run Audit button. It is an automatic task that goes through all the mandatory checks and will return the following result.

Performance before Lazy Loading
The result could vary depends on the selected theme for your website and selected device during the run audit.

As you can see from the above result, our test website has a performance score of 18 out of 100.

Working with Lazysizes for Lazy Load

The lazysizes is a core javascript library for lazy load images. It does not require any third-party library like jquery as a dependency. Let’s add this library to our WordPress site.

WordPress has the ability to inject and manipulate data through action hooks and filters. We are going to use the wp_enqueue_scripts action hook and the wp_enqueue_script() function to add the lazysizes javascript library.

Don’t worry if you are not familar with the coding stuff. I have created a plugin for you. Feel free to move to the plugin section.

First, open the functions.php file from the used theme directory. Go to the very end of the file and paste the below codes.

function wp546_add_lazy_sizes() {
	wp_enqueue_script( 'lazysizes', '//cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.0/lazysizes.min.js', array(), '5.2', true );
}
add_action( 'wp_enqueue_scripts', 'wp546_add_lazy_sizes' );

This is not just enough, we need to modify the image src to data-src and srcset to data-srcset. And have to add the lazyload class. Don’t worry, it’s not that hard as you imagine. We are going to use the wp_get_attachment_image_attributes action filter to do the required changes on the img tag.

You just need to copy the below codes and paste it to the same functions.php file at the bottom.

function wp986_lazy_attachment( $attr ) {

	if (is_array($attr) && count($attr) > 0) {
		$attr['class'] = $attr['class'] . ' lazyload';

		$old_src = $attr['src'];
		$old_src_set = $attr['srcset'];

		$attr['data-src'] = $old_src;
		$attr['data-srcset'] = $old_src_set;

		unset($attr['src'], $attr['srcset']);

		return $attr;
	}

	return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'wp986_lazy_attachment', 10, 1 );

The wp_get_attachment_image_attributes filter provides an array parameter $attr. The $attr holds all the src, class and srcset key values that we had replaced as per the requirement.

Now time to go to the shop page and run a performance audit again.

Performance after Lazy Load Image

Performance after lazy load image
The result could vary depends on the selected theme for your website and selected device during the run audit.

You can see the performance score increase from 18 to 34, which is great as compared to the previous result. We know this is not enough but this is one of the many steps to grab a better performance score.

Don’t worry if you are not a techie. You can download the plugin from the given Github link and follow the installation instruction.