Remove WordPress CSS / JS / Fonts website clutter

WordPress is fun, but many of my clients take the plugin fun to new levels :)

Depending on how well plugins / shortcodes have been integrated, linked JavaScript & CSS files can clutter up your pages really fast.

The problem is that many plugins do not load external files on demand. Same applies for WebFonts that have been added to the system.

THE HUNT

Its no fun hunting down all those resources and slim down pages manually, but sometimes there is no way around it.

In WordPress CSS & JavaScript files are enqueued by plugins / themes.

THE QUEUE

CSS / JavaScript

wp_enqueue_style(

    'my-extension',

    get_template_directory_uri() . '/css/my-extension.css',

    array( 'bootstrap' ),// an array of dependent styles   

    '1.2', // version number

    'screen', // CSS media type


);

wp_enqueue_script( 'my-extension-script', 
get_template_directory_uri() . '/js/my-extension.js', 

array(), // Scripts your extension depends on


'1.0.0', 

true // Place in footer 


);

CLEANUP

To remove files from pages you need to unregister (CSS / JavaScript) those files using their specific handle. This also allows you to replace a specific file with your own version.

wp_deregister_style( 'my-extension' );

 
wp_deregister_script( 'my-extension-script' );

DO YOU HAVE A NAME?

The big problem is finding the names of the enqueued files, their handles. They are often hidden deep in the plugins. But if they are registered somewhere, you should be able to find them somewhere :)

global $wp_styles;


print_r($wp_styles);

Add this to your functions.php and you will get a nice overview of all the styles and their handles registered. You can do the same for the registered scripts.

global $wp_scripts;


print_r($wp_scripts)

This will get you an overview of all the registered files. Now its only a matter of doing the unregister operation with some simple WordPress conditional  logic.

add_action( 'some-extension', 'some_mextension', 100 );


function my_extension() {


if ( !is_page('Home') ) {

wp_deregister_script( 'some-extension' );

}
}

IS THERE A PLUGIN FOR THAT?

Yes there is and it is called “Asset Queue Manager” …

“This tool allows you to monitor, dequeue and requeue scripts and styles that are enqueued on your site. It is designed for frontend performance engineers who want to view and manage all assets enqueued on any page and control the minification and concatenation themselves.”

BREAKING STUFF

Messing with styles can be ugly, but often wont break things completely. Messing with JavaScript includes can cripple a setup badly. So you should be really sure which scripts / styles can be deactivated on specific pages. Please do not experiment on a live website … I warned you ! :)

… enjoy coding