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!

35 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) :-)

      1. Kim Steinhaug

        I’m guessing the other one came as wordpress plugin while the one you chose – looks like a super duper choice with tons of comits and many devlopers – is for manual install and basically means that people using the wordpress plugin must scrap it and convert to the lazysizes belief system.

        I’m guessing they didn’t look at the github page for lazysizes, as it clearly is the right choice. Unless that is – the other one is made by some geniouses doing few and large commits silently and below the radar :D

        Experimenting with your latest plugin 2.5 right now, great work!

  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

    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.

    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).

  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:

    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.

  3. T4ng

    Hi Franck,

    Good to see Autoptimize implements lazyloading. Any idea about when you should be able to release it?


  4. Eric

    Is WebP image support for shortpixel going to be included in this release? This is one thing that I’m waiting for. If not, do you see any reason against using Shortpixels AI plugin instead of selecting the CDN option?

      1. Eric

        Awesome can’t wait! Do you see any reason to not use Shortpixel AI plugin in the meantime or will it conflict in some way?

        On a side note, I just installed A3 lazy load but ultimately will use your lazy load option. I do have one requirement from our Ad provider and that’s to bypass any iframe content. So, if you plan to add lazy loading iframes (similar to A3) please allow us to disable that :)

        Thanks so much and looking forward to this release.

  5. David

    Hey Frank.
    It would sure be great if your Lazy load functionality would cover Divi background images.
    I think there are a lot of us out there (Divi users). If you would consider doing this, I believe you would be the one and only product out there that is a full featured lazy-load solution for Divi.
    It’s probably a big ask…I might be sending you back to the drawing board.
    Either way, i appreciate all your good work.

    1. frank Post author

      background images (not Divi specific) are on my list of wanna-haves, but still have to crack that one David (and I don’t know how to, yet) :-)

      1. David

        You have my full confidence. :-)
        If it helps, i am currently using these two plugins together (stable so far): “Lazy Load by WP Rocket” and “Lazy Load Divi Section Backgrounds” along with ao.
        I am very happy with my site speed (at least the above the fold load time), but i know it could improve a little more if i could get all of my key optimizations into one plugin.

      1. Samuel

        Me too, seems like the images used in revolution slider doesn’t shows when this option is enabled

        I have also a “lazy loading smart mode” option enabled in my used revolution slider which has the issue (not sure if related but stills important info :))

      2. Elive Linux

        Since Revolution Slider has its own way to manage Lazy Load and configured independently and fine-grained for each slider, could be better to make AO directly skip them by default ?

      3. Elive Linux

        Looking at the slider which gave me problems (top slider in ), I can see this:

        What about skip things that “already” includes data-lazyload entries ? (I don’t know what is exactly but looks like its a lazy load configuration already set)

      4. Elive Linux

        My previous post stripped the html piece, let’s try again:

        img src=”” alt=”” data-ww=”300px” data-hh=”300px” width=”300″ height=”300″ data-lazyload=”” data-no-retina=”” style=”width: 246px; height: 246px; transition: none 0s ease 0s; text-align: inherit; line-height: 0px; border-width: 0px; margin: 0px; padding: 0px; letter-spacing: 0px; font-weight: 400; font-size: 11px;”

      5. frank Post author

        can you try adding data-lazyload to the lazyload exclusion-list? if that works (it should) I might add this to the list of default exclusions.

  6. Paul Hugel

    How do I preload local fonts residing on my server?

    Be not evil Pagespeed says

    Preload key requests 0.31 s
    Consider using to prioritize fetching resources that are currently requested later in page load

    its talking about font-awesome.ttf

    I see how to preload external resources but not local resources.

    autoptimize 2.5 beta

  7. Pingback: How To Lazy Load Images + Videos In WordPress (the easy way)

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.