When trying to optimize site speed, you really want to remove unused CSS JS files in WordPress. It can also help you improve your site rankings in Google PageSpeed.

WordPress sites typically use a lot of plugins. These include contact form plugins, page builders like Elementor, e-commerce plugins like WooCommerce, and others. So, when you try to optimize page loading times, you hit a roadblock.

You got a reliable and fast host, enabled caching, optimized your images, and removed any WordPress plugin that you don’t really use.

Next on the list is to optimize or remove unused CSS JS files in WordPress.

While you can certainly do this using a plugin like WP Asset Clean Up and PurifyCSS, a CDN solution, or a tool like PurgeCSS, we’ll explain how you can do this without installing yet another plugin on your WordPress website.

We’ll go through:

80% of your CSS JS files probably don’t do anything 80% of the time

After the new redesign a few months back, I’ve made it a personal quest to limit the number of CSS and JavaScript files here at Cozmoslabs.

After going through the scripts that load on our site, on our homepage we’ve managed to go from:

15 JS scripts and 11 CSS files to:

4 JS scripts and 2 CSS files

Why do the plugins load so many CSS JS files?

it makes a lot of sense to invest a bit of time to remove unused CSS JS files in WordPress.

If you take any plugin that offers a shortcode or Widget for the user, chances are it will load its CSS JavaScript files site-wide like so:

1 2 3 4 5 6 7 8 9 10 function pluginslug_enqueue_style ( ) { wp_enqueue_style ( 'my-css-handle' , 'style.css' , false ) ; } function pluginslug_enqueue_script ( ) { wp_enqueue_script ( 'my-js-handle' , 'filename.js' , false ) ; } add_action ( 'wp_enqueue_scripts' , 'pluginslug_enqueue_style' ) ; add_action ( 'wp_enqueue_scripts' , 'pluginslug_enqueue_script' ) ;

What this does is it loads the style.css and filename.js sitewide, regardless of the fact that you’re using a particular shortcode on a single page or a particular widget on a particular custom post type.

There’s no way to chose where that particular CSS/JS file gets loaded. So it makes a lot of sense to invest a bit of time to remove unused CSS JS files in WordPress.

See what scripts are getting loaded on our site

In order to remove unused scripts, we should first find out what exactly get’s loaded by our WordPress theme and plugins.

One can do that simply by looking at the source code, make a list of files and then search in each plugin where exactly they get loaded. But that’s boring and there are much better solutions.

Listing all loaded scripts with wp_enqueue_script

First thing first, we’ll create a simple plugin that will host all of our code.

