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!
What about images of different formats inserted by tag?
I have jpg and avif on my site, but in the past I had also webp. What then? 🙂
I meant (picture) tag, but html was removed the comment 🙂
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.
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)
But are you sure the featured image is indeed always the LCP element? 🙂
Not always Frank but you can allow users to choose whether to preload all the featured image automatically or not. (I mean adding an option would be amazing)
Do you mind cleaning up preload tag in the next update, the code is gigantic please see the screen share https://prnt.sc/g0MtyOu4Y7PO also more in-depth
view-source:https://foxscribbler.com/remove-unused-css-in-wordpress/
It seems like when I preload my featured image it also preloads all the below-the-fold/ non-critical images too.
Thank you
added cleanup in the Beta, can you download from https://github.com/futtta/autoptimize/archive/refs/heads/beta.zip and install instead of your current version and test Kishorchand? Thanks!
apart from the noscript tags not a lot to clean up there really (maybe data-nolazy and fetchpriority)?
I have tested the beta version on my real site and cleaned up the NoScript tag but the main problem is that it keeps on preloading all the non-critical images too.
-> https://foxscribbler.com/pass-the-core-web-vitals/ (please view the website source code to learn more and this is the only page on which the featured image is currently preloading)
//This is not a critical image that can be safely removed without causing any issue
// Please remove the width and height attributes from preload tag.
//You can ignore fetchpriority and data-lazy (WP Rocket lazy-loading free version)
Thank you
OK, the noscript disappearance is good, that’s a start 🙂
Now re. the fact you have that many preloads; I saw that as well but thought you had configured it that way. What exactly did you add in the Autoptimize metabox “LCP Image to preload” field?
I have been testing some more and found another bug where the preload contained the lazyload image placeholder (svg) instead of the actual image, I just pushed a fix for that to AO Beta.
What I have not been able to reproduce however is seeing images preloaded which I did not add in the Autoptimize metabox. I also reviewed the relevant code in autoptimizeImages.php and I don’t see how this could happen :-/
No, I added the featured image, see the screenshot below
Metabox: https://prnt.sc/0OwvUMRBRwMJ
Autoptimize image settings: https://prnt.sc/lTX5zUYWf3CV
Code to replace Shortpixel to subdomain: https://prnt.sc/plFWzmkszh3m
Please send me DM on Facebook (https://www.facebook.com/kishorchandth), and I will create a staging site where you can see
Thanks again.
I’ll get in touch later on FB, but given I can’t reproduce at all, this is likely a conflict somewhere. can you try disabling that shortpixel-subdomain change and if need be other plugins to try to pin this down?
I already remove the shortpixel-subdomain and tested it and have the same issue.
I pinged you on Facebook (will be in message requests)
Hey Frank, thank you for your amazing plugin. Both optimization and lazy loading are active. I’m unsure if I should add my feature image link in the meta for manual preloading. What do you suggest?
I would only add an image there if that image is not easily detectable by browsers. Case in point; if your hero image is a CSS background image, then you adding it there would make sense. If you hero image is in a normal tag, it will be "seen" by the browser and so forcefully preloading it will likely have no positive impact.