Lazy Load

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

As of WP 5.5, native browser-based lazy load is enabled for all images, which is a great boost for image-heavy sites. But will it work with EWWW IO's lazy loading? Should you even use a JS-based (JavaScript) lazy loader when you have browser-native lazy loading?

Yes and yes... The lazy loader in EWWW IO was built to work alongside native lazy loading, but by default native lazy loading will be disabled to prevent problems with plugins/themes that don't support native lazy load.

So, can you still use them both together? EWWW IO uses blank placeholders the same size as your original images which 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. If you would like to lazy load those placeholders, define the EIO_ENABLE_NATIVE_LAZY constant as true in wp-config.php:

define( 'EIO_ENABLE_NATIVE_LAZY', true );

Please be sure to test your site after enabling native lazy load, especially looking for images that are not the right size.

CSS Background Images

There are three ways to apply CSS background images, inline (directly on an element), internal (embedded in the HTML, but in a separate style element), and external style sheets. The lazy loader will handle inline CSS background images automatically for "div", "span", "li" (list items), "section", and "a" (link) elements, and more can be added via the eio_allowed_background_image_elements filter (custom code).

For background images defined in separate internal style elements or external style sheets, the lazy loader will scan that same list of elements for any id/class value matching what you have entered in the External Background Images setting. If you need assistance finding the correct id/class to enter in this setting, contact support and we'll be glad to help you.

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.

Resize Detection

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.

Auto-Scale

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' );

The second method is an override that can be added to functions.php, or in your wp-config.php file:

define( 'EIO_LL_AUTOSCALE', false );

There is one last method that can be used on individual images, which is to add the class 'skip-autoscale' or the attribute 'data-skip-autoscale'.

Lazy Loading and LCP (Largest Contentful Paint) Images

You may get recommendations from Pagespeed Insights or elsewhere that tell you not to lazy load LCP images or to preload LCP images. This can make those images load more quickly for your visitors, but there are a couple things to watch out for with LCP images—or any images that are "above the fold".

First, disabling lazy load for an image disables auto-scaling. This can result in oversized images being delivered to visitors, especially on mobile devices. Naturally, an oversized image works against us when we are trying to make the site faster. If you can downscale an LCP image manually, and/or ensure it has appropriate srcset markup, then you can safely preload these images and exclude them from lazy loading.

Secondly, the EWWW IO lazy loader (by default) uses "right-sized" inline image placeholders to avoid layout shifts. This ensures the page layout can be calculated as quickly as possible, without waiting for large images to load. If you exclude LCP or above the fold images from lazy loading, they might introduce additional layout shifts, which is not great for user experience. Ensuring "critical CSS" is included in your page can help with this, but if you have any JS-driven layouts/CSS you may still encounter layout shifts.

Viewport Threshold

Also known as the "root margin", this controls how eager the lazy loader is in pre-loading images. By default, the lazy loader uses a larger threshold than Firefox, but about half that of Chrome. It can be configured via EIO_LL_THRESHOLD in your child theme's functions.php, or in your wp-config.php file:

define( 'EIO_LL_THRESHOLD', 2000 );

Exclude Images

To exclude images from lazy loading, you may use the "data-skip-lazy" attribute or add the "skip-lazy" class to an img element. Additional exclusions may be added in the settings, or defined via EWWW_IMAGE_OPTIMIZER_LL_EXCLUDE, similar to EXACTDN_EXCLUDE.

The lazy loader may cause issues with some iframes, which are often used for embedding videos, and you can exclude those similarly, or just put "iframe" in the exclusions to disable lazy loading on all iframes.

You might see recommendations to NOT lazy load images that are "above the fold". In plain English, that means don't load images that should be immediately visible on the page. To exclude a certain number of images that should be treated as "above the fold", you can use this override:

define( 'EIO_LAZY_FOLD', 3 );

*Note that this will exclude those images from Auto-scaling as well. And the Pagespeed Insights wording is still incorrect as of 2021/10/14...

Additional Notes

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.

By default, the lazysizes.min.js script will be loaded in the footer of your page, but if this causes any conflicts with other JS, you can try loading it in the header so that it runs sooner:

define( 'EIO_LL_FOOTER', false );

3rd-party Compatibility

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
Jetpack
Slider Revolution
WP Retina 2x (Perfect Images)
WP Rocket