How to Remove Unused CSS JS Files in WordPress

remove unused css js files in WordPress
Cristian Antohe
Last Updated: 23/10/23

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’ve probably got a reliable and fast host, enabled caching, optimized your images, and removed any WordPress plugins 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 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 years 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:

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 choose 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.

How to Remove Unused CSS JS Files in WordPress

1. See What Scripts are Getting Loaded on Our Site

In order to remove unused scripts, we should first find out what exactly gets loaded by the WordPress theme and plugins.

You can do that simply by looking at the source code, making a list of files, and then searching where exactly they get loaded within each plugin. While this approach does the job, there are much better solutions out there, so keep reading

Remove unused css js files in WordPress

2. List All Loaded Scripts with wp_enqueue_script

First things 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 code inside this gist.

Before we can remove unused CSS JS files in WordPress, we’ll first look at what gets loaded.

WordPress uses two global variables to store scripts and styles:

  • $wp_scripts;
  • $wp_styles;

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 itself) as well as the ones currently loaded on our page.

We’re mainly interested in the ones that get loaded.

We’re looking into the wp_print_footer_scripts hook with a very high priority to make sure all scripts finish loading before listing them.

Also, this listing gets displayed only if you’re a logged-in administrator. So your users or search engines will never see the listing.

The wra_print_assets and wra_asset_template will be listing:

  • the current number of the CSS/JS file;
  • the handle – this is the unique name used by wp_enqueue_scripts to load a script just once;
  • source – the location of the file;
  • dependencies – some files require other libraries, like jquery;
  • version – the current version of the CSS/JS file.

Going forward, we’ll only need the handle of the CSS/JS files, but it is nice to see this information listed to get an idea as to why some files are loaded.

3. Remove Unused CSS JS Files in WordPress

There are 4 main functions when you want to remove unused CSS JS files in WordPress front-end:

You can use WordPress conditional tags to target a particular page or an entire custom post type

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.

Remove scripts that won’t work with wp_dequeue_script

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.

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 practice and should not be used unless you really know what you’re doing.

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

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 to be 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.

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. See the function wra_remove_jetpack() inside the plugin code.

4. The Entire Plugin

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

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:

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 of not being 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.

Conclusion

WordPress sites are made up of PHP, HTML, JS, and CSS code. If you want to remove unused CSS JS files in WordPress it’s 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 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, they are a lot easier to use for non-technical users than 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.

32 thoughts on “How to Remove Unused CSS JS Files in WordPress

    Hey Cristian,

    Regarding your issue with the Jetpack actions you’re unable to remove… These are added as methods of a class instance, so to remove them, you need to get a reference to the class instance first.

    Fortunately, Jetpack provides a way to retrieve that instance through the badly named `Jetpack::init()` method: https://github.com/Automattic/jetpack/blob/257d473f022f2b75fe45719c22d2f655e3eafdee/class.jetpack.php#L308-L319

    So, to remove these actions, something like the following should work:

    https://gist.github.com/anonymous/8d6face1e4161172cd6d655ce739ba04#file-gistfile1-txt

    Reply

    Thanks for this tutorial. Exactly what I was looking for to get my site faster.

    Reply

    There’s actually no need to create a global variable (and you shouldn’t) if you want to only load scripts/styles on pages where the shortcode is used. One method is to use wp_register_script() to register the script in the wp_enqueue_scripts hook, and then to use wp_enqueue_script(‘script-hook’) in the plugin callback. The script will then only be loaded if the plugin callback is called.

    Reply

    What is needed is a campaign to get every plugin owner to improve their plugins so that scripts and css files are only loaded if they are going to be used.

    Reply

    With http2 combining multiple static files into one is no longer necessary and a bad idea. However, your point about the processing overhead of unused CSS and JS files is valid.

    Reply

    I’m gone to convey my little brother, that he should also go
    to see this web site oon regular basis to take updated from hottest information.

    Reply

    I Used Genesis Child Theme.
    I have Many Problems Of Java Script & inline CSS.
    How To Solve It Please

    Reply

    I am curious, where will the debug message gets output? Is it to the browser console?

    Reply

    No. Directly after your footer if you’re logged in as an administrator.

    Reply

    I have installed a plugin unused assets cleaner but it not work properly… is there any plugin to remove unused css and js codes…?

    Reply

    Fantastic plugin concept, this is going in my WP performance tool belt. I could only find partial snippets on Stackoverflow which addressed this unused asset issue. So thanks Cristian!

    I think I found a script that can’t be removed using the methods outlined in this article, and I would be curious to hear your feedback.

    I’ve been trying to deregister/dequeue an asset from the Visual Composer page builder plugin, as it is causing some render-blocking and is also performing a non-performant animation right at page load.

    The asset is registered in this function:

    protected function shortcodeScripts() {
    wp_register_script( ‘vc_jquery_skrollr_js’, vc_asset_url( ‘lib/bower/skrollr/dist/skrollr.min.js’ ), array( ‘jquery’ ), WPB_VC_VERSION, true );
    }

    But it is never enqueued as far as I can tell. When I deregister and dequeue it, it is removed from the list of assets displayed below the footer, but when I view source the file is still being loaded and it is still running on page load.

    Ideas?

    Reply

    I can not remove unused CSS from my site https://www.fileour.com/ without much effort. Please do I have such a plugin? Automatically remove the unused css from my site. Remember I’m using the Autoptimize WordPress plugin. I’ll be very grateful to you.

    Reply

    Thanks for this tutorial. Good post with exactly what I was looking for to get my site faster. Concerns its a bit technical

    Reply

    Wow.. This just helped me to speed up my wordpress site.

    Reply

    But what i need to do with the “wp_remove_assets.php” file? where to put it??

    Reply

    Thanks this helped me to work my site better.

    Reply

    I have lot’s of unused css and javascript in my site. I don’t want to add another plugin to my website, I just want to remove it manually. Thanks for this tutorial!

    Reply

    Please can you explain through a video.

    Reply

    i facing loading spped issue in my blog bt after follow this post my blog loading speed is fast thankyou so much sharing this awesome infomation very useful.

    Reply

    Thank You lot’s of Support I really Like You

    Reply

    My website speed facing many speed issue, with your help my speed issue solved, thank you so much you make my day.

    Reply

    Add this to your plugin inside “function wra_list_assets()” before first ECHO to see if your page uses Elementor.

    [code]
    global $post;
    if( \Elementor\Plugin::$instance->db->is_built_with_elementor($post->ID)) echo ‘ Elementor’;
    [/code]

    But I’m not really clear then how to block or allow Elementor js and CSS. Can you relate it to JetPack or BB so I can see an example?

    Reply

    CSS is making the website a little bit slower, but there are lots of cssand javasript minifying plugins available in WordPress, however you can checkout hindi content related to tech @ helpmebro.in

    Reply

    Hello Cristian Antohe Sir,

    i facing loading spped issue in my website but after follow this post my blog loading speed is fast thank you very much sharing this valuable infomation
    Check My blog speed

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.