New in AO 3.0 beta: preload images for better LCP

A couple of days ago while racing my bicycle and not really thinking much, the next idea for Autoptimize just came to move; add a field to the metabox to allow an image to be specified as “to be preloaded” to help with Largest Contentful Paint.

Well, this has now been committed to the beta-version in 3 guises; when image optimization or image lazyload is active, AO will look for the full <img tag and use that to create a responsive preload tag. If the preload does not match an <img tag or if those 2 optimizations are not active, AO will add a non-responsive preload.

But enough writing, why don’t you go off to download the Beta now and play with it yourself already? All feedback is welcome!

The AO metabox with the new LCP preload field.

16 thoughts on “New in AO 3.0 beta: preload images for better LCP”

  1. In the current version of the code, AO (when image opt. or lazyload are active, if not see below) looks for an <img tag that matches the URL of the image link provided in the preload field and will us the entire <img tag to construct the preload link (https://web.dev/preload-responsive-images/). As far as I know there is no existing logic to do something similar for <picture though.

    If image opt or lazyload are not active, AO will take the URL provided and will make a non-reponsive version of that.

    Reply
  2. Hey Frank Goossens,
    Thank you for the feature to preload critical image manually.

    I have a small question though, Instead of manually preloading the featured image why not make it automatic. This can save tons of times

    Here is the scenario, I only have less than 20 pages so for me, it is easier to do it but think about if I have more than 100 pages

    Kishorchand
    (previous wrong email address)

    Reply

Leave a Reply to Kishorchand Cancel reply

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