Due to a recent major change in Contact Form 7’s frontend JavaScript Autoptimize users might have to add wp-includes/js/dist the comma-separated JS optimization exclusion list.
It is nice CF7 gets rid of the jQuery dependancy, but I’m not sure is replacing that with a significant amount of extra WordPress blocks JS-files was such a good idea?
Up until now Autoptimize, when performing image optimization, relies on JS-based lazyloading (with the great lazysizes component) to differentiate between browser that support different image formats (AVIF, WebP and JPEG as fallback).
As JS-based Lazyload is going out of fashion though (with native lazyload being supported by more browsers and WordPress having out-of-the-box support for it too), it is time to start working on 
For now that functionality is in a separate “power-up”, available on Github. If you have Image Optimization active in Autoptimize (and you are on the Beta version, Autoptimize 2.8.1 is missing a filter which the power-up needs so download & install the Beta if not done yet), you can download the plugin Github and give it a go. All feedback is welcome!
Elementor 3.1 came with “refactored YouTube source to use YouTube API in Video widget” which resulted in WP YouTube Lyte not being able to lyten up the YouTubes any more. Below code snippet (consider it beta) hooks into Elementor to fix this regression;
add_filter( 'elementor/frontend/widget/should_render', function( $should_render, $elementor_element ) {
if ( function_exists( 'lyte_preparse' ) && 'Elementor\Widget_Video' === get_class( $elementor_element ) ) {
$pas = get_private_property( $elementor_element , 'parsed_active_settings');
if ( ! empty( $pas['youtube_url'] ) ) {
echo lyte_preparse( $pas['youtube_url'] );
return false;
}
}
return $should_render;
}, 10, 2 );
// from https://www.lambda-out-loud.com/posts/accessing-private-properties-php/
function get_private_property( object $object, string $property ) {
$array = (array) $object;
$propertyLength = strlen( $property );
foreach ( $array as $key => $value ) {
if ( substr( $key, -$propertyLength ) === $property ) {
return $value;
}
}
}
Hat tip to Koen for his assistance in digging into Elementor, much appreciated!
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:
.png to Autoptimize’s lazyload exclusion fieldadd_filter( 'autoptimize_filter_imgopt_do_avif', '__return_false');
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).
add_filter('autoptimize_filter_imgopt_lazyload_exclude_array', function( $lazy_excl ){
// site logo.
$custom_logo_id = get_theme_mod( 'custom_logo' );
$image = wp_get_attachment_image_src( $custom_logo_id , 'full' );
$logo = $image[0];
if ( ! empty( $logo ) ) {
$lazy_excl[] = $logo;
}
// featured image.
if ( is_single() || is_page() ) {
$featured_img = get_the_post_thumbnail_url();
if ( ! empty( $featured_img ) ) {
$lazy_excl[] = $featured_img;
}
}
return $lazy_excl;
});
This might end up in a future version of Autoptimize, maybe even preloading those 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 :)
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 :)