Category Archives: Technology

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

Preparing (for) Autoptimize 2.0.3 or 2.1.0

It’s that time of the year again where I humbly ask Autoptimize’s users to download and test the “beta”-version of the upcoming release. I’m not entirely sure whether this should be 2.0.3 (a minor release) or 2.1.0 (a major one), but I’ll let you guys & girls decide, OK?

Anyway, the following changes are in said new release;

  • Autoptimize now adds a small menu to the admin-toolbar (can be disabled with a filter) that shows the cache size and provides the possibility to purge the cache. A big thanks to Pablo Custo for his hard work on this nice feature!
  • If the cache size becomes too big, a mail will be sent to the site admin (pass `false` to `autoptimize_filter_cachecheck_sendmail` filter to disable or pass alternative email to the `autoptimize_filter_cachecheck_mailto` filter)
  • An extra tab is shown (can be hidden with a filter) with information about my upcoming premium power-ups and other optimization tools- and services.
  • Misc. bugfixes & small improvements (see the commit-log on GitHub)

So, if you’re curious about Pablo’s beautiful menu or if you just want to help Autoptimize out, download the beta and provide me with your feedback. If all goes well, we’ll be able to push it (2.1.0?) out in the first half of August!

Saying goodbye to 2012.FFWD

Earlier today I updated my performance-centric TwentyTwelve child theme to fix a problem with the mobile navigation (due to the fact that TwentyTwelve changed the menu-button from a h3 to a button, which required the navigation JS which 2012.FFWD inlines to be updated as well). You can download the update here.

This update “officially” marks the end-of-life of this child-theme. Although a lot of optimizations can be done on a theme-level, I prefer focusing on tools like my own Autoptimize, which not only optimize code spit out by the theme but also any CSS/ JS introduced by plugins or widgets.

Whatever you do, don’t lie (when naming files)

So since Autoptimize 2.0.0 got released half a year ago, minified files are not re-minified any more, which can yield important performance-gains. Or that, at least, is the goal. But as checking if a file is minified is non-trivial, AO reverts to a simpler check; does the filename indicate the file is minified. So for example whatever-min.js and thisone_too.min.css would be considered minified and will simply be aggregated, whereas not_minified.js would get minified. Mr Clay’s Minify (which is used by WP Minify, BWP Minify and W3 Total Cache and of which the core minification components are in Autoptimize as well) applies the same logic.

But apparently plugins often lie about their JS and CSS, with some files claiming to be minified which clearly are not and with some files (even WordPress core files) being minified but not having the min-suffix in the name. It’s obvious that lying like that is kind of stupid: saying your files is minified when in fact it is not, offers you no advantages. Not confirming your file is minified in the name when it is, saves you 4 characters in the filename, but I suspect you were just being lazy, sloppy or tired, no?

So, ladies and gentlemen, can we agree on the following:

  1. Ideally you ship your plugin/ theme with minified JS & CSS.
  2. If your files are minified, you confirm that in the filename by adding the “.min”-suffix and minification plugins will skip them.
  3. If your files are not minified, you don’t include the “.min”-suffix in the filename, allowing for those minification plugins tot minify them.

For a more detailed overview of how to responsibly load minified JS/ CSS in WordPress, I’ll happily point you to Matt Cromwell’s excellent article on the subject.

How to add posts’ featured images to WordPress RSS feeds

The standard WordPress RSS-feeds don’t include posts featured image. Below code adds the medium-format thumbnail to each item in a RSS2 standards-compliant manner by inserting it as an enclosure.

add_action('rss2_item', 'add_enclosure_thumb');
function add_enclosure_thumb() {
  global $post;
  if(has_post_thumbnail($post->ID)) {
    $thumbUrl = get_the_post_thumbnail_url($post->ID,"medium");

    if ((substr($thumbUrl, -4) === "jpeg") || (substr($thumbUrl, -3) === "jpg")) {
      $mimeType="image/jpeg";
    } else if (substr($thumbUrl, -3) === "png") {
      $mimeType="image/png";
    } else if (substr($thumbUrl, -3) === "gif") {
      $mimeType="image/gif";
    } else {
      $mimeType="image/unkown";
    }

    $thumbSize = filesize(WP_CONTENT_DIR.str_replace(WP_CONTENT_URL,'',$thumbUrl));

    echo "<enclosure url=\"".$thumbUrl."\" size=\"".$thumbSize."\" type=\"".$mimeType."\" />\n";
  }
}