Create a new file called wp_remove_assets.php and add the following plugin header:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 <!-- ?php /* * Plugin Name: WP Remove Assets * Plugin URI: https://www.cozmsolabs.com * Version: 0.1 * Description: Filter particular scripts and style to load in posts or pages that don't need it. * Author: Cristian Antohe * Author URI: https://www.cozmoslabs.com/ */ & lt ;/ pre & gt ; & lt ; p & gt ; Before we can remove unused CSS JS files in WordPress , we 'll first look at what get' s loaded . & lt ;/ p & gt ; & lt ; p & gt ; WordPress uses two global variables to store scripts and styles : & lt ;/ p & gt ; & lt ; ul & gt ; & lt ; li & gt ; & lt ; code & gt ; $wp_scripts & lt ;/ code & gt ;& lt ;/ li & gt ; & lt ; li & gt ; & lt ; code & gt ; $wp_styles & lt ;/ code & gt ;& lt ;/ li & gt ; & lt ;/ ul & gt ; & lt ; p & gt ; If you do a var_dump of both global files in the front - end , you 'll be able to see all the registered scripts (by plugins, themes and WordPress it self) as well as <strong>the ones currently loaded on our page.</strong></p> <p>We' re mainly interested in the ones that get loaded . & lt ;/ p & gt ; & lt ; pre lang = "php" & gt ; // list loaded assets by our theme and plugins so we know what we're dealing with. This is viewed by admin users only. add_action ( 'wp_print_footer_scripts' , 'wra_list_assets' , 900000 ) ; function wra_list_assets ( ) { if ( ! current_user_can ( 'delete_users' ) ) { return ; } echo '</p> <h2>List of all scripts loaded on this particular page.</h2> <p>' ; echo '</p> <p>This can differ from page to page depending of what is loaded in that particular page.</p> <p>' ; // Print all loaded Scripts (JS) global $wp_scripts ; wra_print_assets ( $wp_scripts ) ; echo '</p> <h2>List of all css styles loaded on this particular page.</h2> <p>' ; echo '</p> <p>This can differ from page to page depending of what is loaded in that particular page.</p> <p>' ; // Print all loaded Styles (CSS) global $wp_styles ; wra_print_assets ( $wp_styles ) ; } & lt ;/ pre & gt ; & lt ; p & gt ; We 're hooking into the <code>wp_print_footer_scripts</code> hook with a very high priority to make sure all scripts finish loading before listing them. </p> <p>Also, this listing gets displayed only if you' re a logged in administrator . So your users or search engines will never see the listing . & lt ;/ p & gt ; & lt ; p & gt ; There are two extra functions that we 'll need to create. The <code>wra_print_assets</code> and <code>wra_asset_template</code>. </p> <pre lang="php"> // both $wp_styles and $wp_scripts are objects and store loaded CSS/JS files in $wp_styles->queue function wra_print_assets($wp_asset){ $nb_of_asset = 0; foreach( $wp_asset->queue as $asset ) : $nb_of_asset ++; $asset_obj = $wp_asset->registered[$asset]; wra_asset_template($asset_obj, $nb_of_asset); endforeach; } // we' re using inline css since this is only for admins to see and it 's ok if it' s a bit messy function wra_asset_template ( $asset_obj , $nb_of_asset ) { if ( is_object ( $asset_obj ) ) { echo '</p> <div class="wra_asset" style="padding: 2rem; font-size: 0.8rem; border-bottom: 1px solid #ccc;"><p>' ; echo '</p> <div class="wra_asset_nb"><span style="width: 150px; display: inline-block">Number:</span>' ; echo $nb_of_asset . '</div> <p>' ; echo '</p> <div class="wra_asset_handle"><span style="width: 150px; display: inline-block">Handle:</span>' ; echo $asset_obj -& gt ; handle . '</div> <p>' ; echo '</p> <div class="wra_asset_src"><span style="width: 150px; display: inline-block">Source:</span>' ; echo $asset_obj -& gt ; src . '</div> <p>' ; echo '</p> <div class="wra_asset_deps"><span style="width: 150px; display: inline-block">Dependencies:</span>' ; foreach ( $asset_obj -& gt ; deps as $deps ) { echo $deps . ' / ' ; } echo '</div> <p>' ; echo '</p> <div class="wra_asset_ver"><span style="width: 150px; display: inline-block">Version:</span>' ; echo $asset_obj -& gt ; ver . '</div> <p>' ; echo '</div> <p>' ; } & lt ;/ pre & gt ; & lt ; p & gt ; We 'll be listing: </p> <ul> <li>the current number of the CSS/JS file</li> <li>the handle - this is the unique name used by <code>wp_enqueue_scripts</code> to load a script just once</li> <li>source - the location of the file</li> <li>dependencies - some files require other libraries, like jquery. </li> <li>version - the current version of the CSS/JS file</li> </ul> <p>Going forward, we' ll only need the handle of the CSS / JS files , however it 's nice to see this information listed to get an idea as to why some files are loaded. </p> <h3 id="remove-unused">Remove unused CSS JS files in WordPress</h3> <p>There are 4 main functions when you want to remove unused CSS JS files in WordPress front-end: </p> <ul> <li><a href="https://codex.wordpress.org/Function_Reference/wp_deregister_script">wp_deregister_script($handle)</a></li> <li><a href="https://codex.wordpress.org/Function_Reference/wp_dequeue_script">wp_dequeue_script($handle)</a></li> <li><a href="https://codex.wordpress.org/Function_Reference/wp_deregister_style">wp_deregister_style($handle)</a></li> <li><a href="https://codex.wordpress.org/Function_Reference/wp_dequeue_style">wp_dequeue_style($handle)</a></li> </ul> <blockquote><p>You can use WordPress conditional tags to target a particular page or an entire custom post type</p></blockquote> <pre lang="php"> // remove script handles we don' t need , each with their own conditions add_action ( 'wp_print_scripts' , 'wra_filter_scripts' , 100000 ) ; add_action ( 'wp_print_footer_scripts' , 'wra_filter_scripts' , 100000 ) ; function wra_filter_scripts ( ) { #wp_deregister_script($handle); #wp_dequeue_script($handle); wp_deregister_script ( 'bbpress-editor' ) ; wp_dequeue_script ( 'bbpress-editor' ) ; // Device Pixels support // This improves the resolution of gravatars and wordpress.com uploads on hi-res and zoomed browsers. We only have gravatars so we should be ok without it. wp_deregister_script ( 'devicepx' ) ; wp_dequeue_script ( 'devicepx' ) ; if ( ! is_singular ( 'docs' ) ) { // the table of contents plugin is being used on documentation pages only wp_deregister_script ( 'toc-front' ) ; wp_dequeue_script ( 'toc-front' ) ; } if ( ! is_singular ( array ( 'docs' , 'post' ) ) ) { wp_deregister_script ( 'codebox' ) ; wp_dequeue_script ( 'codebox' ) ; } } // remove styles we don't need add_action ( 'wp_print_styles' , 'wra_filter_styles' , 100000 ) ; add_action ( 'wp_print_footer_scripts' , 'wra_filter_styles' , 100000 ) ; function wra_filter_styles ( ) { #wp_deregister_style($handle); #wp_dequeue_style($handle); //no more bbpress styles. wp_deregister_style ( 'bbp-default' ) ; wp_dequeue_style ( 'bbp-default' ) ; // download monitor is not used in the front-end. wp_deregister_style ( 'wp_dlmp_styles' ) ; wp_dequeue_style ( 'wp_dlmp_styles' ) ; if ( ! is_singular ( 'docs' ) ) { // the table of contents plugin is being used on documentation pages only wp_deregister_style ( 'toc-screen' ) ; wp_dequeue_style ( 'toc-screen' ) ; } if ( ! ( is_page ( 'account' ) || is_page ( 'edit-profile' ) ) ) { // this should not be like this. Need to look into it. wp_deregister_style ( 'wppb_stylesheet' ) ; wp_dequeue_style ( 'wppb_stylesheet' ) ; } if ( ! is_singular ( array ( 'docs' , 'post' ) ) ) { wp_deregister_style ( 'codebox' ) ; wp_dequeue_style ( 'codebox' ) ; } } & lt ;/ pre & gt ; & lt ; p & gt ; The really cool part of doing it like this is that you can use WordPress conditional tags to target a particular page or an entire custom post type . This gives us the flexibility we need to load our CSS / JS files exactly where they are needed . & lt ;/ p & gt ; & lt ; h3 id = "remove-other-assets" & gt ; Remove scripts that won 't work with wp_dequeue_script</h3> <p>Sometimes scripts are added differently. The most common way would be to simply output the script or style tag directly in the header or footer. </p> <pre lang="php"> add_action(' wp_head ', ' pluginslug_add_script ', 10); function pluginslug_add_script(){ echo ' & lt ; img src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data - wp - preserve = "%3Cscript %20s rc%3D%22https%3A %2F %2F code.jquery.com %2F jquery-2.2.4.min.js%22%3E%3C %2F script%3E" data - mce - resize = "false" data - mce - placeholder = "1" class = "mce-object" width = "20" height = "20" alt = "&lt;script&gt;" title = "&lt;script&gt;" ? --> '; }

