Remove Unused JavaScript and CSS WordPress

How to remove unused javascript and css in wordpress

How to Remove or Reduce Unused JavaScript and CSS in WordPress? 

When you use PageSpeed Insights to check your Site, you will see a suggestion to remove unused JavaScript and CSS in your PSI Report. Because Unused JavaScript and CSS files can hugely affect your site’s performance and user experience. The main metric involved in the First Input Delay (FID), one of the Core Web Vitals metrics.

How to remove unused javascript and css in wordpress

1. Remove Unused JavaScript and CSS with Asset CleanUp Plugin

Asset CleanUp Plugin is a popular plugin for removing JavaScript and CSS files in WordPress. It scans your pages and detects all the assets that are loaded. All you have to do when editing a page/post is just to select the CSS/JS that is not necessary to load, this way reducing the bloat.

Asset CleanUp Plugin

The plugin works best in combination with a cache plugin (e.g. WP Rocket, WP Fastest Cache, W3 Total Cache), a hosting company that offers packages with server-level caching available (e.g. Cloudways) or a service like Cloudflare that has page caching enabled.

If using Asset CleanUp, enable Test Mode in the settings which lets you test removing CSS without it breaking your site.

  • Remove CSS Where It Doesn’t Need To Load
  • Disable contact form plugin on pages that don’t have a contact form.
  • Disable affiliate link management plugin on pages that don’t use aff links.
  • Disable social sharing plugin on all pages (since it’s usually for blog posts).
  • Disable unused functionality in your page builder (see this post for Elementor).

Remove unused javasript and css

2. Remove Unused JavaScript and CSS with Perfmatters Plugin

Perfmatters Plugin is a (paid) Lightweight WordPress performance plugin and is a popular plugin for removing CSS and JavaScript files in WordPress. Like Asset CleanUp Plugin.

If using Perfmatters, enable the script manager in the settings. There are also settings for removing bloat, browser resource hints, and other settings that can improve speed.

Some plugins, page builders, and CSS files load across your entire WordPress site. If some files are only being used in specific areas of your site, disable them everywhere else. Depending on which asset loading plugin you use, you can disable CSS files everywhere except current URLs, posts, pages, disable them on a single URL or use regex to disable CSS files using URL patterns.

Removing unused elementor CSS and JS in Perfmatters

Disabling social sharing plugin in Perfmatters

3. Remove Unused CSS and JavaScript With RapidLoad Plugin

RapidLoad Plugin is the only fully automated plugin that removes unused CSS and JavaScript in WordPress. (paid premium Plugin)

RapidLoad extends Autoptimize to automatically find CSS that’s not being used, then prevents it from loading on the page. By reducing the total CSS file size and page weight, RapidLoad can significantly reduce load times. It even improves the performance of other optimizing plugins and extensions, like CriticalCSS.

RapidLoad Plugin

The only reason it has negative reviews is that people install it thinking it’s a free plugin, but then get prompted to buy a subscription. Otherwise, there are little to no complaints about it.
Download the plugin, buy a subscription, and the plugin will do the rest. It will automatically process each URL. On average, RapidLoad removed about 88-90% of the CSS for all my content.
Rapidload autotimize settings

4. Critical CSS Generation

If you’re using WP Rocket or another Cache Plugin, you’ve probably seen an option to optimize CSS delivery (or similar).
This generates critical path CSS and loads all other CSS asynchronously without render-blocking. While it might not actually help remove CSS, it can help with delivering it faster.
Sometimes, enabling CSS delivery causes FOUT (flash of unstyled text) and contributes to Cumulative Layout Shift – CLS. If this happens to you, you will want to try the following solutions:
  1. Enable optimize CSS delivery.
  2. Check for “rocket-critical-CSS” in your source code to make sure it’s working.
  3. If it’s not working, regenerate critical CSS in WP Rocket and page builders (if using one).
  4. Scan your website using PurifyCSS.
  5. Download the combined, purified, and minified CSS.
  6. Paste the code into your cache plugin (fallback critical CSS).
  7. Exclude files from CSS delivery using WP Rocket’s helper plugin.
  8. If those don’t work, Gijo Varghese’s FlyingPress plugin has great reviews.

Remove unused CSS and JavaSript with Purify CSS

5. Remove unused CSS and JavaScript by using CSS Removal Tools

There are plenty of free online tools to remove unused CSS and JavaScript in WordPress.

  • UnCSS – a more tedious CSS removal tool that requires you to copy/paste your HTML and CSS into their tool and download it. KeyCDN says it’s more accurate than PurgeCSS since it looks at actual web pages rather than individual files but is also slower and requires more manual setup.
  • PurifyCSS – free CSS removal tool. Add your website, click “clean up CSS” with minify output turned on. Once the scan is complete, download your combined, purified, and minified CSS file.
  • Unused-CSS – freemium CSS removal tool. You can run a page through the tool and it tells you much CSS will be removed (and the percentage of CSS selectors used). You will need to give them your email and sign up for a paid plan if you want to download the CSS for your entire site.

6. Combine and Minify all CSS and JavaScript in WordPress

Minify CSS should almost always be enabled and strips unnecessary characters from CSS files, making them smaller.
Whether combining CSS files is beneficial is debatable, but WP Johnny suggests enabling this for smaller sites and disabling it for large sites. You should enable it on your site and test results.
If you’re using Autoptimize to minify CSS (called “optimize CSS” in the settings), this should be disabled in your cache plugin. WP Rocket does this automatically when enabled in Autoptimize.

7. Serve CSS From A CDN – Content Delivery Network

If you’re using a CDN, make sure CSS files (and other assets) are being served from the CDN. Sometimes, CDNs don’t automatically rewrite assets so they’re being served from the CDN. A CDN Rewrite can make sure they are. This can be enabled in Perfmatters or WP CDN Rewrite.
  • Without CDN: https://nagamarketing.com/style.css
  • With CDN: http://cdn.nagamarketing.com/style.css

If you’re using Cloudways you don’t need to do anything in Perfmatters. Cloudways is different than traditional CDN providers and sits between your site and the public internet. Traffic is automatically routed through Cloudways, and it doesn’t require a custom CDN URL.

8. Avoid Slow Plugins That Inject CSS

There are some Plugins like Sliders, Builder, forms inject CSS and it loads your entire site. You can view the list of slow Plugins, WP Hive Chrome Extension, or use the Query Monitor plugin By John Blackbourn to find the slowest plugins.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *