Performance: Optimize the Loading of WordPress Plugin CSS + JS Files

Most people simply install WordPress Plugins and let ’em rip, but this approach is almost guaranteed to result in an extremely slow website.

The problem is that Plugins have no reasonable way to avoid committing the sin of resource abuse—loading CSS and JS files on every page of your site, even though those files may only be necessary on a couple of pages.

Because of this, you have no choice but to optimize the delivery of Plugin CSS + JS if you want to preserve site performance.

How to Restrict Plugin CSS and JS on the Front End

In the following solution, I’ll describe a framework for optimizing the delivery of Plugin resources, but it’s up to you to identify the posts and pages on which various Plugin resources should appear.

The basic framework—which assumes you’re using a PHP customization class—looks like this:

public function front_end() {
	add_filter('print_scripts_array', array($this, 'remove_scripts'));
	add_filter('print_styles_array', array($this, 'remove_styles'));
}

public function remove_scripts($scripts) {
	$remove = array();	// Array of scripts to remove
	$posts = array();	// Array of posts where you want Plugin JS to run
	$pages = array();	// Array of pages where you want Plugin JS to run
	if (!is_single($posts)) {
		$remove[] = [insert proper script reference here];
	}
	if (!is_page($pages)) {
		$remove[] = [insert proper script reference here];
	}
	return array_diff($scripts, $remove);
}

public function remove_styles($styles) {
	$remove = array();	// Array of styles to remove
	$posts = array();	// Array of posts where you want Plugin CSS to run
	$pages = array();	// Array of pages where you want Plugin CSS to run
	if (!is_single($posts)) {
		$remove[] = [insert proper script reference here];
	}
	if (!is_page($pages)) {
		$remove[] = [insert proper script reference here];
	}
	return array_diff($styles, $remove);
}

In the code above, you’ve got one method, remove_scripts(), to remove JS, and you’ve got another method, remove_styles() to remove CSS.

The challenge is to identify the subset of posts and pages where you want each Plugin’s assets to run. Once you identify the posts and pages, build out your $posts and $pages arrays like this:

$posts = array(
	'post-ID-1',
	'post-ID-2',
	'post-ID-3');

$pages = array(
	'page-ID-1',
	'page-ID-2',
	'page-ID-3');

If you’re not on a post or page where these assets should run, then you should add the assets to the $remove array:

$remove[] = 'asset-reference-name';

The trick here is to determine the asset reference name.

You can determine script names within your remove_scripts() method by adding the following code and then by viewing the HTML source on your site:

echo "<div style=\"display: none;\">\n";
print_r($scripts);
echo "</div>\n";

When you view the HTML source output, you’re looking for the names of scripts registered by Plugins. Your job is to identify the right scripts and remove them at the right time by adding the script reference names to the $remove array.

You can take the same approach inside the remove_styles() method:

echo "<div style=\"display: none;\">\n";
print_r($styles);
echo "</div>\n";

Removing Plugin CSS and JS in a precise manner is a detailed—and sometimes challenging—process. After setting up the basic framework shown above, you may wish to visit the DIYthemes forums for additional insight on your precise scenario.