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”

    • 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) 🙂

      • 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 😀
        Experimenting with your latest plugin 2.5 right now, great work!

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

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

    • 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. 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:

    • 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. 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?

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

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

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

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


Leave a Comment

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