Now, this is wrong for many reasons:

It’s not possible for other developers to deque assets

Not being part of $wp_scripts global variable, conflicts can appear since another plugin can load a local version of jQuery

It’s not best practices and should not be used unless you really know what you’re doing

To remove a script added like the above, you can do it by removing the entire hook from executing:

1 2 3 4 add_action ( 'wp_print_footer_scripts' , 'wra_remove_wphead_filter' , 100000 ) ; function wra_remove_wphead_filter ( ) { remove_action ( 'wp_head' , 'pluginslug_add_script' , 10 ) ; }

We’re using the remove_action() function that WordPress provides. When removing actions, it’s best to remember:

The priority of the add_filter() declaration counts when doing remove_filter()

The remove_filter() function should be called on a hook after the add_filter() we want removed was added

In our particular case, when removing unused CSS/JavaScript files, one of the scripts was jetpack.css that for some reason was added in a particular way that wp_dequeue_style() didn’t work.

1 2 3 4 5 6 7 8 9 10 /** * This is the hack to concatinate all css files into one. * For description and reasoning see the implode_frontend_css method * * Super late priority so we catch all the registered styles */ if ( ! is_admin ( ) ) { add_action ( 'wp_print_styles' , array ( $this , 'implode_frontend_css' ) , - 1 ) ; // Run first add_action ( 'wp_print_footer_scripts' , array ( $this , 'implode_frontend_css' ) , - 1 ) ; // Run first to trigger before `print_late_styles` }

For some reason I couldn’t dequeue the jetpack.css file, however, there was a hook inside the Jetpack implode_frontend_css() function that allowed us to not load that particular file:

1 2 3 4 5 // Jetpack add_action ( 'jetpack_implode_frontend_css' , 'wra_remove_jetpack' ) ; function wra_remove_jetpack ( ) { return false ; }

The entire plugin

That’s about it. You can copy / paste the entire plugin from here and make modifications to it to better suit your WordPress site.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 & lt ; ?php /* * Plugin Name: WP Remove Assets * Plugin URI: https://www.cozmsolabs.com * Version: 0.1 * Description: Filter particular scripts and style to load in posts or pages that don't need it. * Author: Cristian Antohe * Author URI: https://www.cozmoslabs.com/ */ // remove script handles we don't need, each with their own conditions add_action ( 'wp_print_scripts' , 'wra_filter_scripts' , 100000 ) ; add_action ( 'wp_print_footer_scripts' , 'wra_filter_scripts' , 100000 ) ; function wra_filter_scripts ( ) { #wp_deregister_script($handle); #wp_dequeue_script($handle); wp_deregister_script ( 'bbpress-editor' ) ; wp_dequeue_script ( 'bbpress-editor' ) ; // Device Pixels support // This improves the resolution of gravatars and wordpress.com uploads on hi-res and zoomed browsers. We only have gravatars so we should be ok without it. wp_deregister_script ( 'devicepx' ) ; wp_dequeue_script ( 'devicepx' ) ; if ( ! is_singular ( 'docs' ) ) { // the table of contents plugin is being used on documentation pages only wp_deregister_script ( 'toc-front' ) ; wp_dequeue_script ( 'toc-front' ) ; } if ( ! is_singular ( array ( 'docs' , 'post' ) ) ) { wp_deregister_script ( 'codebox' ) ; wp_dequeue_script ( 'codebox' ) ; } } // Jetpack add_action ( 'jetpack_implode_frontend_css' , 'wra_remove_jetpack' ) ; function wra_remove_jetpack ( ) { return false ; } // remove styles we don't need add_action ( 'wp_print_styles' , 'wra_filter_styles' , 100000 ) ; add_action ( 'wp_print_footer_scripts' , 'wra_filter_styles' , 100000 ) ; function wra_filter_styles ( ) { #wp_deregister_style($handle); #wp_dequeue_style($handle); //no more bbpress styles. wp_deregister_style ( 'bbp-default' ) ; wp_dequeue_style ( 'bbp-default' ) ; // download monitor is not used in the front-end. wp_deregister_style ( 'wp_dlmp_styles' ) ; wp_dequeue_style ( 'wp_dlmp_styles' ) ; if ( ! is_singular ( 'docs' ) ) { // the table of contents plugin is being used on documentation pages only wp_deregister_style ( 'toc-screen' ) ; wp_dequeue_style ( 'toc-screen' ) ; } if ( ! ( is_page ( 'account' ) || is_page ( 'edit-profile' ) ) ) { // this should not be like this. Need to look into it. wp_deregister_style ( 'wppb_stylesheet' ) ; wp_dequeue_style ( 'wppb_stylesheet' ) ; } if ( ! is_singular ( array ( 'docs' , 'post' ) ) ) { wp_deregister_style ( 'codebox' ) ; wp_dequeue_style ( 'codebox' ) ; } } // list loaded assets by our theme and plugins so we know what we're dealing with. This is viewed by admin users only. add_action ( 'wp_print_footer_scripts' , 'wra_list_assets' , 900000 ) ; function wra_list_assets ( ) { if ( ! current_user_can ( 'delete_users' ) ) { return ; } echo '

List of all scripts loaded on this particular page.

‘; echo ‘

This can differ from page to page depending of what is loaded in that particular web page.

‘; // Print all loaded Scripts (JS) global $wp_scripts; wra_print_assets($wp_scripts); echo ‘

List of all css styles loaded on this particular page.

‘; echo ‘

This can differ from page to page depending of what is loaded in that particular page.

‘; // Print all loaded Styles (CSS) global $wp_styles; wra_print_assets($wp_styles); } function wra_print_assets($wp_asset){ $nb_of_asset = 0; foreach( $wp_asset->queue as $asset ) : $nb_of_asset ++; $asset_obj = $wp_asset->registered[$asset]; wra_asset_template($asset_obj, $nb_of_asset); endforeach; } function wra_asset_template($asset_obj, $nb_of_asset){ if( is_object( $asset_obj ) ){ echo ‘

‘; echo ‘ Number: ‘; echo $nb_of_asset . ‘ ‘; echo ‘ Handle: ‘; echo $asset_obj->handle . ‘ ‘; echo ‘ Source: ‘; echo $asset_obj->src . ‘ ‘; echo ‘ Dependencies: ‘; foreach( $asset_obj->deps as $deps){ echo $deps . ‘ / ‘; } echo ‘ ‘; echo ‘ Version: ‘; echo $asset_obj->ver . ‘ ‘; echo ‘

‘; } }

