Starting with version 76, Google Chrome supports lazy loading of images and iframes natively.

This tutorial shows how loading="lazy" can be added to the images output 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.

Example:

Before:

<img width="1600" height="1143" src="https://srcset.wpdd.site/wp-content/uploads/sites/9/2019/08/kkysaocve94.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="https://srcset.wpdd.site/wp-content/uploads/sites/9/2019/08/kkysaocve94.jpg 1600w, https://srcset.wpdd.site/wp-content/uploads/sites/9/2019/08/kkysaocve94-300x214.jpg 300w, https://srcset.wpdd.site/wp-content/uploads/sites/9/2019/08/kkysaocve94-768x549.jpg 768w, https://srcset.wpdd.site/wp-content/uploads/sites/9/2019/08/kkysaocve94-1024x732.jpg 1024w" sizes="(max-width: 1600px) 100vw, 1600px">

After:

<img loading="lazy" width="1600" height="1143" src="https://srcset.wpdd.site/wp-content/uploads/sites/9/2019/08/kkysaocve94.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="https://srcset.wpdd.site/wp-content/uploads/sites/9/2019/08/kkysaocve94.jpg 1600w, https://srcset.wpdd.site/wp-content/uploads/sites/9/2019/08/kkysaocve94-300x214.jpg 300w, https://srcset.wpdd.site/wp-content/uploads/sites/9/2019/08/kkysaocve94-768x549.jpg 768w, https://srcset.wpdd.site/wp-content/uploads/sites/9/2019/08/kkysaocve94-1024x732.jpg 1024w" sizes="(max-width: 1600px) 100vw, 1600px">
Live Demo

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.

Step 1

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

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

Code:

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 );

}

That’s it!

To see if lazy loading is working or not, open DevTools in Chrome and go to Network > Img.

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.

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.

Reference

https://developer.wordpress.org/reference/hooks/post_thumbnail_html/

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
  • If you wanted to apply this to a custom image size what would need to be changed so that the loading=”lazy” is applied.

    i.e The custom image size is called “pslimages”

  • magnifiercross
    >
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: