Lightweight themes like Astra, GeneratePress and Genesis load very less CSS and scripts on the site. This helps to remove the unused CSS and JavaScript errors in Google PageSpeed Insights tool and skyrocket the speed score. However, 99% of commercial WordPress themes combine multiple features and load heavy scripts and CSS. Whether you use lightweight or heavy theme, you still need lots of functionalities through plugin. Combining theme and plugins, the overall speed score will have an impact with every single source file on the site. In this article, we will explain how to remove unused CSS and JavaScript in WordPress to improve Google PageSpeed Insights score.
Related: Read 400+ free WordPress tutorials.
What is Unused CSS and JavaScript?
Let us explain this with a simple example. Contact Form 7 is one of the popular plugins for adding contact forms in WordPress sites. Generally, you need contact form in “Contact” page and maybe on few other pages. You will not use contact form on each blog post. However, the Contact Form 7 plugin will load CSS and JavaScript on each page and blog post in your site. It is a big problem when you have 1000 blog posts and all of them load contact form script / CSS without any need. These unnecessary CSS and scripts are called unused CSS and unused script.
Another good example is a WooCommerce store. You need WooCommerce styles and scripts only on pages like products, product archives, cart, checkout and shop. However, the plugin do not have any option to prevent loading of files on blog posts or pages.
Why this is s a Problem?
Unfortunately, almost all plugins will load resources on all pages of your site. This will impact the page loading speed heavily and reduce the speed score in tools like Google PageSpeed Insights. You will see the errors like below as opportunities, when testing the page URL in PageSpeed Insights.
Though the tool says this will not directly affect the performance score, it has huge impact on loading time. At this point, 30% score is for the blocking time and having unused CSS / JS and render blocking resources will pull down the score to bottom. In addition, some hosting companies will charge based on the bandwidth usage. Loading unnecessary CSS / script files on your site will increase the bandwidth usage multifold. Therefore, it is necessary to identify the unused CSS and JavaScript and remove them from loading on all pages.
How to Identify Unused CSS and JavaScript?
You have to understand what is causing the unused resources to load on your pages. As explained above, you do not need to load contact form, online store or review plugins on all the pages. However, the entire task is more complicated than you think.
- First, purge the caching and disable the caching plugin on your site. Now go to Google PageSpeed Insights tool and check the speed score.
- Click on the “Remove unused JavaScript” and “Remove unused CSS” messages to expand them. Google will show you the list of resources with the transfer size and potential savings.
- External code – As you can see in the above screenshot, “pagad2.googlesyndication.com” is from Google AdSense. You can’t remove unused CSS and JavaScript loaded from third-party websites. These scripts are loaded on your site with advertisement, Analytics, YouTube video embed or social sharing plugins. So, you have to understand these external resources will impact page speed and you have no control over it unless you decide to remove them. check out the article on AdSense Vs Page Speed to understand advertisements will kill your page speed.
- Plugin and theme files – we will explain how to remove them in the next section.
- Inline CSS and scripts – Google PageSpeed Insights tool generally do not display them. You have to manually identify and remove them from your site. If a plugin inserts inline CSS/script, then disable the plugin files or avoid adding custom inline code. Remember, there is a big problem with heavy themes that use style.css with thousands of lines. You have to manually remove the code inside the style.css file to reduce the size.
In summary, it is easy to remove unused CSS and JavaScript if they are loaded as separate files. Loading huge style.css file or inline CSS can’t be removed unless you manually review them and delete unused codes. Alternatively, you may need to find a lightweight theme or plugin to get rid of the issue. After you find what is causing the error, you can enable caching plugin back on your site.
How to Remove Unused CSS and JavaScript?
There are two ways you can use to remove unused CSS and JS files when the page loads on the browser. First option is to use premium plugins like WP Rocket and the second option is to use free plugin. We will explain both methods in detail, so that you can check and choose the easy one for you.
Remove Unused CSS with WP Rocket
WP Rocket is the most popular caching plugin for WordPress which offers super simple user interface. In order to improve the page loading time, you have to purchase the plugin and update it to the latest version (above 3.9).
- Go to “Settings > WP Rocket” menu in your WordPress admin panel.
- Click on “File Optimization” tab and scroll down to bottom of “CSS Files” section.
- Check “Optimize CSS delivery” check box to view two buttons for enabling “Remove Unused CSS” and “Load CSS Asynchronously”. You can use one of these options at a time and not both.
- Select “Remove Unused CSS” option and confirm “Activate Remove Unused CSS” option from the warning message.
- The plugin will start processing the CSS in your site which may take several minutes to complete.
- After finishing, you will see a success message “Remove Unused CSS is complete!”.
- Click on “Save Changes” button at the bottom of the page to regenerate the cached files.
Make sure to test your site throughly to confirm all post types are working properly after removing unused CSS. If you find any problem, you can exclude the CSS or JavaScript in the exclusion box. If remove CSS is not working for your site, you can also try “Load CSS Asynchronously” option to generate critical CSS and avoid render blocking CSS issues.
Remove Unused JavaScript with WP Rocket
Unlike CSS, removing JS is not possible with WP Rocket plugin. However, you can enable “Load JavaScript deferred” and “Delay JavaScript execution” options under “File Optimization > JavaScript Files” section. This will delay both internal and external codes and eliminate render blocking JavaScript problems.
Make sure to test your site is working fine after enabling these options. This will boost your page speed score nearer to 100 in Google PageSpeed Insights tool as delaying JS will reduce total blocking time which is 30% weightage in performance score calculation.
Using Asset CleanUp Plugin to Remove Unused CSS and JavaScript
When you have plenty of plugin and theme files loaded, follow the below instructions to remove them on the pages where you do not need them.
- Login to your WordPress admin dashboard and navigate to “Plugins > Add New” section.
- Type “asset cleanup” in the search box and locate the plugin “Asset CleanUp: Page Speed Booster”.
- Click on “Install Now” button and then activate the plugin.
- After activating the plugin, we recommend you to read the documentation shown. This is necessary to use the plugin properly.
Plugin Settings
The plugin has numerous settings which we will not explain this article. If you are using caching plugin like WP Rocket on your site then make sure not to use any other functions other than disabling unused scripts and CSS. Go to “Asset CleanUp > Settings” menu and then to “Plugin Usage Preferences” tab. Here you can decide, the way you want to view and disable the unused CSS / scripts on your pages.
- Manage in the Dashboard – enable this option. This will help you to analyze the page from the post editor within the admin dashboard.
- Manage in the Front-end – if you want to analyze the page from the front-end browser, then enable this option. Otherwise, you can disable this. Remember, front-end analysis can only be done by the logged in admin user. Users visiting your site will not get impacted during your checking.
- Assets List Layout – click the dropdown and select “All Styles & Scripts > Grouped by location (themes, plugins, core & external). This will help you to view the resource files grouped in different category.
- Hide WordPress Core File From The Assets List? – enable this option so that you do not mess up with core WordPress files.
Now, go to “Test Mode” tab and enable “Enable Test Mode” option. This will help you to check the site is breaking after disabling the scripts and CSS before making it public.
Click on “Update All Settings” at the bottom to apply your changes.
Remove Unused CSS and JavaScript
Depending upon the settings, you can either analyze the page from the editor or from the front-end.
- Disabling Scripts and CSS from Editor – Edit any of the existing post to go to the post editor. Scroll down to the bottom to view the meta boxes from Asset CleanUp plugin. View all CSS and scripts loaded on that page and disable the resources you do not need.
- Disabling Scripts and CSS from Frontend – If you have enabled “Manage in the Front-end” option, open any of your post on the browser front-end. Remember, you should be logged in to you WordPress admin panel in another browser tab. At the bottom of the page, you will see similar meta boxes disable the resources loaded on the page.
In both cases, you will see the all the CSS and JavaScript files loaded on the page grouped as per your settings.
Expand each group and view the details of the files loaded by your plugins and themes. For each CSS and JS file, you have multiple options as shown in the below picture.
- Unload the resource on the page.
- Disable the file site-wide
- Disable on all posts (it will continue to load on pages and custom post types).
- Few other options like using RegEx is available only in pro version of the plugin.
After disabling the files, update your post for the changes to be effective on the site.
Viewing Disabled Files and Removing Test Mode
- Go to “Asset CleanUp > Bulk Changes” section.
- Navigate to “Posts, Pages & Custom Post Types” tab and select “post” from the dropdown.
- Here you can view all the disabled files on your site.
- Select “Remove bulk rule” checkbox and click on “Apply changes” button at the bottom to enable the file loading again.
- Alternatively, you can edit any posts in post editor and modify the loading behavior of the files.
Check your site and if everything is fine go back to the settings page and disable “Test Mode” option. This will make the changes live to all users visiting your website. Similarly, you can disable the CSS and JS files on custom post types, pages and product pages by editing them. Check your pages with Google PageSpeed Insights tool to see if the errors are removed.
Final Words
We hope the article is useful to remove unused CSS and JavaScript files from your site and improve the Google PageSpeed score. We recommend using WP Rocket as it is easy to remove CSS and delay external JS with few clicks. If you are using the free Asset Cleanup plugin, it will only help you to disable loading of CSS and JS file from plugins and themes. You have to avoid using third-party codes and manually remove unnecessary codes inside main style.css file. When manually editing files, makes sure using child theme to update the stylesheet so that you will not lose the changes whenever updating the theme.
7 Comments
Leave your reply.