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
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_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, 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_scriptsglobal 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 doingremove_filter(); - The
remove_filter()function should be called on a hook after theadd_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_footerwith a late priority because if we add them towp_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_footerto 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.
Subscribe to get early access
to new plugins, discounts and brief updates about what’s new with Cozmoslabs!
Source: https://www.cozmoslabs.com/58990-remove-unused-css-js-files-in-wordpress/
