Implementing Lazy Load for your images improves the load times of your page, as it prevents images from loading until they are in (or near) the viewport. On an image heavy site, this can make a huge difference, but the advantages don't stop there.
The Lazy Load implementation in EWWW IO (and Easy IO) integrates with several other features to bring progressive enhancements. Compatibility information for other lazy loaders can be found below.
WordPress (browser-native) Lazy Load
Yes and yes... The lazy loader in EWWW IO already uses both JS-based and browser-native methods by default, so it will work just fine with the new feature in WP 5.5+.
But why would you use them both together? JS-based lazy loading is used to support browsers like Safari that don't have browser-native lazy loading yet. Additionally, our lazy loader allows auto-scaling of images based on the device/screen size, to make sure your visitors get right-sized images. Lastly, we added browser-native lazy loading on top of the JS-based lazy loader so that the visitor doesn't have to load ALL of your custom-sized placeholder images. Using blank placeholders the same size as your original images allows the plugin to prevent layout "jank" and feeds the auto-scaling feature with correct sizing information that you just can't get with a 1x1 placeholder image.
There are times when browser-native lazy loading can cause layout problems with certain plugins. You can use the Disable Lazy Loading plugin to suppress browser-native lazy loading. Alternatively, the browser-native feature can be disabled in EWWW IO by defining the EWWWIO_DISABLE_NATIVE_LAZY constant as true in wp-config.php:
define( 'EWWWIO_DISABLE_NATIVE_LAZY', true );
JS WebP Rewriting
This integration allows us to bring nextgen image formats to supported browsers, without the sizing issues that arise from JS-driven theme layouts. Previously, JS WebP could be prone to layout issues in themes that expected all the images to exist within the page from the beginning. The use of lazy load placeholders allows the theme to do it's calculations without waiting for the WebP images to actually load.
Additionally, the use of Lazy Load alongside JS WebP allows us to tackle more complex designs that use inline CSS background images (background-image property). This is a big win for performance, especially if your site makes extensive use of inline background images, or if you use the Cover Image block in the new WordPress block editor.
Easy IO (ExactDN)
This integration allows the lazy loader to to automatically calculate the correct dimensions of an image before it actually loads, and dynamically alter the url to generate a better-sized image if necessary. It also works with responsive image support to make sure the image selected from a srcset listing is the best possible fit for the device.
Additionally, CSS background images can be dynamically resized if they are added via inline style attributes.
This feature allows you to detect improper image scaling. In other words, if the image is too big for the page or device, this will flag the image with a lovely black and blue border. Integrated with Lazy Load, it is now able to re-check an image after it loads and replaces the placeholder image for better accuracy.
The lazy loader will enable auto-scaling for any images with srcset/responsive markup. It does this by settings the sizes attribute on an image to the exact calculated width of the img element. In some cases, this calculation may not be correct, so you can disable auto-scaling in several different ways.
The first way is by using a WordPress filter. This code can be added to your theme's functions.php (if you use a child theme), or to a custom plugin:
add_filter( 'eio_lazy_responsive', '__return_false' );
define( 'EIO_LL_AUTOSCALE', false );
define( 'EIO_LL_THRESHOLD', 2000 );
Lazy Loading is not supported on IE8 or below, but all modern browsers are supported.
Printing pages with lazy loaded images does not work by default, as scrolling is needed to load all the images. EWWW IO now includes an optional toggle to include the lazysizes print plugin if your users frequently print your pages. It can be enabled by defining the EWWW_IMAGE_OPTIMIZER_LAZY_PRINT constant as true in your wp-config.php file.
Easy IO and JS WebP Rewriting are the only features that have ANY limitations regarding lazy loading support, and to prevent bloat, we have limited our scope to support plugins that use these patterns:
- Replacing src with data-lazy-src and replacing srcset with data-lazy-srcset.
- Replacing src with data-src and replacing srcset with data-srcset. For WebP support, this pattern also requires that you add the attribute data-lazy-type="image" or add the lazyload class (since the data-src attribute could be used for other purposes than lazy loading).
These plugins are known to use the supported lazy load patterns and will work properly with all EWWW IO features:
- a3 Lazy Load
- BJ Lazy Load
- Slider Revolution
- WP Retina 2x (Perfect Images)
- WP Rocket