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.
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>
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:
- lazy: Defers loading of image or iframe elements until it meets some conditions. These conditions can vary depending on several factors such as the image format, the browser, and the strength of the network connection.
- eager: Loads the resources immediately, irrespective of where they’re located on the webpage.
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
- Baking in native support for lazy-loading images makes it super easy for you to improve the performance of your site.
- You don’t have to install external JS libraries like jQuery to enable lazy-loading functionality on your site. The fewer the third-party resources your site loads, the better it’ll perform.
- Making lazy-loading functionality a part of the HTML standard will ensure that it works flawlessly across all major browsers.
- Improved data savings and bandwidth costs for users and website owners.
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.
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.
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:
- the_content(): Images in post content.
- the_excerpt(): Images in post excerpts.
- widget_text_content: Images in text widgets.
- get_avatar(): Avatar images.
- wp_get_attachment_image(): Images added as an attachment on WordPress. They’re also called template images.
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:
- wp_filter_content_tags(): Modifies HTML tags in post content to include new attributes. For example, it modifies img tags by calling the next three functions if needed. Similar functions can be added later for optimizing other HTML elements too.
- wp_img_tag_add_width_and_height_attr(): Adds width and height attributes to img tags which don’t have them.
- wp_img_tag_add_srcset_and_sizes_attr(): Adds srcset and sizes attributes to existing img tags.
- wp_img_tag_add_loading_attr(): Adds loading attribute to img tags.
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.
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.
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.