Related: Read 400+ free WordPress tutorials.
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.
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.
- 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.
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 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.
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.
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.
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.
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.
Great post thanks! You would kind of hope that there would be a plugin that does everything in one go to save installing and trying different settings…maybe one day!!
Very useful information, it helps to reduce page loading time for my website. Thank you.
Many thanks for this. I have tried a lot to modify the theme to avoid the unused js & css. This plugin will save my time a lot from now on.
It was a good article
Thanks for let me know about this
I use ocean wp as a theme but i think it is so heavy
Thanks for listing this awesome plugin, may have missed it. This is a must try plugin i feel, as most of time it is complained by sites like pingdom or speed test