One of the most annoying things in WordPress is plugins and themes that load their own scripts and style files (CSS & JS) without checking or any condition determining if there’s even a need to load them. For example, a situation where you installed a plugin that is only relevant to the WordPress admin interface but loads its scripts also in the frontend (on the website pages itself).
This is just one example, plugins arbitrarily load these assets without conditions creating a situation where JavaScript and CSS files are loaded on every single page of your website. When it comes to purchased themes, the situation is even worse. These themes load a large number of assets throughout the site indiscriminately and without any check if there’s even a need for them.
Developers of these themes try to target as wide an audience as possible, and therefore these themes contain many options and many types of elements, and hence a lot of JavaScript and CSS files that are not necessarily needed.
Since the theme developer does not know which elements the website owner intends to use, he loads all the assets so that the functionality of the theme will work for every element in the theme that the website owner decides to use.
Fortunately, WordPress offers a very simple way to remove unnecessary assets using the functions wp_dequeue_style and wp_dequeue_script. Removing unnecessary JavaScript and CSS files is a necessary action in the process of optimizing performance and improving the loading time of WordPress sites. Let’s see how to do it.
Find the Asset Identifier (ID)
The first step you need to take is to find the unique identifier of that CSS (or script) file you want to remove. There are several ways to do this, here are two of them:
- Check the
<style>or<script>tag - Find the source code responsible for loading the script
The simplest way to find the identifier is to check the <style> or <script> tag in HTML itself. For example, suppose you want to cancel the loading of the CSS file of the Contact Form 7 plugin. A look at the HTML will show us the following markup:
<link rel='stylesheet' id='contact-form-7-css' href='https://savvy.co.il/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=5.9.3' type='text/css' media='all' />It can be seen that the ID of that file is contact-form-7-css. Simple? Almost… This is not the real ID of that file because WordPress adds the string -css to the original ID of CSS files. In the context of scripts, WordPress will add the string -js.
From here, the original ID of the discussed file is contact-form-7. If we look at the JS file that this plugin loads we will see the following code:
<script type="text/javascript" src="https://savvy.co.il/wp-content/plugins/contact-form-7/includes/js/index.js?ver=5.9.3" id="contact-form-7-js"></script>Assuming it is already clear that the original ID of this file is also contact-form-7 and these are the IDs you need to remember in order to prevent the loading of these files.
In this case, the IDs of the CSS file and the JavaScript file are the same, but this is not always the case. Either way, now that we have the identifier of these files, let’s see how to prevent their loading…
Depending on the version of the plugin you are using, it may load additional files. You can easily find these by looking at the HTML and the folder name from which such a file is loaded.
How to Prevent Loading the Files?
Removing the files is very simple once we have their identifier. If we continue with the Contact Form 7 example, the identifier for both the JavaScript file and the CSS file was the same, named contact-form-7. Therefore, to remove them, we need to add the following code to the functions.php file:
// prevent contact form 7 script & style from loading
function sv_disable_scripts_styles() {
wp_dequeue_style('contact-form-7');
wp_dequeue_script('contact-form-7');
}
add_action('wp_enqueue_scripts', 'sv_disable_scripts_styles', 100);Note that for style files we use the function wp_dequeue_style and for scripts we use the function wp_dequeue_script.
That’s largely it. It’s important to note, that in the case of the Contact Form 7 plugin specifically, there is a filter that the plugin developer added to spare you the process. You can prevent loading those assets simply by adding the following code to the functions.php file:
function removeCf7Scripts() {
add_filter( 'wpcf7_load_css', '__return_false' );
add_filter( 'wpcf7_load_js', '__return_false' );
}
add_action( 'wp', 'removeCf7Scripts' );
Be aware, these actions to prevent loading the assets, whether through the filter or manually as described initially, will remove these files from every page on the site.
In most cases, you will want to remove them only on specific pages, so you should use some condition. For example, the following sample will remove the files of Contact Form 7 from all pages except those using the page template called contact-template.php:
function sv_disable_scripts_styles() {
if ( ! is_page_template('contact-template.php') ) {
wp_dequeue_style('contact-form-7');
wp_dequeue_script('contact-form-7');
}
}
add_action('wp_enqueue_scripts', 'sv_disable_scripts_styles', 100);That’s it. If, by the way, you are interested in knowing how to load JavaScript and CSS files on WordPress sites, then take a look at the following post.
