Note: Jetpack’s Lazy Loading feature was first introduced in 2018. At the time, few other tools offered such functionality. It offered a much needed performance boost to WordPress sites, especially those with a large number of images.
A couple of years later, a new lazy loading web standard was introduced, and WordPress itself started supporting this standard. Today, modern browsers all support lazy loading, and WordPress itself comes with built-in lazy loading functionality for images and videos.
Considering this positive change, Jetpack’s Lazy Loading feature is no longer necessary. You have the option to disable it on your website, and you will immediately begin benefiting from the native lazy loading feature offered by WordPress itself.
To facilitate this transition, Jetpack’s feature will be deprecated and eventually removed from both the Jetpack plugin and the Jetpack Boost plugin in November 2023.
Lazy Loading Images makes pages load much faster by only loading visible images, waiting to load images that are off-screen as you scroll down. This feature can improve site performance, and is especially great for users in low-bandwidth or expensive-bandwidth environments, such as users on mobile devices. This feature is compatible with WordPress core’s lazy-loading images feature.
Activating or deactivating Lazy Loading Images
- Navigate to Jetpack → Settings → Performance.
- Scroll to the Performance and Speed section.
- Click the toggle to activate / deactivate Lazy loading for images.
How does the Lazy Loading Images feature work?
The Lazy Loading images feature filters the post content and modifies image tags so that the src attribute loads a transparent placeholder image. For example, <img src="https://jetpack.com/image.jpg" /> would become <img src="https://jetpack.com/placeholder.jpg" data-lazy-src="https://jetpack.com/image.jpg" /> .
When JavaScript then loads, it will look for all images in the current view and replace the src attribute with what is in data-lazy-src. This also occurs as the user scrolls down the page and images come into view.
How does the Lazy Loading Image feature improve site performance?
By default, when a web page loads, it attempts to also load all the images that it sees in the source. For a visitor using a desktop browser, the time and bandwidth necessary to load that page may not be an issue.
With mobile usage of the Internet now surpassing that of the desktop, the majority of our users are likely accessing our content with mobile devices. For mobile visitors, where the view is much narrower and bandwidth is a more significant concern, this full loading can be problematic. That’s using bandwidth to load images that they may not even want to see.
By lazy loading images, those images will only load when they actually appear on-screen, reducing bandwidth usage by as much as half of what is used without lazy loading images enabled.
Customizing Lazy Loading Images
These filters allow you to tweak the lazy image functionality. The code snippets below provide examples of some of the filters included in the lazy images feature. You can add these code snippets to a functionality plugin or to your theme’s functions.php file.
Disabling Lazy Loading Images
Lazy loading images are set to be enabled for your entire site by default. You can use the filter lazyload_is_enabled to customize when lazy loading should be enabled. For example, if you don’t want lazy loading images on a certain page, you could hook in and disable lazy loading images for that page.
Use a Different Placeholder Image
By default, Jetpack will load a 1×1 transparent GIF, but certain implementations may call for something else. The filter lazyload_images_placeholder_image will allow you to specify your own placeholder image.
Modify the Attributes of a Lazy-Loaded Image
The jetpack_lazy_images_new_attributes filter will allow you to modify the attributes for a lazy-loaded image as the content is filtered. This is to allow for changes based on more customized and specific implementations.
Exclude Specific Images
You can instruct Lazy Loading Images to skip any image by adding the skip-lazy CSS class to an image.
You can also use jetpack_lazy_images_blocked_classes filter to set additional CSS class names that shouldn’t be lazy-loaded. For example:
function mysite_customize_lazy_images( $blocked_classes ) {
$blocked_classes[] = 'my-header-image-classname';
return $blocked_classes;
}
add_filter( 'jetpack_lazy_images_blocked_classes', 'mysite_customize_lazy_images' );Lazy Loading Images and Jetpack Boost
If you use the Jetpack Boost plugin’s Lazy Loading Image feature, turning on and off the Lazy Loading Images feature will also turn on and off the Lazy Loading Image feature in Jetpack Boost.
Lazy Loading Images and Safari
To fix issues with lazy-loaded images in the Safari browser, please update Jetpack.
Still need help?
Please contact support directly. We’re happy to advise.
Privacy Information
This feature is deactivated by default. If you ever need to activate this feature, you can toggle the Lazy load images setting in the Speed up your site section from Jetpack → Settings → Performance in your dashboard.
| Data Used | |
|---|---|
| Site Owners / Users
For activity tracking (detailed below): IP address, WordPress.com user ID, WordPress.com username, WordPress.com-connected site ID and URL, Jetpack version, user agent, visiting URL, referring URL, timestamp of event, browser language, country code. |
Site Visitors
None. |
| Activity Tracked | |
| Site Owners / Users
We track when, and by which user, the feature is activated and deactivated. |
Site Visitors
None. |
| Data Synced (Read More) | |
| Site Owners / Users
We sync a single option that identifies whether or not the feature is activated. |
Site Visitors
None. |
Jetpack 