Clean Up your CSS code Removing Unused Selectors
Image source: Strawberry
If you created your website using a website template, you may not use all the CSS selectors of this template. Moreover, if you use the famous Twitter bootsrtap "framework", many parts of the CSS code probably are not in use.
Google recommends to Remove unused CSS
Before a browser can begin to render a web page, it must download and parse any stylesheets that are required to lay out the page. Even if a stylesheet is in an external file that is cached, rendering is blocked until the browser loads the stylesheet from disk. In addition, once the stylesheet is loaded, the browser's CSS engine has to evaluate every rule contained in the file to see if the rule applies to the current page. Often, many web sites reuse the same external CSS file for all of their pages, even if many of the rules defined in it don't apply to the current page.
The best way to minimize the latency caused by stylesheet loading and rendering time is to cut down on the CSS footprint; an obvious way to do this is to remove or defer CSS rules that aren't actually used by the current page.
It is important to remove the unused CSS selectors to speed-up browser rendering of your website. Luckily, there are many tools available to help you in this procedure.
Dust-Me Selectors Firefox extension is my favorite solution, but there are many other solutions.
Firefox: Dust-me selectors extension
Dust-Me Selectors is a Firefox extension (for v1.5 or later). You can install it here.
It extracts all the selectors from all the stylesheets on the page you're viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they're encountered. You can test pages individually, or spider an entire site, and you'll end up with a profile of which selectors are not used anywhere.
Right click on page and select "Spider this page..."
Press Start to analyze your site.
The result is
Chrome Developer Tools
Open Chrome Developer Tools (CTRL+SHIFT+I) and go to Audit tab. Select "Audit Present State" and click "Run".
Here are the results:
You can use GTmetrix to clean up CSS code at http://gtmetrix.com/remove-unused-css.html. Give the URL and press GO!
mincss is a python script. As its creator Peter Bengtsson explains, mincss is a tool that when given a URL (or multiple URLs) downloads that page and all its CSS and compares each and every selector in the CSS to find out what isn’t used. The result is your original CSS file with those unused selectors (not found in your HTML) removed.