Spectra 2.12 performance regression (update: due to AI assistant)

So I like and use (aka “ultimate addons for gutenberg”) on some of my WordPress sites.

If you use Spectra as well, you might want to be know that Spectra 2.12 has a significant performance regression, sucking in almost all of wp-includes/js/dist.

Here’s hoping this was not intentional and that it’ll get fixed soon 🙂

More info in https://wordpress.org/support/topic/2-12-significant-performance-regression/

Update Feb. 15th: the regression is due to the new AI features, as a workaround go to Spectra -> AI features -> Manage AI features and disable “AI Assitant” (and “AI Copilot” if you don’t need/ want that either).

AOPro 2.3: delay all JavaScript

As of Autoptimize Pro 2.3 there is an option to delay all JavaScript. Delaying can have a bigger positive performance impact then asyncing or deferring because AOPro will only load the delayed JS after a to be defined delay or (better even) only at the moment user interaction (such as swiping/ scrolling or mouse movement) is noticed.

Obviously when delaying all JS you might want to be able to exclude and that is possible as well; you might want add data-cfasync there for example as contrary to Autoptimize’s normal behavior for deferring, delaying ignores attributes like data-cfasync, meaning that if you want to leave such JS untouched you will have to add it to the exclusion list yourself.

Lastly; if your site’s above the content depends on JavaScript to render correctly (which has serious performance impacts), delaying all JS would result in the page not rendered entirely, so test and exclude as required.

AOPro 2.2: delaying iframes (and other improvements)

I released AOPro 2.2 today and the main new feature is the ability to delay the loading/ rendering of iFrames. Despite the fact iFrames can be lazy-loaded (using browser-native loading=lazy attribute), in reality this does not always work in WordPress, hence the new “delay iFrames” option on the Pro Boosters tab.

  • How it works: a delayed iFrame has no src but a data-src attribute. Upon user interaction (or a timeout as also specified on the Boosters settings) the src will be set. If the iFrame is a YouTube, Vimeo or Dailymotion video, AOPro will load the video thumbnail as a placeholder.
  • How you can activate it: by default no iframe is delayed, if you want to have e.g. YouTube video’s delayed add youtube.com to the “delay iFrames” option.
  • What’s next: this is a “minimal viable product”, but depending on user feedback I might incorporate some of WP YouTube Lyte’s functionality for video iFrames. Tell me what you think in the comments!

Apart from delaying iFrames, AOPro 2.2 also has;

  • new under the hood logic to improve the speed at which Critical CSS rules are generated and visible
  • if you are “removing CSS/ JS” then the logic change this at a per page/ post level has changed; if you want one page NOT to remove CSS/ JS, just enter none in the “Autoptimize this page” metabox. If you leave the field empty the default “removals” apply. If you put something else in there then that overrides the default removals.
  • The ShortPixel Adaptive Images JavaScript component was updated to version 1.1.

HTTP/2; do not aggregate? Well, maybe …

Ever since the advent of HTTP/2 people asked if they still needed JS/ CSS files to be combined and indeed by default aggregation is off in Autoptimize. But based on this interesting article by Harry Roberts, “bundling is here to stay for a while”. So when in doubt; test performance with and without aggregating CSS/ JS ideally both on mobile and desktop bandwidth profiles and learn which works best for your site! 🙂

When lazyloading iframes does (not) work (automatically)

WordPress has made some good progress to speed up site rendering the last couple of years and part of this is thanks to images and iframes having the “loading” attribute with value “lazy”, telling browsers these can be loaded later allowing other (more important) assets to take priority. Especially iframes can consume a lot of bandwidth (think embedded Google Maps or one or more YouTube videos), so the performance impact of lazyloading those can be very significant.

Unfortunately one cannot always rely on WordPress core to automatically make sure there is no performance penalty from stuffing your site with iframes. Here is a non-exhaustive list of when iframes will still delay your site:

  1. WordPress core does not always add the loading="lazy" attribute;
    1. if loading="eager" is set (which means load asap)
    2. if no width & height are set (as lazyloading iframes without those could cause layout shifts)
  2. Firefox (and some less important browsers) does not support lazyloading iframes even if loading="lazy" is set
  3. iframes in or near the “above the fold” part of a page are loaded immediately, even if loading="lazy" is set

Conclusion; show restraint when adding iframes; adding an image of Google Maps which links to (a separate page with) Google Maps is almost always as informative and the performance benefit of using an image instead of an GMaps iframe is huge. And when using iframes then consider using alternative solutions to avoid the performance impact (for YouTube you might want to give WP YouTube Lyte a try).

Want to know some Autoptimize secrets?

There’s a first for everything and so last week I did a presentation at a WordPress Meetup in Antwerp titled “Autoptimize: 5 secrets and an intermezzo” which at least I had fun with.

You can find a PDF export of the presentation here.

Questions go below, in the comments (or in the form on the contact page).

Mastodon oEmbed requests overload; use WP Rest Cache

Mastodon due to the decentralized nature can result in a significant extra load on your site if someone posts a link to it. Every Mastodon instance where the post is seen (which can be 1 but also 100 or 1000 or …) will request not only the page and sub-sequentially the oEmbed json object to be able to show a preview in Mastodon. The page requests should not an issue as you surely have page caching, but the oEmbed object lives behind /wp-json/ and as such is not cached by page caches. The solution; the WP Rest Cache plugin and one small code snippet (for now). A lot more info can be found in Donncha’s excellent post on the subject.

Autoptimize Pro released, secret discount code here ;-)

Autoptimize ProSo Autoptimize Pro has finally been released, somewhat secretively (I like flying under the radar).

All info about features can be found on https://autoptimize.com/pro/ including a 20% early birds discount code, but if you use my internet nickname/ handle of whatever you want to call it (it’s part of the domain of this blog and has 3 t’s in it 😉) as coupon code between now and November 16th, you’ll get an even bigger discount!

Be quick, your website will be too 😉

Autoptimize Pro is coming, 10 beta-testers needed!

It has been long overdue, but I’m finally almost ready to release Autoptimize Pro. The first version of AO Pro (an add-on to be installed on top off Autoptimize) will have Image optimization, CDN, fully automated critical CSS and a number of “boosters” to improve performance even more, with more features are in the backlog.

autoptimize pro boosters screenshot

If you’re interested in beta-testing fill out the form below and based on data submitted I’ll pick 10 beta-testers. As a beta-tester you’ll be able to use AO Pro free of charge until the end of the year.

Beta-testing is being finalized, I am currently not looking for additional testers.

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!