How to Optimise your CSS for Improved Website Design : Part 2
Optimising CSS
Using each declaration only once
Reducing the size of your CSS files is an efficient way to improve loading times for websites. Optimising your CSS code by using declarations one time offers between 20-40% reductions in file size.
h2 { color: #fff; }
p { color: #fff; }
is conveniently reduced to a single line of code:
h1, p { color: #fff; }
As you begin to optimise more of your selectors, you will experience more complex solutions. You will need to also be aware of the cascading process working within a style sheet to ensure that the changes that you make do not include declarations over-ruling previous declarations incorrectly.
h1, h2, h3 { font-weight: bold; }
a strong { font-weight: normal; }
strong { font-style: italic; font-weight: normal; }
#header { font-style: italic; }
.quote { font-style: italic; }
when optimised, these lines of code are changed to:
h1, h2, h3, strong { font-weight: bold; }
a strong { font-weight: normal; }
strong, #header, .quote { font-style: italic; }
You will also need to consider the length of the selectors that you are now using. By producing increasingly long strings of selectors you may in fact increase the amount of code that you are producing and enlarge the CSS file size.
In some instances, such as disruptions to the cascading order or overly long selectors, it may be necessary to use the declaration more than once.
Checking CSS for Optimised Code
Generally it is recognised amongst developers that minimising the CSS file size offers a faster result in webpage loading time due to the reduced time it takes for the server to load. Websites which experience increases in traffic may find that the server is at risk of crashing if the website content is not optimised well and CSS optimisation is a significant contributor.
The most common methods for optimising CSS file size is by removing or reducing the amount of space used to write comments, include unused selectors, tabs, white-space and code written in longhand when a short hand alternative is available.
CSS W3C Validation
To help you to validate your CSS code and produce optimised files, the W3C offer a useful tool for easy use online or offline.
Firefox CSS Validator
Firefox offer a CSS validator extension which can be installed onto your browser offering you a convenient way to check your code with a mouse right click.
CSS Check Tool
A code which has been validated to W3C standards may still contain errors. A good tool for checking your CSS against browser compatibilities is the CSS Check tool.
CSS Analysis Tool
If you want to ensure that your CSS is validated to W3C standards, to check that your sizes are specified in relative units and to assess the colour contrast results for someone with sight disabilities, the CSS Analyser offers a reliable test.
Dust-Me Selectors
To help you identify CSS selectors in your code which are not being used, the Firefox extension Dust-Me Selectors, can be used to crawl a whole site or individual page.
CSS Tidy
Using the CSS Tidy tool can help reduce the size of your code file by up to 30%. CSS Tidy performs a compression that eliminates any white-space, redundant selectors, comments and transforms longhand into a shortened code.
CSS Tidy is an open source product so it is available in several forms including: