Pricing
Written by Editorial Team on May 13, 2020

How To Enable Native Lazy Loading Responsive Images in WordPress?

If you want a faster WordPress loading speed and a better experience for your website visitors, you should consider enabling native lazy loading responsive images in WordPress.

Lazy loading images is a process that allows your website to only load images when a user scrolls down to the specific image, instead of loading the entire gallery on the page that will make your site load slowly. Large and popular websites such as Buzzfeed uses lazy loading images to provide better user experience (UX) for their readers.

What Is Lazy Load Responsive Images
Lazy loading images improve loading speed experience

Technology giants such as WordPress understands the importance of serving content quickly. As a matter of fact, all WordPress sites with version 5.4 and above will get lazy loading feature by default. Google Chrome version 76 also promotes and support the usage of lazy loading of images and iframes natively.

This WordPress tutorial will guide you exactly how you can enable native lazy loading responsive images in WordPress. So, let's dig in.

What Are The Advantages Of Lazy Loading Images?

Responsive Images

Lazy load responsive images in WordPress means that you will serve responsive images and lazy loading them at the same time

Faster Load

Lazy loading improves user experience and making the website loads faster for user-end. This gives better overall experience.

Bounce Rate

A faster loading website reduces the chances of bounce rate, which is an important ranking signal for search engine such as Google.

Code Snippet Before And After Enable Native Lazy Loading Responsive Images In WordPress

How To Enable Native Lazy Loading Images In WordPress
How To Enable Native Lazy Loading Images In WordPress

Below, you will learn how loading="lazy" can be added to the output of the images by the_post_thumbnail()using the post_thumbnail_html filter hook.

the_post_thumbnail() is one of the WordPress functions for displaying native responsive images that include srcset and sizes attributes. This way, instead of the largest image size loading on all screen sizes, the closest sized image will be loaded by the browser thus saving server bandwidth and improved load times for the visitors.

Common code string before native lazy loading responsive images is activated:

<img width="1600" height="1143" src="https://domain-name.com/wp-content/uploads/sites/05/2020/05/before.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="https://domain-name.com/wp-content/uploads/sites/05/2020/05/before.jpg 1600w, https://domain-name.com/wp-content/uploads/sites/05/2020/05/before.jpg 300w, https://domain-name.com/wp-content/uploads/sites/05/2020/05/before.jpg 768w, https://domain-name.com/wp-content/uploads/sites/05/2020/05/before.jpg 1024w" sizes="(max-width: 1600px) 100vw, 1600px">

Common code string after native lazy loading responsive images is activated:

img loading="lazy" width="1600" height="1143" src="https://domain-name.com/wp-content/uploads/sites/05/2020/05/before.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="https://domain-name.com/wp-content/uploads/sites/05/2020/05/before.jpg 1600w, https://domain-name.com/wp-content/uploads/sites/05/2020/05/before.jpg 300w, https://domain-name.com/wp-content/uploads/sites/05/2020/05/before.jpg 768w, https://domain-name.com/wp-content/uploads/sites/05/2020/05/before.jpg" sizes="(max-width: 1600px) 100vw, 1600px">

Important Note

Native browser lazy loading does not behave like the “traditional” JS-based lazy loading that we are accustomed to where the images fade into view as they are scrolled to in the viewport. Google’s approach seems more about efficiency and performance than visual smoothness.

How To Enable Native Lazy Loading Responsive Images In WordPress?

In order to achieve the results above, there are two things you need to do.

Step 1: Install the code snippets plugin which is found in the WordPress repository and activate it.

Step 2: Go to Snippets » Add New.

Title: Add loading="lazy" attribute to images output by the_post_thumbnail()

The code looks like this.

add_filter( 'post_thumbnail_html', 'wpdd_modify_post_thumbnail_html', 10, 5 );
/**
 * Add `loading="lazy"` attribute to images output by the_post_thumbnail().
 *
 * @param  string $html	The post thumbnail HTML.
 * @param  int $post_id	The post ID.
 * @param  string $post_thumbnail_id	The post thumbnail ID.
 * @param  string|array $size	The post thumbnail size. Image size or array of width and height values (in that order). Default 'post-thumbnail'.
 * @param  string $attr	Query string of attributes.
 * 
 * @return string	The modified post thumbnail HTML.
 */
function wpdd_modify_post_thumbnail_html( $html, $post_id, $post_thumbnail_id, $size, $attr ) {

	return str_replace( '<img', '<img loading="lazy"', $html );

}

Once you had done the above, it is all set! You can check if you had done it right by opening DevTools in Chrome and go to Network » Img.

  1. Reload your page and after the page loads, scroll down the page and you can see details of the images that are lazy-loaded along with increase in the number of requests.
  2. Only the images that are below the fold will get lazy-loaded. Also, not all the images below the fold may get lazy-loaded. It depends on several factors like your visitors’ internet speed. See Google’s page for more information.

Like what you read? Don't forget to subscribe to our daily and weekly newsletters for powerful (and FREE) emails!

Looking for an automated way to enable lazy load?

We use WP Rocket to lazy load all our images and we can't be happier. Learn more about WP Rocket here!

Article written by Editorial Team

Leave a Reply

Your email address will not be published. Required fields are marked *

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

Related Posts

crossmenu