Disabling Unused CSS and JS

Having unused CSS and JS on your page is like bringing a suitcase of winter clothes to your vacation on the beach. It slows your page down, and wastes CPU and bandwidth for your visitors. Enter Slim. Who? What? I call this feature Slim, because that's what he does to your pages. Though Slim isn't automatic, he's super powerful (I hear he works out a lot). But talk is cheap, so let's give you an example, shall we?

On ewww.io, our old theme loaded 17 JS and CSS files. Yeah, I'm not proud of that, but it worked for the time being. Six of those were for features we don't use on ewww.io, but with Slim, we can tell them not to load anywhere on the site.

You can manage all the JS/CSS loaded on any given page via the SWIS menu on the admin bar--top of your screen, yup, there it is! Slim groups the resources by type and sorts them by plugin too. Slim rules can be applied site-wide, or you can add exclusions to load resources on specific pages only.

Sledge Hammer or Fly Swatter?

Some resources aren't being used anywhere, so you nail those with the hammer. But if you need a little more finesse to pin down that pesky bugger, you can use exclusions. On the front-end panel for Slim, you can easily add exceptions for the current page. But you can also Customize Rules to exclude multiple pages, use wildcards, or even embrace the power of "regular expressions" (aka regex syntax). Note that only exclusions with at least one * wildcard will be parsed as a regex.

Finding Unused JS/CSS

How do I know if a resource isn't being used? I try it out! Disable a CSS or JS file in the settings, see if the site is still okay. If the home page looks good, I click around on a few others and make sure everything looks normal.

Now some will be a bit more obvious. For example, you might have a forms plugin that you only use on 1 or 2 pages. Well, you certainly don't need the JS & CSS from the forms plugin loading on every page! So you can disable it everywhere except that page.

The Coverage tab

You can also use the Coverage tab in Google Chrome to find unused JS/CSS resources. But to find the Coverage tab, you just about need super-powers. Or you can watch this handy video that I made just for you!

Note that there are times when the Coverage tab isn't 100% accurate, because it's only giving you data for the parts of the page you've seen so far. Thus it can be a good guide, but you still want to take things slow, disabling resources one by one.

Breaking things down...

With each file/rule you add to SWIS, make sure you test out a few pages to make sure nothing is broken. Slim, will generally show an alert if there are any JS errors, but you can also use the Chrome DevTools (Console tab) to see if disabling JS has created any errors on your site. Note that errors are in red, anything with a yellow background is just a warning, and you can take care of those later (IF you know what the warning means, and how to fix it).

CSS "errors" will usually be more obvious, as disabling a necessary CSS file will make your page look different/broken.

If you break something, go back and remove the last rule you added. If you really break something and can't even get SWIS to load on the page, never fear, the settings page will be fine, because Slim only works on the front-end. Take a deep breath, and then go delete the problematic rule from the settings page, and things will be back to normal. Of course, make sure to clear any caches (including the SWIS cache), or you'll be running around in circles wondering why it's still broken.