Category Archives: Technology

Blogposts on blog.futtta.be about internet, web developement, browsers, security, linux, …

Introducing zytzagoo’s major changes for Autoptimize 2.4

24 Replies

[UPDATE 29/03/2018: Autoptimize 2.4 can now be downloaded from https://github.com/futtta/autoptimize/archive/beta.zip and will automatically update so ensure all new functionality and fixes are applied]

TL;DR Autoptimize 2.4 will be a major change. Tomaš Trkulja (aka zytzagoo) has cleaned up and modernized the code significantly, making it easier to read and maintain, switched to the latest and greatest minifiers and added automated testing. And as if that isn’t enough we’re also adding new optimization options! The downside: we will be dropping support for PHP < 5.3 and for the “legacy minifiers”. AO 2.4 will first be made available as a separate “Autoptimize Beta” plugin on wordpress.org via GitHub and will see more releases/ iterations with new options/ optimizations there before being promoted to the official “Autoptimize”.

Back in March 2015 zytzagoo forked Autoptimize, rewriting the CDN-replacement logic (and a lot of autoptimizeStyles::minify really) and started adding automated testing. I kept an eye on the fork and later that year I contacted Tomas via Github to see how we could collaborate. We have been in touch ever since; some of his improvements have already been integrated and he is my go-to man to discuss coding best practices, bugfixes and security.

FFWD to the nearby future; Autoptimize 2.4 will be based on Tomaš’ fork and will include the following major changes:

  • New: option only minify JS/ CSS without combining them
  • New: excluded JS- or CSS-files will be automatically minified
  • Improvement: switching to the current version of JSMin and -more importantly- of YUI CSS compressor PHP port which has some major performance-improvements of itself
  • Improvement: all create_function() instances have been replaced by anonymous functions (PHP 7.2 started issuing warnings about create_function being deprecated)
  • Improvement: all code in autoptimize/classlesses/* (my stuff) has been rewritten into OOP and is now in autoptimize/classes/*
  • Improvement: use of autoload instead of manual conditional includes
  • Improvement: a nice amount of test cases (although no 100% coverage yet), allowing for Travis continuous integration-tests being done
  • dropping support for PHP below 5.3 (you really should be on PHP 7.x, it is way faster)
  • dropping support for the legacy minifiers

These improvements will be released in a separate “Autoptimize Beta” plugin soon (albeit not on wordpress.org as “beta”-plugins are not allowed). You can already download from GitHub here. We will start adding additional optimization options there, releasing at a higher pace. The goal is to create a healthy Beta-user pool allowing us to move code from AO Beta to AO proper with more confidence. So what new optimization options would you like to see added to Autoptimize 2.4 and beyond? :-)

[corrected 19/02; wordpress.org does not allow beta-plugins]

How to extract blocks from Gutenberg

2 Replies

So Gutenberg, the future of WordPress content editing, allows users to create, add and re-use blocks in posts and pages in a nice UI. These blocks are added in WordPress’ the_content inside HTML-comments to ensure backwards-compatibility. For WP YouTube Lyte I needed to extract information to be able to replace Gutenberg embedded YouTube with Lytes and I took the regex-approach. Ugly but efficient, no?

But what if you need a more failsafe method to extract Gutenberg block-data from a post? I took a hard look at the Gutenberg code and came up with this little proof-of-concept to extract all data in a nice little (or big) array:

add_action('the_content','gutenprint',10,1);
function gutenprint($html) {
  	// check if we need to and can load the Gutenberg PEG parser
  	if ( !class_exists("Gutenberg_PEG_Parser") && file_exists(WP_PLUGIN_DIR."/gutenberg/lib/load.php") ) {
  		include_once(WP_PLUGIN_DIR."/gutenberg/lib/load.php");
	}

  	if ( class_exists("Gutenberg_PEG_Parser") && is_single() ) {
	  // do the actual parsing
	  $parser = new Gutenberg_PEG_Parser;
	  $result = $parser->parse(  _gutenberg_utf8_split( $html ) );
	  
	  // we need to see the HTML, not have it rendered, so applying htmlentities
  	  array_walk_recursive($result,
		function (&$result) { $result = htmlentities($result); }
		);

	  // and dump the array to the screen
	  echo "<h1>Gutenprinter reads:</h1><pre>";
	  var_dump($result);
	  echo "</pre>";
	} else {
	  echo "Not able to load Gutenberg parser, are you sure you have Gutenberg installed?";
	}
  
  	// remove filter to avoid double output
  	remove_filter('the_content','gutenprint');
  
  	// and return the HTML
	return $html;
}

I’m not going to use it for WP YouTube Lyte as I consider the overhead not worth it (for now), but who know it could be useful for others?

Of bugs, inconsistencies and tag soup in (future) core

1 Reply

In general i rarely bother looking into WordPress core code or what’s on the horizon. The last month or so however I came across 3 problems that were due to core.

1. Shortly after pushing Autoptimize 2.3.x out, a subset of users started complaining about a flood of “cachebuster”-requests bringing their site to a crawl. It turned out all of them were using Redis or Memcached and that due to a longstanding bug in WordPress core Autoptimize did not get the correct version-string from the database, triggering the update-procedure over and over, purging and then preloading the cache. A workaround -involving a transient featuring my wife and daughter- was introduced to prevent this, but “oh my gawd” what an ugly old WordPress core bug that is! Can someone please get this fixed?

2. A couple of users of WP YouTube Lyte noticed their browsers complaining about unbalanced tags in the Lyte HTML output (which is part of the_content). It took me a lot of time to come to the conclusion that WordPress core’s wpautop was messing things up severely due to the noscript and meta-tags in Lyte’s output. As wpautop has no filters or actions to alter the way it works, I ended up disabling wpautop when lyte’s were found in the_content.

3. My last encounter was with the ghost of WordPress Yet-to-come; Gutenberg … To allow WP YouTube Lyte to turn Gutenberg embedded YouTube’s into Lyte’s, it turned out I had to dive into the tag soup that Gutenberg adds as HTML-comments to the_content. I have yet to find documented functions to extract the information the smart way, so regexes to the rescue. But any plugin that hooks into the_content better be aware that Gutenberg (as part of WordPress 5.0) will potentially mess things up severely.

Although I cursed and sighed and I am now complaining, I felt great relief when having fixed/ worked around these issues. But working in the context of a large and successful open source software project and depending on it’s quality can sometimes almost be a pain as much as it is a joy. Almost … ;-)

Autoptimize 2.3, the Happy New Year release

10 Replies

I just released Autoptimize 2.3.0, the Happy New Year release. As described here earlier it has some significant extra optimizations to help you improve your site’s performance even more for 2018:

  • new: optimize Google fonts with “combine & link” and “combine and load async” (with webload.js), intelligently preconnecting to Google’s domains to limit performance impact even further
  • new: Async JS, can be applied to local or 3rd party JS (if local it will be auto-excluded from autoptimization)
  • new: support to tell browsers to preconnect (= dns lookup + tcp/ip connection + ssl negotiation) to 3rd party domains (depends on browser support, works in Chrome & Firefox)
  • new: remove WordPress’ Core’s emoji CSS & JS
  • new: remove (version parameter from) Querystring
  • new: support to clear cache through WP CLI thanks to junaidbhura
  • lots of bugfixes and small improvements done by some seriously smart people via GitHub (thanks all!!), including a fix for AO 2.2 which saw the HTML minifier go PacMan on spaces in some circumstances.

Enjoy! :;-)

[heads up] Autoptimize 2.3 coming with new features, last call for testers

4 Replies

With the last release almost 6 months in the past, it’s high time for a new Autoptimize release. And what a release that will be my friends!

Here are the most important features/ improvements (most new options are on a separate tab, “Extra” to keep things organized as seen in the screenshot);

  • Google fonts; remove (not new), but also “combine & link” and “combine and load async” (with webload.js), intelligently preconnecting to Google’s domains to limit performance impact even further
  • Async JS, can be applied to local or 3rd party JS (if local it will be auto-excluded from autoptimization)
  • support to tell browsers to preconnect (= dns lookup + tcp/ip connection + ssl negotiation) to 3rd party domains (depends on browser support, works in Chrome & Firefox)
  • remove WordPress’ Core’s emoji CSS & JS
  • remove (version parameter from) Querystring
  • support to clear cache through WP CLI
  • a significant amount of bugfixes done by some seriously smart people via GitHub (thanks all!!), including a fix for the main bug in AO 2.2.x which saw the HTML minifier go PacMan on spaces in some circumstances

If you want to test AO 2.3, you can download the zipfile from GitHub here. I would love your feedback!

Happy end-of-year to all, who knows we can wrap up AO 2.3 nicely, ribbon and all, for New Years? :-)