Supports Autoptimize

Autoptimize is a plugin, which helps you to combine all stylesheets into one file and combine all javascript code with minification. This plugin is extremely helpful if you want to speed up your site and have better score on Google Page Speed test. The most important part is that plugin combines not only your theme assets. It combines all assets included on your page (even from plugins), except external links.

So it's pretty cool, however you can face a problem, that after minification your scripts stop working. At this point developers usually set a bad rate to a plugin and leave. Let's take a closer look to make it works!

Configure Autoptimize plugin

Making your scripts work

Autoptimize has many hooks inside to configure or patch almost everything it does.

The most useful hooks are:

• autoptimize_filter_js_domove - script patterns to be ignored by combine/minification and re-order them to be placed before combined/minified script

  • jquery.js or jquery.min.js should be the first script here!
  • also we suggest to add patterns for inline scripts which define some global variables (like Contact Form 7 plugin)

• autoptimize_filter_js_movelast - script patterns to be ignored by combine/minification and re-order them to be placed after combined/minified script

  • add share scripts patterns here
  • add security plugins patterns here (like Wordfense plugin scripts)

• autoptimize_filter_js_dontmove - script patters to leave scripts in their original places

  • Google analytics or GTM code is a good example of don't move scripts

• autoptimize_filter_js_exclude - ability to patch "exclude" option, available from plugin options page

(We never got problems with stylesheets combine, so we skipped hooks for css. You can find them by yourself if you want to have control over css too.)

Autoptimize Extension

For easy usage of js configuration hooks we made a base class, which provide simple methods to patch javascript combine and load order. And also we placed few more extra features:

• Autoptimize has few bugs in MultiSite mode (wrong linking of real folders). Our extension makes it work with a MultiSite.
• We added automatically DNS prefetch link tags based on your page content.

To start using our extension you need to create a child class and overwrite methods you want to update:

app/Supports/Autoptimize.php

<?php
namespace Boilerplate\Theme\Supports;

/**
 * Class AutoOptimize
 * AutoOptimize plugin extension which allows to add advanced configuration of this plugin.
 * Also add patches for multi-site and "/cms" folder installation
 */
class Autoptimize extends \JustCoded\WP\Framework\Supports\Autoptimize {
	/**
	 * Add scripts to be moved BEFORE autoOptimized minified script loaded
	 *
	 * @param array $scripts  scripts list.
	 *
	 * @return array
	 */
	public function js_move_first( $scripts ) {
		$scripts = array_merge( $scripts, [
			// string parts to be searched inside scripts to place scripts at the beginning. Like jQuery.
		] );

		return $scripts;
	}

	/**
	 * Add scripts to be moved AFTER autoOptimized minified script loaded
	 *
	 * @param array $scripts   scripts list.
	 *
	 * @return array
	 */
	public function js_move_last( $scripts ) {
		// add share this.
		$scripts = array_merge( $scripts, [
			// string parts to be searched inside scripts to place scripts at the end. Like sharethis.
			'sharethis.com',
		] );

		return $scripts;
	}
}

Note: You can use 2 more methods js_dontmove() and js_exclude() to patch autoptimize run as well.

And after you created it you need to register it's instance inside your Theme.php

Theme.php

<?php
namespace Boilerplate\Theme;

use Boilerplate\Theme\Supports\Autoptimize;
// ...

/**
 * Theme main entry point
 *
 * Theme setup functions, assets, post types, taxonomies declarations
 */
class Theme extends \JustCoded\WP\Framework\Theme {
	// ...
	
	/**
	 * Loads hooks for 3d-party plugins.
	 */
	public function support_plugins() {
		if ( Autoptimize::check_requirements() ) {
			Autoptimize::instance();
		}
		// ... other plugins support activation.
	}	
}

Typical problems

If you want to make your HTML super clean - you will need to enable combining inline stylesheets and inline scripts as well. Some scripts are similar for all pages, and some are unique (for example styles from some page builder plugin).

You should to avoid including unique stylesheets inside combined script. If you do so you will have several problems:

• Combined css/scripts folder size grow (on big site with big load it can be really huge at the end)
• You will have unique asset on each page, which will be loaded without cache - so the site will work much slower.

How to check?

To find out do you problems with combined scrips re-gen on each page you need to:

1. Clean up Autoptimize cache from admin panel
2. Open your homepage and some inner page
3. Open autoptimize cache folder (by default wp-content/autoptimize/cache/css or wp-content/autoptimize/cache/js)
4. Remember number of files inside this folder
5. Navigate through your site and check this folder each time you opened a new page. If number of cache files continue growing - you definitely have a problem with combining unique inline assets.
6. Compare combined cache asset file name between 2 pages, when you noticed a change in a number of cache files. If they are different - then you have a problem with combining unique inline assets.

How to fix

Search pages source code for differences to find out a unique scripts.

Sometimes such strings can be added by security scripts like Wordfence. Security plugins adds unique assets and scripts only on real domains, so you what's see any problems on your local environments!