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).

About to see Wilco live …

Wilco is in town tonight, playing the “Lokerse Feesten” ; an open air 9 day festival here, a mere 5 minutes bicycle ride from home.

I’m not counting on it, but it would be great if I could see, hear and feel “Impossible Germany” live …

Update the day after; they did play Impossible Germany, as always impressed by Cline’s (improvised) solo.

Wilco - Impossible Germany (Live at de Lokerse Feesten, August 2023)

 

Autoptimize Pro: page caching (finally) in beta

I just released Autoptimize Pro 2.0 as beta and now AO(Pro) finally includes page caching. If you’re on Cloudflare (APO), if your host offers page caching at server level (nginx/ varnish or similar) or if you already have a page caching plugin then you don’t need page caching in AOPro, but based on discussions with current customers page caching is still an important missing piece on a lot of WordPress sites, so for those page caching in AOPro will be a big help to get better performance.

If you’re on AOPro already you can switch to the beta-channel yourself (Settings -> Autoptimize Pro -> Account) or you can ask me to enroll you in the Beta. If you’re not using AOPro yet maybe this is the moment to give it a go? You can use the nowwithpagecache coupon code to get a 15% discount 🙂

As found on Our Tube; Edward November – Cold Street Light

So I heard Edward November on the (online) radio a couple of times already and the first and only single “Cold Street Light” is magic.

He (aka Edmund Lauret) should either stop making music entirely or (a lot more difficult) he could try to do even better.

The latter will be very hard though, because “Cold Street Light” is a perfectly unhappy pop-song, beautifully moody, slightly quirky and somewhat unpredictable but with an immensely catchy (downbeat) chorus.

Edmund November - Cold Street Light

Eurovision 2023; my winner is … Blanca Paloma

About #Eurovision; Loved Croatia, Finland and I’m happy my fellow-Belgian #Gustaph did (very) well. But my favorite by far this year was Spains #BlancaPaloma

Flamenco-ish, intense, great voice, beautiful act, uncompromising electro-track that completely avoids the standard 4 to the floor beat that is way to present in Liverpool.

So much to like & discover, I’ve got it on repeat!

Blanca Paloma - Eaea (LIVE) | Spain 🇪🇸 | Grand Final | Eurovision 2023

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).