Exciting things are coming soon to the EWWW Image Optimizer. Version 4.7 introduces Lazy Loading support, which opens up a whole bunch of new possiblities, especially for ExactDN users.

  • First, lazy loading can yield huge improvements on image-heavy layouts. It defers the loading of images until the user is actually ready to see an image (or when it nears the view-port).
  • When combined with ExactDN, it allows us to generate Low-Quality Image Placeholders (LQIP) rather than the basic 1×1 pixel images used by other lazy-load implementations. This yields a better experience for your visitors, as they will see that an image is incoming, rather than just staring at a blank space wondering what they are missing.
  • When we load a LQIP with the exact dimensions of the expected image, we can detect if the image is too large. Then we can produce a properly-sized image instead.
  • LQIP, and image placeholders in general, help to alleviate layout issues that we experience with loading nextgen image formats, like WebP.
  • It includes support for background images, and because background images are lazy-loaded, we can load a WebP image. Additionally, the plugin can properly scale the image via ExactDN instead of sending over the full-size original. In one example, an image I had went from 4.9MB to 55kb. That may seem like an extreme example, but it is a real concern in the new WP block editor.

Get Lazy Load Now!

I’ve tested everything I can think of, but now I need your help kicking the tires. To get version 4.7 before anyone else, download it from GitHub. Then enable the Lazy Load option on the ExactDN tab. ExactDN is not currently required to use Lazy Load, they just work really well together.

If you want to test out the WebP integration as well, enable JS WebP Rewriting on the WebP tab. JS WebP works best with Lazy Load, as it avoids some layout problems with the stock WebP rewriting engine.

For bonus points, enable the Resize Detection option on the Resize tab. I rewrote this feature to work with the new lazy loader, and it will tell us how well it’s all working. You might see some of the LQIP images (if you even see the LQIP) flagged with a blue border. However, the blue border should disappear as soon as the actual image load in. If not, I want to know, so we can reach a goal of 100% image-scaling perfection!

Hold on though! If you don’t have ExactDN yet, this is the best time to get on board and make your site faster. If you already have ExactDN, I have exciting news for you. You can activate it on your development/staging site and get the new rate of $2/month. You wouldn’t test this out in production, would you?

A quick teaser (note the total page size)

If you couldn’t tell, I am super excited about this new release. Lazy loading represents a huge jump in what we can do to make websites fast, no matter what device your visitors have. Or what horrible connections they might have. Don’t make them run screaming, keep them coming back for more!

Shane Bishop