Autoptimize & WordPress 5.9 issue with aggregated inline CSS

WordPress 5.9 comes with a change I had not noticed before; it is adding inline CSS with random-ish names, which when “also aggregate inline CSS” is active makes the AO cache grow incredibly fast.

As a workaround you can add .wp-container- to the CSS optimization exclusions. I have just pushed out Autoptimize 2.9.5.1 which automatically excludes inline CSS with that string.

Fixing “Edit with Elementor” and Autoptimize

A regularly reported issue for Autoptimize + Elementor users is that JavaScript optimization breaks the “Edit with Elementor” button in the front-end admin bar. The easiest workaround is to disable the “also optimize for logged in administrators/ editors” option, but below code snippet is more surgical as it will only disable JS optimization, leaving e.g. CSS & Image, which do not impact “Edit with Elementor”, active;

if ( defined( 'ELEMENTOR_VERSION' ) && is_user_logged_in() && current_user_can( 'edit_posts' ) ) {
    add_filter( 'autoptimize_filter_js_noptimize', '__return_true' );
}

When in doubt, you can use the code snippets plugin to safely add this.

Of bugs and workarounds vs. root cause

My father, a retired mechanical engineer and a who’s technical skills, knowledge and passion are a big inspiration for me, always told his colleagues never to quick-fix the problem, but to look for the root cause instead.

Photo by Luis Villasmil on Unsplash

This obviously is true for software as well and remembering this good advice while walking the dogs yesterday evening stopped me from committing a finished workaround for a small bug (notices in the PHP error-log) and got me frantically error-logging left and right to try to identify the root of the problem this morning.

That root cause, as it turned out, was just a misplaced closing round bracket resulting in a combined conditional not executing correctly (I admit something silly like that should have been spotted during testing). Once identified, the fix was easily applied, improving the code and preventing extra workaround code from making things more complex.

So again: thanks dad!

Autoptimize 2.9 “Fountainbel” just released

Autoptimize 2.9 was released earlier today. It features:

  • New: per page/ post Autoptimize settings so one can disable specific optimizations (needs to be enabled on the main settings page under “Misc Options”).
  • New: “defer inline JS” as sub-option of “do not aggregate but defer” allowing to defer (almost) all JS
  • Improvement: Image optimization now automatically switches between AVIF & WebP & Jpeg even if lazyload is not active (AVIF has to be explicitly enabled).
  • Improvement: re-ordering of “JavaScript optimization” settings
  • Misc. other minor fixes, see the GitHub commit log

This release coincides with my father’s 76th birthday, who continues to be a big inspiration to me. He’s a mechanical engineer who after retirement focused his technical insights, experience and never-ending inquisitiveness on fountain pen design and prototyping, inventing a new bulkfiller mechanism in the process. Search the web for Fountainbel to find out more about him (or read this older blogpost I wrote in Dutch). Love you pops!

Autoptimize 2.9 release: Tuesday 27th?

Quick public service announcement; Autoptimize 2.9 is almost ready to be released but given the planned release of WordPress 5.8 (July 20th) and the risk of support requests mixing up WordPress core update related issues with the Autoptimize update related issues, Autoptimize 2.9 will probably be released one week after WordPress 5.8, so on or around Tuesday 27th.
If you’re eager to use 2.9 (with better image optimization, improved JS optimization and per page/ post Autoptimize settings) you can off course download the beta here immediately.

Autoptimize 2.9 final beta, testers wanted!

I just upped Autoptimize 2.9 beta to version 4, which is likely to be the last version before the official 2.9 release (eta end June/ early July).
Main new features;

You can download the beta from Github (do disable 2.8.x before activating 2.9-beta-4) and you can log any issues/ bugs over at https://github.com/futtta/autoptimize/issues
Looking forward to your feedback!

Another Autoptimize 2.9 sneak preview: defer inline (and all) JS

JavaScript often has to be excluded from being aggregated due to inline JS depending on it. That’s why Autoptimize 2.9 will also have to option to defer inline JS, allowing all JS to be deferred, even that pesky jQuery. As seen in below screenshot exclusions obviously will be honored for both inline and linked JS so you will be able to tweak everything just right.

The settings for JavaScript optimization also have been reshuffled, making “also aggregate inline JS”, “force JS in head” and “try/catch wrapping” sub-options of “Aggregate JS” (so hidden on the screenshot as “aggregate JS” is off), whereas “Defer inline JS” is a sub-option of “Don’t aggregate but defer”.
So we have per post/ page AO settings and we now have “also defer inline JS” for what will become 2.9. And there’s more to come …

Autoptimize enhancement: feedback wanted

screenshot of the page/ post autoptimization settingsI’m in the process of adding a per page/ post option to disable Autoptimization.
In the current state of this work in process one can disable Autoptimize entirely on a post/ page or disable just JS optimization as you can see on the screenshot.
Now my question to you, Autoptimize user, is; what other options of below list _have_ to go in that metabox taking into account the list should be between 3 and 5 items long?

  • CSS optimization (which includes Critical CSS)
  • Critical CSS usage/ Inline & defer CSS
  • HTML optimization
  • Image optimization
  • Image Lazyload
  • Google Font optimization
  • Preload (from “extra” tab)
  • Preconnect (from “extra” tab)
  • Async (from “extra” tab)