if “Load WebP or AVIF in supported browsers?” is on, .png files with transparency will loose that transparency in browsers that support AVIF due to a recent technical change in Shortpixel’s AVIF toolchain.
Shortpixel is looking at alternative solutions, but until then as a workaround you can either:
add .png to Autoptimize’s lazyload exclusion field
or to use below code snippet to disable AVIF images;
So in the ever-continuing saga of learning, testing and fine-tuning your site’s settings to get the ultimate in performance you might have enjoyed the new Autoptimize filter/ setting not to lazyload the first N images to keep the impact of lazyloading on Largest Contentfull Paint down?
Well, now you can take things a step further with below code snippet, which tells Autoptimize not to lazyload the logo and the featured image (hat tip to Gijo Varghese of Flying Press for the idea).
Some people asked for documentation/ information on that new autoptimize_filter_imgopt_lazyload_from_nth filter which allows one to tell AO not to optimize the first X images found in the HTML, so here is an example code snippet that sees AO not lazyload the first 5 images:
PSA: WordPress 5.6 changes the filename of jQuery core. If you’re using Autoptimize and you have jQuery excluded (which is default) you will want to update your JS optimization exclusion list from js/jquery/jquery.js to js/jquery/jquery.min.js.
Update: Autoptimize 2.8 will automagically fix this, urgently looking for some testers to download https://github.com/futtta/autoptimize/archive/beta.zip (make sure 2.7.8 is disabled when enabling the beta). If all goes well and I get some confirmation the update (which has a lot more then just the fix) will go out today!
Update2: AO28 was released, all is (or should be) OK now :)
I’m sure you have been good this year so Santa cannot but put a nice ribbon around the next version of Autoptimize, out later this month. These are the most important changes:
JavaScript: new option “defer but don’t aggregate” which *might* help with “total blocking time”
Images: add field to list images to be excluded from image optimization
Critical CSS: major improvements of the job processing mechanism, reducing time spent from up to 1 minute to just a couple of seconds.
Critical CSS: under “advanced options” replace “request limit” with “queue processing time limit” (default 30s).
Extra | Google Fonts: better parsing of version 2 Google Font URL’s (/css2/).
Obviously if you have page caching (which you should) this can have an impact as well, as a cached page will not result in LYTE “seeing” the request, so the cached YouTube data would not get refreshed even if older then 2 months. Then again having such aggressive page caching would likely cause other issues (nonces in forms becoming invalid and such), so I *think* the one month margin (results cached for 2 months whereas Google wants activity in 90 days) should suffice.
For those who don’t like the cache to expiry of if you want more or less then 2 months; I added 2 filters allowing you to tweak with a bit of code. Returning false to lyte_ytapi_check_cache will make LYTE function as before (no cache expiry) and the cache expiry threshold can be changed using the lyte_ytapi_cache_gracetime filter.
And like blogposts concerning LYTE, here’s a video to show it action: Yves Tumor with “Gospel for a New Century”. Weird stuff I admit (you have been warned), but good weird really …
Yves Tumor - Gospel For A New Century (Official Video)