Remove unused Wordpress stylesheets and scripts - Just code it!

 

Just have found a good way to remove unnecessary css and js links on your website header. If you aren't familiar with a good page load auditor, you might visit Gtmetrix.com, Pingdom.com, and Google Page Speed to check your site's performance.

Unused CSS and JS scripts makes your site's page load so heavy and sometimes it turns over 10 to 30 seconds to display your frontend on the browser. Thus, this way could also give you more idea on how do you manage your site's performance. 

I have tried several times the use of wp_dequeue_style() functions both in my child and parent theme but didn't worked. However, I never liked contact form 7 to run out in my front-end since before I get into Wordpress platform so I often removed it by adding code define( 'WPCF7_LOAD_CSS', false ) into wp-config.php just below define( 'WP_DEBUG', false ). So let's get started.

You must first check the running css on your front-end on browser element inspector. On the header of your webpage, look for the id as you can see on the following screenshot.

After copying the stylesheet or script id, get it into function.php and do the same way with the code below:

Note: Always exclude "-css" or "-js" each id.

Removing CSS Stylesheet

	<?php
	add_action( 'wp_print_styles', 'deregister_cssstyles', 9999 ); function deregister_cssstyles() { global $wp_styles; $wp_styles->remove('dashicons'); // "-css" should not be included $wp_styles->remove('google-fonts-1'); // You can add more you want }

 

Removing JS Scripts

	<?php
	add_action( 'wp_print_scripts', 'deregister_jscripts', 9999 ); function deregister_jscripts() { global $wp_scripts; $wp_styles->remove('contact-form-js-extra'); // "-js" should not be included $wp_styles->remove('reviewmgr'); // You can add more you want }

 Codes above could be a primary altenative to standard way of dequeuing styles and scripts. Like this:

<?php
	//Remove Gutenberg Block Library CSS from loading on the frontend
	function smartwp_remove_wp_block_library_css(){
	wp_dequeue_style( 'wp-block-library' );
	wp_dequeue_style( 'wp-block-library-theme' );
	wp_dequeue_style( 'wc-block-style' ); // Remove WooCommerce block CSS
	}
	add_action( 'wp_enqueue_scripts', 'smartwp_remove_wp_block_library_css', 100 );

 However, the wp builtin function often don't works in parent theme.