A more advanced & flexible approach would be to add support for the media RSS namespace, but the above suffices for the purpose I have in mind.

Fun with EDD; showing EUR price in USD (and vice versa)

I was playing around with Easy Digital Downloads (because this) and I choose EUR as currency, but I wanted the price to be also displayed in USD. Obviously there’s a premium add-on for that, but as I don’t want to purchase stuff just yet, I concocted an alternative myself. Here’s the resulting snippet of code that shows the price in USD for shops with EUR currency and shows the price in EUR when the shop is in USD;

add_action("plugins_loaded","edd_curconv_init");
function edd_curconv_init() {
	$curpos = edd_get_option( 'currency_position', 'before' );
	$curcur = strtolower(edd_get_currency());
  	if (in_array($curcur, array("eur","usd"))) {
	  $filtername="edd_".$curcur."_currency_filter_".$curpos;
	  add_filter($filtername, "edd_eur_dollar_conv",10,3);
	}
}

function edd_eur_dollar_conv($formatted, $currency, $price) {
  $rate=1.13;
  if ($currency === "EUR") {
	$outprice = $price * $rate;
	$outrate = "USD";
  } else if ($currency === "USD") {
	$outprice = $price / $rate;
	$outrate = "EUR";
  }
  
  if (!empty($outprice)) {
	$out = " ( ~ ".edd_currency_filter(round($outprice,2),$outrate).")";
	$formatted.=$out;
  }
  
  return $formatted;
}

This obviously lacks the features and robustness of that Currency Converter add-on, so (don’t) use (unless) at your own risk.

Autoptimize Power-Up sneak peek; Critical CSS

So although I am taking things rather slowly, I am in fact still working on Power-Ups for Autoptimize, focusing on the one most people were asking for; critical CSS. The Critical CSS Power-Up will allow one to add “above the fold”-CSS for specific pages or types of pages.

The first screenshot shows the main screen (as a tab in Autoptimize), listing the pages for which Critical CSS is to be applied:

The second screenshot shows the “edit”-modal (which is almost the same when adding new rules) where you can choose what rule to create (based on URL or on WordPress Conditional Tag), the actual string from the URL or Conditional Tag and a textarea to copy/ paste the critical CSS:

ao_critcss_edit

The next step will be to contact people who already expressed interest in beta-testing Power-Ups, getting feedback from them to improve and hopefully make “Autoptimize Critical Css” available somewhere in Q3 2016 (but no promises, off course).

Quick KeyCDN’s Cache Enabler test

cache enablerCache Enabler – WordPress Cache is a new page caching kid on the WordPress plugin block by the Switzerland-based KeyCDN. It’s based in part on Cachify (which has a strong user-base in Germany) but seems less complex/ flexible. What makes it unique though, is it that it allows one to serve pages with WEBP images (which are not supported by Safari, MS IE/ Edge or Firefox) instead of JPEG’s to browsers that support WEBP. To be able to do that, you’ll need to also install Optimus, an image optimization plugin that plugs into a freemium service by KeyCDN (you’ll need a premium account to convert to WEBP though).

I did some tests with Cache Enabler and it works great together with Autoptimize out of the box, especially after the latest release (1.1.0) which also hooks into AO’s autoptimize_action_cachepurged action to clear Cache Enabler’s cache if AO’s get purged (to avoid having pages in cache the refer to deleted autoptimized CSS/ JS-files).

Just not sure I agree with this text on the plugin’s settings page;

Avoid […] concatenation of your assets to benefit from parallelism of HTTP/2.

because based on previous tests by smarter people than me concatenation of assets can still make (a lot of) sense, even when on HTTP/2 :-)