If PageSpeed Insights tells you to reduce CSS/JavaScript, disabling WordPress plugins on specific pages can help.
Some plugins load across your entire website even when they’re not being used (WooCommerce and page builder plugins are notorious for this). Unfortunately, this adds CSS/JavaScript bloat which you can usually see in the coverage report of Chrome Dev Tools.
The classic example is disabling your contact form plugin everywhere but the contact page. However, there may be other plugins you can disable in certain areas of your site. And while disabling plugins on pages is a great start, there are more ways to reduce CSS and JavaScript.
1. Choose An Asset Unloading Plugin
Perfmatters, Asset CleanUp, Plugin Organizer, and Gonzales can all disable plugins on pages/posts. However, if you’re using WP Rocket or SiteGround Optimizer, Perfmatters addresses many parts of core web vitals with features not found in those plugins, like hosting fonts/analytics locally, bloat removal, and the script manager is also easy to use.
| Asset CleanUp | SG Optimizer | WP Rocket | FlyingPress | Perfmatters | |
|---|---|---|---|---|---|
| Script manager | ✓ | x | x | x | ✓ |
| Delay JavaScript | x | x | ✓ | ✓ | ✓ |
| Remove unused CSS | x | x | Inline | Separate file | Separate file |
| Critical CSS | x | x | ✓ | ✓ | x |
| Host analytics locally | x | x | x | x | ✓ |
| Smaller GA tracking code | x | x | x | x | ✓ |
| Host fonts locally | ✓ | x | x | ✓ | ✓ |
| Font-display: swap | ✓ | ✓ | ✓ | ✓ | ✓ |
| Exclude above the fold images | x | By class | By URL | By number | By number |
| Preload critical images | x | By class | By URL | By number | By number |
| Lazy load background images | x | Inline | Helper class | Helper class | CSS |
| Specify image dimensions | x | x | ✓ | ✓ | ✓ |
| Preload links | x | x | ✓ | ✓ | ✓ |
| Preload scripts/styles | x | x | x | x | ✓ |
| Disable XML-RPC | ✓ | x | x | x | ✓ |
| Disable Heartbeat | x | ✓ | ✓ | ✓ | ✓ |
| Move wp-login | x | x | x | x | ✓ |
| Change autosave interval | x | x | x | x | ✓ |
| Limit post revisions | x | x | x | x | ✓ |
2. Enable The Script Manager And Test Mode
In your Perfmatters settings, enable the script manager in the Assets tab.
Next, view any page on your site and go to Perfmatters → Script Manager.
Enable test mode. This prevents your website from breaking when disabling plugins by only showing changes to logged-in admins. Asset CleanUp also has a test mode, but I’m not sure if other asset unloading plugins do. If your plugin doesn’t have test mode, create a staging site. When you’re done disabling plugins, remember to deactivate test mode to publish changes.
Also enable display dependencies which shows you all plugins using jQuery (removing any jQuery-dependent plugins can speed up your website). You’ll be able to see this in the next step.
3. Disable Plugins On Pages/Posts
Head back to your script manager and you can see plugins loading on the page.
Common ways to disable plugins:
- Everywhere but posts (you only use a social sharing plugin on posts).
- Everywhere but pages (you only use a page builder plugin to design pages).
- Everywhere but current URL (you only use a contact form plugin on the contact page).
- RegEx (you only use your review schema plugin on posts containing “review” in the URL).
- You can also disable plugins on mobile devices as well as logged in + logged out users.
Here’s what disabling your social sharing plugin “everywhere but posts” looks like:
RegEx disables plugins based on URL patterns. For example, only loading a plugin in a certain category (screenshot below). Perfmatters also has documentation on using Regex for multiple categories, WooCommerce shop archive pages, LMS custom post types, and search result pages.
If you’re not using Gutenberg, you can disable wp-block-library which can save around 90kBs. If you do use wp-block-library, consider preloading it in your Perfmatters “preloading” settings.
This is why I don’t recommend page builders:
4. Check For Errors
If you enabled test mode, make sure you’re logged in to WordPress since only logged-in admins can view changes. Assuming you don’t see errors, deactivate test mode to publish the changes.
5. Test Impact On CSS/JavaScript Files
Open your site in Chrome Dev Tools and view your coverage report.
Rather than testing your site in PageSpeed Insights which can take 28 days to update, this shows a better view of your largest CSS/JS files and which plugins they’re loading from (shown in the URL). Other than plugins and page builders, third-party code is usually the biggest culprit.
6. Use Free Plugins To Unload Assets
Swift Performance has a plugin organizer found in Settings → Plugin Organizer. There are several rules to disable plugins based on the URL, whether it’s an Admin page, user role, etc.
Plugin Organizer is used by enabling selective plugin loading in the general settings. Now edit a page or post, and you can click each plugin to enable it (green) or disable it (red). You can also disable plugins by post type or WordPress managed URL. I’ve used Plugin Organizer, it’s alright.
Plugin Load Filter supports disabling plugins by post format type, custom post type, JetPack modules filtering, WP embed content, and URL filtering. Just go to the settings and toggle where you want each plugin to be disabled. It also has a few additional settings shown below.
Freesoul Deactivate Plugins is another good option and has a perfect 5 star review as of writing this. Just like you would with the others, head to the settings, select the type of content you want to edit (top tab), then enable or disable plugins on that content by toggling each one.
7. Configure Perfmatters With More Optimizations
Perfmatters has a lot more settings outside the script manager.
I recommend going through that tutorial I linked to, especially if you’re using WP Rocket or SiteGround Optimizer. View the table in step #1 of this tutorial to learn which features your cache plugin lacks, then use Perfmatters to make additional optimizations. Be sure to only enable 1 feature between Perfmatters and your cache plugin to avoid duplicate functionality.
Frequently Asked Questions
How to disable WordPress plugins on certain pages?
Perfmatters, Asset CleanUp, and several free plugins can disable plugins on specific pages/posts. Be sure to enable test mode to prevent your site from breaking while doing it.
Which asset unloading plugin is best?
While all asset unloading plugins disable plugins where they're not used, the biggest difference is UI/UX and any additional optimizations. For example, Perfmatters has many optimizations not found in WP Rocket or SiteGround Optimizer that help with web vitals.
Do unused plugins slow down my site?
Yes, plugins slow down your site. Whether it's because they add CSS/JavaScript bloat or increase memory usage, using lightweight plugins and removing unused plugins is still important. How much they slow it down depends on the plugin as well as the code quality.
How do I find my slowest plugins?
Chrome Dev Tools coverage report shows which plugins add the most CSS/JavaScript, or you can use Query Monitor to find slow plugins by viewing the Queries By Component tab.
Have a question? Hit me up in the comments.
Tom
