Remove Unwanted Stylesheet and JavaScript In WordPress

Most of the WordPress plugin that we installed adds JavaScript and CSS on each page load making the site slower and slower as we add more plugin. Suppose we install 5 plugin and each one of them add one JavaScript file and one CSS file which is a total of 10 HTTP requests. In this articles, we will try to show you how reduce or completely remove these requests by preventing plugin’s CSS and JavaScript to load on ever pages.

Caution: Removing CSS and JavaScript may lead to misbehave of the plugin

We will using Contact Form 7 Plugin in our example.

Disable CSS Stylesheets

To disable the CSS, first we have to know the handle of the Stylesheets which can be found by searching for wp_enqueue_style in the plugin source code.

The CSS handle for Contact Form 7 is contact-form-7 which is found in the wp_enqueue_style function. The below code was found in /contact-form-7/includes/controller.php’ of Contact Form 7

wp_enqueue_style( 'contact-form-7',
	wpcf7_plugin_url( 'includes/css/styles.css' ),
	array(), WPCF7_VERSION, 'all' );

Now we are going to remove the CSS by taking advantage of the above handle. To get it done add the following code to your theme’s function.php file or Site-Specific Plugin.

function remove_css(){
	wp_dequeue_style('contact-form-7');
}
add_action('wp_print_styles', 'remove_css', 99);

You can remove more than one CSS file using the same function above just by adding their handle.

function remove_css(){
	wp_dequeue_style('contact-form-7');
	wp_dequeue_style('plugin-css-handle');
	wp_dequeue_style('plugin-css-handle');
}
add_action('wp_print_styles', 'remove_css', 99);

Disable JavaScripts

For JavaScript also, we need to find the handle for it. The function name that we need to find is wp_enqueue_script. In Contact Form 7 both the CSS and JavaScript handle is contact-form-7. For JavaScript you need to add the following code

function remove_scripts(){
	wp_dequeue_script('contact-form-7');
	wp_dequeue_script('plugin-script-handle');
	wp_dequeue_script('plugin-script-handle');
}
add_action('wp_print_scripts', 'remove_scripts', 99);

Load CSS And JavaScript Files On Specific Pages

As mentioned earlier, removing of these files(CSS and JavaScript) may lead to malfunctioning of the plugin. But since we don’t need them to load on every single pages. So we will create a function that will make these files load only on specific page that is required.

Load On ‘contact’ Page

//Load CSS only on 'contact' page
function remove_css(){
	if(!is_page('contact')){
		wp_dequeue_style('contact-form-7');
	}
}
add_action('wp_print_styles', 'remove_css', 99);

//Load Script only on 'contact' page
function remove_scripts(){
	if(!is_page('contact')){
		wp_dequeue_script('contact-form-7');
	}
}
add_action('wp_print_scripts', 'remove_scripts', 99);

Load On Homepage

//Load CSS on Homepage
function remove_css(){
	if(!is_home()){
		wp_dequeue_style('contact-form-7');
	}
}
add_action('wp_print_styles', 'remove_css', 99);

//Load JavaScript on Homepage
function remove_scripts(){
	if(!is_home()){
		wp_dequeue_script('contact-form-7');
	}
}
add_action('wp_print_scripts', 'remove_scripts', 99);

Hope that the above article have helped you to remove unwanted CSS and JavaScript from your WordPress site. In the next article we are going to post about the different CSS and JavaScript removing function of different plugin. Since many plugin have different technique to remove these files. If you want to get notify of the new article, please feel free to subscribe to our email newsletter.