How to use WP Asset CleanUp for removing Unused CSS and JavaScript Files

WordPress Plugins & Themes

Google back in 2010 revealed that they would be using the site speed in web search ranking. At times, there are situations when you are using a theme and a number of plug-ins that are enabled and run on the same page.

However, it is not necessary that you use all of them in order to improve the speed of your website and make the HTML source code cleaner well for debugging purposes. It is more advisable for you to prevent the styles and scripts from loading.

For example, you can decide to use the plug-in that will generate contact forms and loads its JS CSS files in all your pages instead of doing it only on the contact page. Not only will you be able to have your site rank higher, but you will also be able to make your visitors happier and will at last end up having more conversions if you put emphasis on making your page load faster.

In most cases, you will be using plugins and themes that are loading a good number of Javascript files and CSS and end up having a slow pace due to the number of HTTP requests and the JS errors due to the conflicts between the unoptimized JavaScript files that are loading on the same page.

For example, you might decide to use a plugin that generates contact forms and loads its assets in your entire website page instead of doing it only on the contact page.

The WP Asset CleanUp will offer you a method you can unload all your assets that are not required in your pages. It will be able to print all the files that are enqueued in WordPress and be able to decide the one that does not belong to that page.

Below are some of the benefits of using the WP Asset CleanUp

The server access log files will be small, much easier to go through, and able to take lesser space on your server.

  1. Lesser HTTP requests are loaded
  2. It reduced the HTML code of the real page. It gets better if the GZIP compression is enabled.
  3. It makes the HTML code easier to scan and find things.
  4. It eliminates possible conflicts between themes and plugins
  5. There is better performance score when you test your URL on websites such as Pingdom Website Speed Test, GTmetrix, PageSpeed Insights
  6. Google is more interested in your website since it would be much faster

During the time the WP Asset CleanUp was being written, you were unable to unload styles and scripts for pages, posts, homepage, and custom post types. Bulk unloading is also available. In case you are interested in unloading a script that is loading on the pages that belong to a specific post type or unload it anyplace.

The WP Asset CleanUp is only able to detect the scripts and styles that are enqueued into WordPress. The plugin is combined with a cache plugin that will be able to improve the WordPress loading speed. The WP Asset CleanUp will make things much better for both the developers and the visitors Removing the unused JS, CSS files in WordPress.

There are four major functions when you are interested in removing the unused CSS, JSS files in the WordPress front end.

  1. Wp-deregister_style($handle)
  2. Wp-deregister_script($handle)
  3. Wp-dequeue_ script ($handle)

// remove script handles we don’t need, each with their own conditions

add_action(‘wp_print_scripts’, ‘wra_filter_scripts’, 100000);

add_action(‘wp_print_footer_scripts’, ‘wra_filter_scripts’, 100000);

function wra_filter_scripts(){
#wp_deregister_script($handle);
#wp_dequeue_script($handle);

wp_deregister_script(‘bbpress-editor’);
wp_dequeue_script(‘bbpress-editor’);

// Device Pixels support
// This improves the resolution of gravatars and wordpress.com uploads on hi-res and zoomed browsers. We only have gravatars so we should be ok without it.

wp_deregister_script(‘devicepx’);
wp_dequeue_script(‘devicepx’);

if( !is_singular( ‘docs’ ) ){
// the table of contents plugin is being used on documentation pages only
wp_deregister_script(‘toc-front’);
wp_dequeue_script(‘toc-front’);
}

if( !is_singular( array(‘docs’, ‘post’ ) ) ){
wp_deregister_script(‘codebox’);
wp_dequeue_script(‘codebox’);
}
}

// remove styles we don’t need

add_action(‘wp_print_styles’, ‘wra_filter_styles’, 100000);
add_action(‘wp_print_footer_scripts’, ‘wra_filter_styles’, 100000);

function wra_filter_styles(){
#wp_deregister_style($handle);
#wp_dequeue_style($handle);

//no more bbpress styles.

wp_deregister_style(‘bbp-default’);
wp_dequeue_style(‘bbp-default’);

// download monitor is not used in the front-end.

wp_deregister_style(‘wp_dlmp_styles’);
wp_dequeue_style(‘wp_dlmp_styles’);
if( !is_singular( ‘docs’ ) ){
// the table of contents plugin is being used on documentation pages only
wp_deregister_style(‘toc-screen’);
wp_dequeue_style(‘toc-screen’);
}

if ( !( is_page( ‘account’ ) || is_page( ‘edit-profile’ )) ){
// this should not be like this. Need to look into it.
wp_deregister_style(‘wppb_stylesheet’);
wp_dequeue_style(‘wppb_stylesheet’);
}

if( !is_singular( array(‘docs’, ‘post’ ) ) ){
wp_deregister_style(‘codebox’);
wp_dequeue_style(‘codebox’);
}
}

The best part when it comes to doing this is that you are able to use the WordPress conditional tags to target a specific or an entire custom post type. It will provide you with the flexibility you require in order to load both the CSS/JS files where they are needed.

Conclusion

The WP Asset CleanUp plugin will be able to scan your page and detect all the assets that are uploaded. All you are required to do whenever you are editing the page or post is to select the ones you do not wish to load.

Article By:

Sarah Clarke is working as a professionally qualified WordPress developer at WordSuccor Ltd., a renowned firm providing WordPress Plugin Development Services at a very reasonable cost with a global reach. She loves to share her thoughts on WordPress and always looking for learning something new about it.

Scroll to Top