Related: Read 300+ free WordPress tutorials.
Let us explain this with a simple example. Contact Form 7 is one of the popular plugins for adding contact forms on your site. Generally, you need contact form on your “Contact” page and maybe on few other pages. You will not use contact form on each blog post.
Another good example is a WooCommerce store. You need the WooCommerce styles and scripts only on the shop pages like products, product archives, cart, checkout and shop. However, the plugin do not have any option to prevent loading of the files on blog posts or pages.
Why this is s a Problem?
Unfortunately, almost all plugins will load the 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 you test the page URL in PageSpeed Insights.
You have to understand what is causing the unused resources to load on your pages. As explained above, there are some easy guesses like contact form, online store or review plugins are not required 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 – these are not displayed in the PageSpeed tool. You have to manually identify and remove them from your site. If a plugin inserts inline CSS/script, then disable the plugin files. 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.
After you find what is causing the error, you can enable caching plugin back on your site.
Install Asset CleanUp Plugin
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.
As explained, the plugin 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 removed unnecessary codes inside main style.css file. We recommend using child theme to update the stylesheet so that you will not lose the changes whenever updating the theme.