Often over the course of time, you need to make small tweaks to your website. Most of these tweaks are usually visual, and involve working w...
Often over the course of time, you need to make small tweaks to your website. Most of these tweaks are usually visual, and involve working with CSS files. Over time, CSS files grow and may accumulate redundant or overlapping CSS rules that are old and no longer used, or are overwritten by new styles. Some styles might be leftovers from a plugin or an on-page element that you no longer use. These useless styles can increase the size of your CSS files, hence compromise the load speed. Let's take a look at how you can clean out your CSS files.
CSS styles can be;
- Redundant, for instance, you might have set the body background color twice and never noticed it.
- Overwritten, i.e. two separate values for a single CSS property, such as two different colors for the body background. In this case, the browser only picks out one style, making the other(s) useless.
- No longer in use. You might have added a subscription widget and added custom CSS for it. But you later decided that it doesn't look good, and hence took off the widget entirely. The CSS for this widget still remains behind, no longer in use.
How to remove unused CSS?
Not only do these unused entries increase CSS file size and the page load time of your website, they also affect the site’s performance as the browser has to process extra data. Not to mention that useless CSS styles make the task of maintaining CSS files that much harder due to all the redundancy.
A popular browser extension, called Dust Me is used for just such a purpose. It scans your webpage, and lists all the unused CSS rules in the stylesheet. Firefox and Opera users need to install this plugin, but fortunately for its users, Google Chrome has built-in developer tools which you can use to remove redundant CSS.
- While a webpage is open inside Google Chrome, click on File >> Tools >> Developer Tools. Alternative keyboard shortcuts are Ctrl+Shift+I, or simply F12.
- Inside the debugger, look for the Audits tab.
- Inside the Audits tab, click on the radio button that says Reload Page and Audit on Load. Now click on Run.
- The audit process should now run.
- One the audit is complete, expand the "Remove Unused CSS Rules" group, and then further expand the CSS files that are located on your site. Not all CSS rules come from your website's CSS - some comes from third-party plugin sources.
You will now get a sorted list of all the styles that were not used by the browser.
You can simply copy these results off the audits page, and save them for use. Cross-check them against your CSS file and see if they really are useless. Sometimes, some CSS rules aren't used on some pages, but are on others. Hence, not every rule can be eliminated this way. You will need to manually check before deleting each entry. We recommend auditing multiple pages before making a decision.
COMMENTS