How to (not) correctly load Gutenberg JS

On Facebook someone asked me how to do Gutenberg the right way to avoid loading too much JS on the frontend, this is a somewhat better organized version of my answer;

I’m not a Gutenberg specialist (for from it, really) but:

  • the wrong way is adding JS with wp-block/ wp-element and other gutenberg dependencies on init calling wp_enqueue_script,
  • the right way is either hooking into enqueue_block_editor_assets (see https://jasonyingling.me/enqueueing-scripts-and-styles-for-gutenberg-blocks/)
  • or when using init doing wp_register_script and then register_block_type referring to the correct editor_script previously registered (see https://wordpress.org/gutenberg/handbook/designers-developers/developers/tutorials/block-tutorial/writing-your-first-block-type/).

I’ve tried both of these on a “bad” plugin and can confirm both solutions do prevent those needless wp-includes/js/dist/* JS-files from being added on the front-end.

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

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!

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!

Music from Our Tube; Better Oblivion Community Center performs “Dylan Thomas”

Live version of a great new song by a new (super-)band by one not-so-new (Conor Oberst) and (given her age) one newish artist (Phoebe Bridgers). Somewhat reminds me of the alternative rock-scene of the nineties (Hole, Throwing Muses and whatnot) and that is a good thing!

Saturday Sessions: Better Oblivion Community Center performs "Dylan Thomas"

Watch this video on YouTube.

Google PageSpeed Insights; the great Defer unused CSS mystery to be resolved?

You know that frustrating Google PageSpeed Insights opportunity “Defer unused CSS”? Well, it’s going to be renamed soon (in Lighthouse first, so GPSI should follow) as per this Github merged pull request;

The full text will read;

Remove unused CSS
Remove dead rules from stylesheets and defer the loading of CSS not used for above-the-fold content to reduce unnecessary bytes consumed by network activity.