Category Archives: wordpress

Hide-my-WordPress & Autoptimize compatibility glue

An “Autoptimize Critical CSS“-user saw some weirdness in how the site looked when optimized. The reason for this turned out to be not the critical CSS, but the fact that he used “Hide My WordPress Pro”, a plugin that changes well-known paths in WordPress URL’s to other paths (e.g. /wp-content/plugins -> /modules/ and /wp-content/themes -> /templates) and uses rewrite rules .htaccess to map requests to the filesystem. This resulted in Autoptimize not finding the files on the filesystem (as AO does not “see” the mapping in .htaccess), leaving them un-aggregated.

To fix something like that, a small code snippet that hooks into Autoptimize’s API can do the trick;

add_filter('autoptimize_filter_cssjs_alter_url', 'rewrite_hidemywp');
function rewrite_hidemywp($url) {
    if ( strpos( $url, 'modules/' ) !== false && strpos( $url, 'wp-content' ) === false ) {
        $url = str_replace('modules/','wp-content/plugins/', $url);
    } elseif ( strpos( $url, 'templates/' ) !== false && strpos( $url, 'wp-content' ) === false ) {
	$url = str_replace('templates/','wp-content/themes/', $url);
    }
    return $url;
}

The above is just an example (as in the Pro version of hide-my-wp you can set paths of your own liking and you can even replace theme names by random-ish strings), but with a small amount of PHP-skills you should be able to work out the solution for your own site. Happy optimized hiding!

How to LYTE-n up your WooCommerce video’s

So you have a WooCommerce shop which uses YouTube video’s to showcase your products but those same video’s are slowing your site down as YouTube embeds typically do? WP YouTube Lyte can go a long way to fix that issue, replacing the “fat embedded YouTube player” with a LYTE alternative.

LYTE will automatically detect and replace YouTube links (oEmbeds) and iFrames in your content (blogposts, pages, product descriptions) but is not active on content that does not hook into WordPress’ the_content filter (e.g. category descriptions or short product descriptions). To have LYTE active on those as well, just hook the respective filters up with the lyte_parse-function and you’re good to go;

if (function_exists('lyte_parse')) {
add_filter('woocommerce_short_description','lyte_parse');
add_filter('category_description','lyte_parse');
}

And a LYTE video, in case you’re wondering, looks like this (in this case beautiful harmonies by David Crosby & Venice, filmed way back in 1999 on Dutch TV);

David Crosby & Venice – Guinevere | 2 Meter Sessions | 1999

Watch this video on YouTube.

Quick trick to disable Autoptimize on a page

So suppose you have one page/ post which for whatever reason you don’t want Autoptimize to act on? Simply add this in the post content and AO will bail out;

<!-- <xsl:stylesheet -->

Some extra info:

  • Make sure to use the “text”-editor, not the “visual” one as I did here to make sure the ode is escaped and thus visible
  • This bailing out was added 5 years ago to stop the PHP-generated <xsl:stylesheet from Yoast SEO from being autoptmized, if I’m not mistaking Yoast generates the stylesheet differently now.
  • The xsl-tag is enclosed in a HTML comment wrapper to ensure it is not visible (except here, on purpose to escape the HTML tags so they are visible for you to see).

Autoptimize 2.4 beta 3 includes image optimization!

We’re finalizing work on Autoptimize 2.4 with beta-3, which was just released. There are misc. changes under the hood, but the main functional change is the inclusion of image optimization!

This feature uses Shortpixel’s smart image optimization proxy, where requests for images are routed through their URL and automagically optimized. As the image proxy is hosted on one of the best preforming CDN’s with truly global presence obviously using HTTP/2 for parallelized requests, as the parameters are not in a query-string but are part of the URL and as behind the scenes the same superb image optimization logic is used that can also be found in the existing Shortpixel plugin, you can expect great results from just ticking that “optimize image” checkbox on the “Extra” tab :-)

Image optimization will be completely free during the 2.4 Beta-period. After the official 2.4 release this will remain free up until a still to be defined threshold per domain, after which additional service can be purchased at Shortpixel’s.

If you’re already running AO 2.4 beta-2, you’ll be prompted to upgrade. And if you’d like to join the beta to test image optimization, you can download the zip-file here. The only thing I ask in return is feedback (bugs, praise, yay’s, meh’s, …)  ;-)

 

New: Autoptimize CriticalCSS.com Power-Up released!

The Autoptimize criticalcss.com Power-up has just been released to the wordpress.org plugin repository!

This plugin integrates with and extends Autoptimize. It integrates with criticalcss.com, a premium service which uses a “headless” browser to extract real critical CSS. That way it  fully automates the extraction of high-quality critical CSS and the creation of rules for that critical CSS. It can work 100% automated, but also allows semi-automated jobs (where you enter a URL for which you want a specific rule, the power-up will do the rest) and manual rules (where you create the rule and add critical CSS yourself).

WordPress, Youtube (Lyte) and the GDPR

So you (vaguely) know about the GDPR I’m sure. German netizens seem ahead of the curve, as I’ve been mainly getting questions about Autoptimize and WP YouTube Lyte from that part of Europe. It even looks like the German implementation of the GDPR is pretty strict, with people removing externally hosted resources (like Google Fonts and Facebook widgets) from their sites.

It’s in that context that user ekatarinal on the WordPress support forum for WP YouTube Lyte asked if the thumnails for the Lyte video’s could not be loaded locally. That way user information (IP-address -and if the user is logged in to Google a lot more- would not be available to Google/ YouTube unless and until the visitor clicked the play-button. Additional advantage; no extra dns-lookup, http connection or ssl/ tls negotiation, no short caching-headers, … so very likely to improve performance as well!

And that’s why WP YouTube Lyte 1.7.0 is in the works and it will have that option. In fact it’s already up on Github in a first incarnation (call it beta), so if you want to test you can download the zip-file here.

EDIT: Lyte 1.7.0 was released on April 28th, no need to go down that Github road.

Wildbirds & Peacedrums "There Is No Light" (official video)

Watch this video on YouTube.

 

Autoptimize 2.4 beta 2; hooking into page cache purges and better Google Fonts handling

I just pushed out an update of the Autoptimize 2.4 beta branch on GitHub, with this in the changelog;

  • new: Autoptimize “listens” to page caches being cleared, upon which it purges it’s own cache as well. Support depends on known action hooks firing by the page cache, supported by Hyper Cache, WP Rocket, W3 Total Cache, KeyCDN Cache Enabler, support confirmed coming in WP Fastest Cache and Comet Cache.
  • new: Google Fonts can now be “aggregated & preloaded”, this uses CSS which is loaded non render-blocking
  • improvement: “remove all Google Fonts” is now more careful (avoiding removing entire CSS

We’re still looking for beta-testers and some of these new features might convince you to jump on board? You can download the zip-file here, installing it a simple one-time process:

  1. Deactivate Autoptimize 2.3.x
  2. Go to Plugins -> New -> Upload
  3. Select the downloaded zipfile and upload
  4. Click activate
  5. Go to Settings -> Autoptimize to review some of the new settings

In case of any problem; we’re actively looking for feedback in the GitHub Issue queue :-)