A better way for plugins to include CSS/JS files

Plugins load CSS rules/JS files globally for a variety of reasons. The main reason is that as a developer, there’s no standardized way of finding out if your shortcode is used on a page or not. So we load all assets globally.

Also, it’s what WordPress.org recommends you do on the Codex as an example.

With so many examples of loading scripts globally, it’s easy to understand why almost any WordPress site loads 15+ resources for each page when only needing a few of them.

Load assets only if shortcode is executed

We’ve been using this technique on almost all our plugin assets for quite some time.

Basically, we have a global variable that gets initiated in our shortcode, and if it’s set and true, we’re loading our assets like so:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 // create a shortcode that registers a shortcode function cozmoslabs_some_shortcode ( $atts ) { global $cozmoslabs_some_shortcode ; $cozmoslabs_some_shortcode = true ; return 'We have a shortcode' ; } add_shortcode ( 'cozmoslabs_short' , 'cozmoslabs_some_shortcode' ) ; function cozmoslabs_enqueue_script ( ) { global $cozmoslabs_some_shortcode ; if ( isset ( $cozmoslabs_some_shortcode ) & amp ;& amp ; $cozmoslabs_some_shortcode == true ) { wp_enqueue_script ( 'my-js' , 'filename.js' , true ) ; } } add_action ( 'wp_footer' , 'cozmoslabs_enqueue_script' , 90000 ) ;

