How To Clean Up A CSS Stylesheet?
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.
How To Clean Up A CSS Stylesheet? First appear in MyBloggerTricks
Post a Comment