About that new autoptimize_filter_imgopt_lazyload_from_nth filter

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:
add_filter( 'autoptimize_filter_imgopt_lazyload_from_nth', function(){ return 5; } );
Update: as from AO 2.8.2 this will also be an option on the settings page, see screenshot πŸ™‚
 

Fixed: WordPress 5.6 required Autoptimize settings change

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 πŸ™‚

Santa wrapping up Autoptimize 2.8!

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/).
  • Misc. other minor fixes, see the GitHub commit log

In case you want to give Santa a hand with all that wrapping up, you can always download the Beta version here and take it out for a spin.

LYTE: change in YouTube API caching behavior

As mentioned earlier here, Google checks YouTube API usage and can cancel a project/ API key if there are no API requests for 90 days. Based on the fact that earlier post received more hits the last week and people asking on the WordPress support forum, I went back to the drawing board code editor and added logic for LYTE’s cached YouTube API responses to expire after 2 months, causing somewhat regular requests to YouTube which should keep Google happier with the API usage.
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)

Autoptimize with support for AVIF images

You probably have heard about AVIF already, but if not; it is a new image format which is based on the AV1 video format and generally has superior compression than the better-known WebP, JPEG, PNG and GIF formats. Avif is currently supported by Chrome & Opera and can be enabled by setting the image.avif.enabled flag in Firefox.
So now you know what it is you may want to use it on your WordPress site? In that case -and the title kind of gives it away- the freshly released Autoptimize 2.7.8 now has support for AVIF if you have image optimization active. Just as for WebP Autoptimize hooks into the lazyload JavaScript to detect if your visitor’s browser supports AVIF and will switch the requests to the ShortPixel CDN to that format if so. If AVIF is not support but WebP is, the requests will be for WebP images and if those are not supported old-fashioned JPEG’s will be loaded.
So there you have it, AVIF is now available in WordPress!

Want to test AVIF images with Autoptimize’s Image Optimization?

So AVIF is a new(ish) image format that promises even better optimization then WebP and is supported in desktop Chrome & behind a preference in Firefox; go to about:config and set image.avif.enabled to true.
If you are using Autoptimize to optimize your images and you want to test AVIF images, you can use below code snippet to do so;

add_filter('autoptimize_filter_imgopt_webp_js', function(){return '<script data-noptimize="1">function c_img(a,b){src="avif"==b?"data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAABoAAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAEAAAABAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACJtZGF0EgAKCBgADsgQEAwgMgwf8AAAWAAAAACvJ+o=":"data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==";var c=new Image;c.onload=function(){var d=0<c.width&&0<c.height;a(d,b)},c.onerror=function(){a(!1,b)},c.src=src}function s_img(a,b){w=window,"avif"==b?!1==a?c_img(s_img,"webp"):w.ngImg="avif":!1==a?w.ngImg=!1:w.ngImg="webp"}c_img(s_img,"avif");document.addEventListener("lazybeforeunveil",function({target:a}){window.ngImg&&["data-src","data-srcset"].forEach(function(b){attr=a.getAttribute(b),null!==attr&&-1==attr.indexOf("/client/to_")&&a.setAttribute(b,attr.replace(/\/client\//,"/client/to_"+window.ngImg+","))})});</script>';});

Use the the code snippets plugin to add this (easy and safe) or if you’re adventurous add it to your theme’s functions.php.

Autoptimize < 2.7.7 security vulnerabilities debrief

screenshot of the arbitrary file upload fix on github. quite happy with my work thereWith Autoptimize 2.7.7 released on August the 23rd and having been pushed to all sites that were still on 2.7.0-2.7.6 by the WordPress plugins team on Aug. 30th and 31th, resulting in just under one million downloads in 8 days time, it is now the moment for a small debrief of the security issues that were fixed in this version.
2.7.7 fixed two vulnerabilities, one authenticated cross-site scripting and one arbitrary file upload.

  1. XSS:
    1. Problem: administrator users were able leave JavaScript in the exclusion-fields for CSS and JS optimization, leading that JS to be executed when the page was (re-)loaded.
    2. Risk: This could be abused by one administrator to execute JS against another administrator.
    3. Solution: This was fixed by applying esc_html (to become esc_attr in the next version as suggested by George Stephanis) to escape the JS-code and avoid it getting executed.
  2. Arbitrary File Upload:
    1. Problem: the code that processes Critical CSS settings imports did insufficient checks to ensure no malicious files were uploaded as it lacked a user capability check, did not check file extension of to uploaded file to be zip and did not check the contents of the zip-file. It did however check for a correct nonce for that specific action.
    2. Risk: this could lead to authenticated attackers uploading PHP-files that could be executed, but that risk was very much limited by the nonce-check (which all exploits I have seen happily ignore).
    3. Solution: the code has been updated to do a capability check, to make sure the file uploaded is a zip-file and most importantly to delete any unknown file found immediately after unzipping (based on an list of known-good files).

A big thank you to the two security researchers (Erin Germ for the XSS and an anonymous whitehatter for the file upload problem) who reported these vulnerabilities in a responsible manner and to the WordPress plugin team for their invaluable help in keeping our users safe.