Category Archives: wordpress

Developers: don’t make Gutenberg go Badass-enberg on my frontend!

Leave a reply

Over the past couple of months, since the release of WordPress 5.0 which includes Gutenberg, the new JavaScript-based block editor, I have seen many sites loading a significant amount of extra JavaScript from wp-includes/js/dist on the frontend due to plugins doing it wrong.

So dear plugin-developer-friends; when adding Gutenberg blocks please differentiate between editor access and visitor access, only enqueue JS/ CSS if needed to display your blocks and when registering for front-end please please frigging please don’t declare wp-blocks, wp-element, … and all of those other editor goodies as dependencies unless your 100% sure this is needed (which will almost never be the case).

The performance optimization crowd will thank you for being considerate and -more likely- will curse you if you are not!

Autoptimize 2.5 almost ready, last call for testers!

5 Replies

Autoptimize 2.5 is almost ready! It features a new “Images”-tab to house all Image optimization options, including support for lazy-loading images and WebP (the only next-gen image format that really matters, no?);

So download the beta and test lazy-loading and WebP (and all of the other changes) and let me know of any issue you might find!

WP YouTube Lyte: 20K active installs and a new release

2 Replies

It took a lot of time for WP YouTube Lyte to get there, but we finally got to 20 000 active installs, and to celebrate that occasion I release a long overdue update (1.7.6), with the following improvements;

  • extra parameters for shortcode (start, showinfo, stepsize and hqthumb).
  • also turn youtube-nocookie.com iframes into LYTE’s as proposed by Maxim.
  • also remove cached thumbnails when clearing cache.
  • also set image in noscript tag to local hosted thumbnail if that option is active.

And in case you’re wonder, this how a LYTE video looks like;

Thom Yorke – Unmade (Live from Electric Lady Studios)

Watch this video on YouTube.

(Thom Yorke, Unmade from his Susperia soundtrack, live. I have been looking for something more upbeat in my YouTube favorites playlist, but this ultimately is what I want to share now. Sorry if.)

Warning: bug in W3 Total Cache impacts Autoptimize

7 Replies

Update 4th Feb: the HTML minify bug was fixed in W3TC v. 0.9.7.2, released a couple of days ago.

Update 19th Feb: I’m still seeing issues caused by W3TC, seems like not all is fixed fully yet.

Quick heads-up for users that have both W3 Total Cache and Autoptimize installed; the latest W3TC update (version 0.9.7.1) introduces a nasty bug in the HTML minifier which also impacts Autoptimize as that uses the same minifier class (Minify_HTML, part of Mr. Clay’s Minify). When W3TC is running the Minify_HTML class is loaded by and from W3TC, meaning AO’s autoload does not have to load the Minify_HTML from AO proper (which does not have that problem).

The bug sees some characters, esp. quotes disappear from the HTML leading to all sorts of .. weirdness from Pinterest icons not showing over mis-aligned titles in RevSlider to broken custom share buttons and more.

If you’re impacted by the bug, you can do one of the following;

  • disable HTML optimization in Autoptimize (and W3TC)
  • OR temporarily disable W3TC (or switch to another page cache plugins)
  • OR download and install the previous version of W3TC (0.9.7)

Fingers crossed they’ll release an update soon!

Autoptimize 2.5 beta: image lazy loading

25 Replies

2018 is end of life and 2019 will be released soon. Autoptimize 2.5 is not at that point yet, but I just pushed a version to GitHub which adds image lazy loading to Autoptimize;

The actual lazy-loading is implemented by the integrated lazysizes JS lazy loader which has a lot of options some of which I will experiment with and bring to Autoptimize to the default improve user experience.

If you want you can download the beta (2.5.0-beta2) now from Github (disable 2.4.4 before activating the beta) and start using the new functionality immediately. And if you have feedback; shoot, I’ll be happy to take your remarks with me to bring AO 2.5 ready for release (I’m targeting March, but we’ll see).

Enjoy the celebrations and have a great 2019!

How to fix render-blocking jquery.js in Autoptimize

15 Replies

Autoptimize by default excludes inline JS and jquery.js from optimization. Inline JS is excluded because it is a typical cache-buster (due to changing variables in it) and as inline JS often requires jQuery being available as a consequence that needs to be excluded as well. The result of this “safe default” however is that jquery.js is a render-blocking resource. So even if you’re doing “inline & defer CSS” your Start-Render time (or one of the variations thereof) will be sub-optimal.

Jonas, the smart guy behind criticalcss.com, proposed to embed inline JS that requires jQuery in a function that executes after the DomContentLoaded event. And so I created a small code snippet as a proof of concept which hooks into Autoptimize’s API and that seems to work just fine;

The next step is having some cutting-edge Autoptimize users test this in the wild. You can view/ download the code from this gist  and add it as a code snippet (or if you insist in your theme’s functions.php). Your feedback is more then welcome, I’m sure you know where to find me!