WP Rocket and Native LazyLoad on WordPress 5.5

Lazy-loading images is one of the easiest ways to speed up your WordPress site and optimize its performance. After HTML introduced its new loading attribute, WordPress 5.5 made it part of its core to enable native lazy-loading of images. 

Before native support for lazy-loading images on the web was available, web developers had to use JavaScript and jump through hoops to enable it. However, WordPress users had the option to enable it easily via third-party plugins such as WP Rocket.

In this article, you’ll learn more about WordPress 5.5’s new lazy-loading images feature and how it’s fully compatible with WP Rocket’s LazyLoad functionality. You’ll also discover additional advantages of using WP Rocket LazyLoad. 

Excited? Let’s dive in!

What is Native Image Lazy-Loading?

Images are the most popular media format on the web. They’re one of the heaviest resources loaded by most websites and take up more bandwidth than any other asset. 

Looking at the data from HTTPArchive, roughly 10% of websites load about 5 MB of images on desktop and mobile. That’s a lot of memes! Therefore, optimizing images is crucial. But there’s a limit to how much you can optimize them. 

If you have too many images on your webpage, then there’s a high chance your visitors will bounce even before the page loads. Lazy-loading forces images below-the-fold to load only when the user scrolls down. It’s a simple solution to reduce Critical Rendering Path without harming user experience.

For more information, you can refer to WP Rocket’s in-depth article on how to lazy-load images on your WordPress site.  

The ‘loading’ attribute in HTML5

After introducing the loading HTML attribute for <img> and <iframe> tags, lazy-loading has now become a web standard. It gives you control over when a browser should start loading images and iframe elements.

<img src="wp-rocket-is-awesome.jpg" loading="lazy" alt="WP Rocket" />

<iframe src="WP-Cache-Basics.html" loading="lazy"></iframe>
Native lazy-loading images demo on Chrome browser - scrolling pictures of cats
Native lazy-loading images demo on Chrome browser (Source: Google)

You can view the full demo shown above and see for yourself how the loading attribute handles a page with 100 pictures.

The loading attribute supports the following two values:

If you don’t specify any value, then the default value of the loading attribute is auto, which leaves it up to the browser to decide the default lazy-loading behavior. 

Note: The loading attribute only supports <img> and <iframe> tags as of now. For instance, you cannot use it to lazy-load CSS background images. 

Advantages of Native Image Lazy-Loading

Compatibility with Various Browsers

According to Can I use, the loading attribute is supported by browsers used by over 72% of the global internet audience. The two major hold outs currently are Safari and iOS Safari browsers, both of which are used by more than 15% of the online users.

Support for ‘loading’ attribute in major browsers
Support for ‘loading’ attribute in major browsers

Browsers that don’t support the loading attribute won’t see any benefits of lazy-loading, but including this attribute in your code will have no negative impact on your site’s performance.

Note: You can enable the loading attribute manually in Safari and iOS Safari browsers under its Advanced > Experimental Features menu.

Native Image Lazy-Loading in WordPress 5.5

Introducing native lazy-loading API to WordPress Core has been an ongoing debate among WordPress contributors for many years now. However, with no proper standard in place then, it wasn’t a straightforward process. 

The introduction of native HTML loading attribute, and its eventual support by major browsers, changed this. A few months later, the WordPress core development team announced the addition of native lazy-loading images in WordPress 5.5

How Lazy-Loading is Implemented on WordPress

WordPress 5.5 will add the loading=”lazy” attribute-value pair to every image which has width and height attributes specified already. This condition is included to avoid Cumulative Layout Shift (CLS). It’s when the webpage layout shifts abruptly creating a jarring user experience.

An example of bad user experience due to CLS
An example of bad user experience due to CLS (Source: Google)

Google grades websites based on their CLS score. Those that rank poorly are penalized by Google in their search results ranking. Since including width and height size attributes on images can get rid of CLS, it’s a good condition to have.

Technically, WordPress’ native lazy-loading image feature works similar to how it already handles responsive images by appending the srcset and sizes attributes. 

In addition to the above, WordPress will back-fill all img tags with width and height attributes if they aren’t present already. It’s done to ensure that all images on your site benefit from lazy-loading. The core team is also pushing for a new feature to force all images to have width and height attributes. 

By default, WordPress adds the loading=”lazy” attribute to all image tags in the output of the following functions or hooks:

Each of these functions’ outputs leads to a specific “context” within WordPress. You’ll learn the importance of these five contexts in the next section.

To make this transition easier on your server’s resources, WordPress has also added a set of new core functions. Below is a list of them all with a brief description of what they do:

Customizing Native Image Lazy-Loading on WordPress

You can customize the default behavior of native image lazy-loading on WordPress through various filters. 

The most important of them is the wp_lazy_loading_enabled filter which accepts three parameters for customizations: $default, $tag_name, and $context. You can hook into this filter and turn off lazy-loading for all the template images. 

Another new filter called wp_img_tag_add_loading_attr can be hooked in to modify images within content related contexts such as the_content, the_excerpt, and widget_text_content

For contexts which output purely images (e.g. wp_get_attachment_image() ), you can change its $attr directly using PHP. 

The WordPress core team has published a few lazy-loading customization examples to help you get familiar with all its features. If you’re a WordPress theme or plugin developer, I highly recommend you to look at them.

As of now, WordPress supports native lazy-loading functionality for images only. But they may extend it to other HTML elements (e.g. iframes) in the future.

Compatibility with WP Rocket LazyLoad

WP Rocket comes with its implementation of image lazy-loading called LazyLoad. To avoid any potential conflicts, WP Rocket automatically disables WordPress’ native image lazy-loading when LazyLoad is active. 

Enabling WP Rocket’s LazyLoad feature
Enabling WP Rocket’s LazyLoad feature

You can enable LazyLoad easily by going to Settings > WP Rocket > Media panel in your WordPress admin dashboard.

Unlike WordPress’ native implementation, LazyLoad enables lazy-loading for other HTML elements such as iframes and videos. It’ll also lazy-load background images if they’re applied inline for certain HTML elements.

You can disable the LazyLoad option in WP Rocket if you want to use WordPress’ native image lazy-loading. However, many major browsers don’t support the new loading attribute yet. Plus, WordPress focuses its implementation only on images. If your website includes many images, videos, and embeds, WP Rocket’s LazyLoad is still the better overall option.  

You can refer to WP Rocket’s LazyLoad documentation for more information about its extensive feature set. 

Summary

Lazy-loading images is a great way to speed up your WordPress site with minimal effort. It helps you save bandwidth costs while also ensuring a better user experience for your site visitors.

As WordPress 5.5 enables native image lazy-loading by default, it’ll give a significant performance boost to many websites that don’t use it yet. But it still lacks some teeth, especially for websites that use media resources apart from images.  

You can install WP Rocket and enable its LazyLoad option to optimize your site further even more. Go rocket today!

If you’re having any trouble lazy-loading images on your WordPress site, leave a comment. 

Author's avatar

Salman Ravoof is a self-taught web developer, writer, and creator. He’s a huge fan of Free and Open-Source Software. Apart from tech, he finds science, philosophy, and food exciting. Learn more about him on his website, and connect with Salman on Twitter.

0 comments
Add a comment
Your email address will not be published. All fields are required. Comment policy: We love comments and appreciate the time that readers spend to shader ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

Get a Faster Website in a Few Clicks

Setup Takes 3 Minutes Flat

Get WP Rocket Now What are you waiting for?

{"cart_token":"","hash":"","cart_data":""}