Autoptimize 2.5 beta: image lazy loading

2018 is end of life and 2019 will be released soon. Autoptimize 2.5 is not at that point yet, but I just pushed a version to GitHub which adds image lazy loading to Autoptimize;

The actual lazy-loading is implemented by the integrated lazysizes JS lazy loader which has a lot of options some of which I will experiment with and bring to Autoptimize to the default improve user experience.

If you want you can download the beta (2.5.0-beta2) now from Github (disable 2.4.4 before activating the beta) and start using the new functionality immediately. And if you have feedback; shoot, I’ll be happy to take your remarks with me to bring AO 2.5 ready for release (I’m targeting March, but we’ll see).

Enjoy the celebrations and have a great 2019!

9 thoughts on “Autoptimize 2.5 beta: image lazy loading

    1. frank Post author

      The current implementation is just basic lazy-load, so no images are shown, but some sort of fall-back will be added before the official release (mainly to ensure social media page scrapers see images) :-)

      Reply
  1. faur alin

    The placeholder should have the same color as the background, right now it’s too obvious, especially if you have 2 overlapped images, or a gradient with fading transparency at the edges (completely transparent at the edges) so you don’t see some ugly grey clunky rectangles.
    People want to use this only to boost pagespeed insight score, but if it looks bad…they will not use it

    Also it would be nice an option to select the pages where the lazy load would work, example: blog post pages

    Reply
    1. frank Post author

      thanks for the feedback faur alin. the placeholder is just a quick intermediate solution, keep an eye on beta updates to see how it evolves.

      selecting pages where lazy load works will unlikely be an option in the GUI, but I might add a filter there which one could hook into.

      Reply
    2. frank Post author

      Update: the current version on github has a field to exclude images from being lazyloaded, which work for e.g. img class or img filename. the placeholder is now indeed transparent (but when lazyload is combined with image optimization the placeholder will be different).

      Reply
  2. Laurence Norah

    I already use lazysizes, so it will be nice to have this integrated into this plugin and save me another plugin :)

    Question, if I already use lazysizes, I assume using this feature will just do the same so I can continue to use the lazysizes api to adjust settings? It’s quite a powerful script with a number of features for configuration :)

    In addition, lazysizes has some handy extra features in the form of plugins. The two most useful I use are the unveilhooks, which adds support for lazyloading other elements, and aspectratio, which helps to avoid content jumping when images are loaded. It would be nice to have the option to enable these too.

    I actually use this plugin for lazysizes, so you can see the config options as an idea:
    https://wordpress.org/plugins/lazy-loading-responsive-images/

    Reply
    1. frank Post author

      Very interesting, thanks Laurence. Regarding configuration; I will not add (a lot of) options, but there (obviously) will be filters to tweak/ improve/ overrule default behavior.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.