Remove Unused CSS & JS Manually on WordPress

When testing a page in Google Page Speed Insights we often encountered warnings to remove unused CSS and JavaScripts on the opportunity list. They came from the CSS and JS of the plugins that we use. While modern plugins will only load their assets on the page/post that uses the plugin’s feature, most of the old plugins don’t.

Most plugins in the WordPress Repository loads their assets site wide, in all of our page or post. Contact Form 7 plugin is one of the popular plugin that does this. WordPress itself loads their native gutenberg block library CSS site wide. This is very unfortunate in terms of speed and website performance.

The good news is, we can remove them, selectively. There are plugins like Asset CleanUp and Perfmatters that will help to remove unused assets on selected page(s). If you don’t want to use plugin to do this and remove the unused CSS &JS files manually, you can find the steps and code snippets in this guide.

1. Identify Our Unused CSS & JS
   If you don’t know which CSS and/or JS that need to be remove, besides looking from the opportunity list on page speed insight, you can use chrome dev tools > show coverage  to identify which CSS & JS files that need to be removed. It was developed by Google to check how many unused bytes in a page for each of our CSS and JavaScript.
   
   
   Unused bytes are the size of the unused codes in our CSS and/or JavaScript. The red bar in the image above shows the unused bytes of each CSS and JavaScript. Ideally, if the unused bytes is more than 98%, we can safely remove them.
2. Identify the unused CSS & JS Handlers
   
   
   Open your page’s HTML source, you can find the lines of requests for CSS and JS like in the image above. The ID is the handler, minus the last “-css” (for CSS files) and “-js” (for JS files) suffix.
3. Remove Unused CSS & JS files in the Entire Site
   Removing the unused CSS & JS is relatively easy. We can use wp_dequeue and wp_deregister function to remove the enqueued stylsheets or JavaScript files. While usually using wp_dequeue is enough, sometime we often need to use wp_deregister function, or combination of both, to remove them.
   Now let’s say we need to remove the Gutenberg Block Library CSS and the Woocommerce Block CSS in the entire site. If you look at your page’s HTML source, the ID of Gutenberg Block Library CSS is “wp-block-library-css” and the Woocommerce Block CSS is “wc-blocks-style-css”, so the handler are “wp-block-library” and “wc-blocks-style”. *if you use page builders like Elementor, you will not need the Gutenberg block library CSS and Woocommerce Block CSS.
   The function to remove Gutenberg Block Library CSS and Woocommerce Block CSS them manually in the entire site is:
   

   function tw_unload_files() {
    
           wp_dequeue_style ( 'wp-block-library' );
           wp_dequeue_style ( 'wc-block-style' );
    
    }
    add_action( 'wp_enqueue_scripts', 'tw_unload_files', PHP_INT_MAX );

   As you can see on the above function, we use wp_dequeue_style. wp_dequeue_style is for CSS files. If you need to remove JavaScript files, use wp_dequeue_script.
   Just copy-paste the code snippet in your child theme or any code snippets plugins that you use, change the handlers to your unused CSS / JS handlers, and you’re done. Check the page’s HTML source (clear the cache if you use any caching plugins), you can see that they are both gone.
4. Remove Unused CSS & JS files on Selected Page/Post or Page Type
   Now let say you only need to remove them from your homepage only. The codes are similar, we just need to add the conditions. The function to remove Gutenberg Block Library CSS and Woocommerce Block CSS them manually from the homepage is:
   

   function tw_unload_files_homepage() {
    
           if ( is_front_page() ) {
                  wp_dequeue_style ( 'wp-block-library' );
                  wp_dequeue_style ( 'wc-block-style' );
           }
     
    }
    add_action( 'wp_enqueue_scripts', 'tw_unload_files_homepage', PHP_INT_MAX );

   is_front_page() is the WordPress conditional tag to target our homepage, it’s similar with is_home(). If you need to remove your unused CSS and JS files in other pages/post or page type, just change the conditional tag. You can find the guidance and the list of WordPress conditional tags in this page.
5. Only load CSS & JS files on Selected Page/Post or Page Type
   This one will be very useful for you. Let say you only use the Gutenberg Block Library CSS in your single post (post articles) only, and you don’t want it load in other page and/or page type, similar with the code snippet above, but you need to add extra ‘not’ statement on the conditional tags.
   

   function tw_unload_files_except_single_post() {
    
           if ( !is_singular('post') ) {
                  wp_dequeue_style ( 'wp-block-library' );
           }
     
    }
    add_action( 'wp_enqueue_scripts', 'tw_unload_files_except_single_post', PHP_INT_MAX );

   is_singular('post') is the WordPress conditional tags for our single post. As you can see, the code has an exclamation mark (!), it means if it’s not in single post, the Gutenberg Block Library CSS will be removed. Change the conditional tag to everything that you need.
   

That’s it! Easy right? Mastering wp_dequeue / wp_deregister and WordPress conditional tags will help you get rid of the Removed Unused CSS and JavaScripts warnings, and optimize your site further. Remember, wp_dequeue_style and wp_deregister_style is for removing CSS files, and wp_dequeue_script and wp_deregister_script is for removing JavaScript files.

You can find more comprehensive tutorial of how to optimize your site’s core web vitals here.

Good luck!

---