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.
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.
Lazy load responsive images in WordPress means that you will serve responsive images and lazy loading them at the same time
Lazy loading improves user experience and making the website loads faster for user-end. This gives better overall experience.
A faster loading website reduces the chances of bounce rate, which is an important ranking signal for search engine such as Google.
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.
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.
Like what you read? Don't forget to subscribe to our daily and weekly newsletters for powerful (and FREE) emails!
We use WP Rocket to lazy load all our images and we can't be happier. Learn more about WP Rocket here!
