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:
- How plugins load CSS JS files
- See what scripts are getting loaded on our site
- Remove unused CSS JS files in WordPress
- Remove scripts that won’t work with wp_dequeue_script
- The entire plugin
- A better way for plugins to include CSS/JS files
80% of your CSS JS files probably don’t do anything 80% of the time
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.
What this does is it loads the
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 code inside this gist: https://gist.github.com/sareiodata/77796b5ed8108a516e82b888cb78bdae
Before we can remove unused CSS JS files in WordPress, we’ll first look at what get’s loaded.
WordPress uses two global variables to store scripts and 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 it self) as well as the ones currently loaded on our page.
We’re mainly interested in the ones that get loaded.
We’re hooking 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.
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_scriptsto 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, however it’s nice to see this information listed to get an idea as to why some files are loaded.
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 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:
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
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.
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.
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_footerwith a late priority because if we add them to
wp_enqueue_scripts, 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
wp_enqueue_script()you have to set $in_footer to true
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.
Subscribe to get early access
to new plugins, discounts and brief updates about what's new with Cozmoslabs!