Disabling Unused CSS and JS

There is a handy tool built into the Chrome browser that lets you see what CSS/JS is being used on any given page vs. what is being loaded (and possibly unused). Now, you can usually find this information by running PageSpeed Insights on your page also, but each page is different. So you either need to run PSI on each (type of) page, or you can use the Coverage tool to help you identify potentially unused CSS/JS resources.

The Coverage tab

To find the Coverage tab, you just about need super-powers. Or you can watch this handy video that I made just for you!

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.

With each file/rule you add to SWIS, make sure you test out a few pages to make sure nothing is broken. 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).

If you find any JS errors, go back and undo the last change you made, and make sure the error goes away.

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