Unfortunately, there are drawbacks to this as well:

the scripts need to be added to wp_footer with a late priority because if we add them to wp_enqueue_scripts , our global variable has a good chance not to be set

with a late priority because if we add them to , our global variable has a good chance not to be set if you need something added in the header of the site, this won’t work

in wp_enqueue_script() you have to set $in_footer to true

Conclusions

WordPress sites are made up of PHP, HTML, JS, and CSS code. If you want to remove unused CSS JS files in WordPress is really not that complicated.

The bigger issue here is the way assets are added in WordPress themes and plugins, a lot of them being added globally regardless of whether they are needed or not.

Other solutions to this problem can include combining assets, but even then, having a large CSS and JS file will slow down the page load time of your WordPress site, particularly on mobile devices because it has to render all those CSS files and execute all that JS code.

Content delivery networks (CDN) also help, but you’re still loading unneeded resources. This can also help you improve your site rankings in Google SERPs.

I can’t think of an automated solution since each site is different, however, there are plugins like WP Asset Clean Up and PurifyCSS and tools for minified JS and CSS code like WP Rocket cache plugin or PurgeCSS. They don’t have the flexibility to target entire custom post types, for example, however, it’s a lot easier to use for non-technical users then writing your own conditional rules.

If you have other suggestions on how plugins can load CSS/JS in a more mindful way and not globally, I would love to have your input in the comment section.