Part 6.4Optimising CSS delivery

An introduction to optimising CSS

CSS, like JavaScript, is a front end language. This means that it needs to be used on the clients computer on several pages of a website. As a result, it may need to be downloaded several times from the website.

The way CSS works allows it to be cached and retrieved at a later stage.

But CSS can also be optimised for delivery. The concept of reducing the size of CSS files is an important one, as a CSS file should not be too large that the user cannot download it in a normal amount of time.

As part of making the file smaller, removing certain things is necessary and a general rule comes into place:

Smaller file = faster download + lower readability

This part of the tutorial looks at how to optimise CSS using normal techniques.

Whitespace

Perhaps the most important change that can be applied to CSS is the removal of whitespace.

Whitespace characters include the tabs that are placed around CSS, the space in between elements and new lines.

Consider the following:

div.ex {
	background: green;
}
div.el {
	background: red;
	font-weight: 100;
}
		

This could be condensed down to:

div.ex{background:green;}
div.el{background:red;font-weight:100;}
		

This takes out all of the space between the colons and the property value as well as the new lines. It also removes the tabs before each property that improve readability.

All of this has come at the cost of readability, however.

CSS Comments

Internal comments are used to make code more reabable and are strongly encouraged, but when it comes to download speeds, comments hinder this considerably.

Removing comments from the code will increase download times:

/*Green division only*/
div.ex {
	background: green;
}
/*Red division only*/
div.el {
	background: red;
	font-weight: 100;
}
		

This could be condensed down to:

div.ex {
	background: green;
}
div.el {
	background: red;
	font-weight: 100;
}
		

Semi-colons

Semi-colons are necessary for terminating a line, but as they are not necessary before a } symbol, there is no need for them at the end of the last property in an element. The following sample has semi-colons as normal:

div.ex {
	color: red;
	background: green;
}
		

But the semi-colon after the value 'green' can be removed.

div.ex {
	color: red;
	background: green
}
		

Naming conventions

All CSS names can be condensed too, for instance, naming an object something like .main_content_link could be cut down to something like .mcl.

By using shorter names, the code becomes less readable but becomes more compact and space-saving (bandwidth-saving too).

Also consider that #main_content > a is shorter than .main_content_link and will not need applied to each link.

An important naming convention applied in CSS is the underscoring of words, that is, instead of putting spaces between two logical words, underscores are used. If this convention is dropped, 1 byte of information is saved per underscore.

Listing CSS selectors together

Sometimes CSS selectors offer similar properties and whilst it is one option to simply reference them in the HTML through a shared class, it may actually be better to do this through CSS.

Given the following CSS

.redBackground {
	background: red;
}
.greenBackground {
	background: green;
}
.blackForeColour {
	color: black;
	border-radius: 15px;
}
		

<div class="redBackground blackForeColour">
	This is the red division
</div>
<div class="greenBackground blackForeColour">
	This is the green division
</div>
		

Both elements in the HTML share properties, and as a result they share a class in order to share them. But this means adding two classes to the HTML, which in turn if there are several hundred of these will result in a huge waste of bandwidth.

This can be fixed by applying it in the CSS. One way of doing this would be to simply declare it in both elements:

.redBackground {
	background: red;
	color: black;
	border-radius: 15px;
}
.greenBackground {
	background: green;
	color: black;
	border-radius: 15px;
}
		

But this is still rather large. The best option here is to use a list of CSS selectors which share the same properties:

.redBackground, .greenBackground {
	color: black;
	border-radius: 15px;
}
.redBackground {
	background: red;
}
.greenBackground {
	background: green;
}
		

Now these properties will be added to both selectors.

Merging CSS files

For several reasons, including information architectural reasons, CSS is often spread across different files. For instance, when a third-party library is used, it may come with it's own CSS file. Often web developers choose to leave this file in tact thus permitting easy updates to the file from the developing company. In turn they add a reference to that specific file in each HTML page. Doing this increases the number of HTTP requests added to the page and in turn slows the whole site down.

Combining CSS files either on-the-fly or beforehand is one method that, generally, will improve website performance.

The on-the-fly method is the better option. Writing a small PHP script for combining CSS is not too difficult:

<?php
	function combineCSS() {
		$combined = file_get_contents("desktop.css") . file_get_contents("mobile.css");
		file_put_contents("style.css", $combined);
	}
?>
		

This pre-made script simply combines the files into a single string and places them in the file style.css.

Tools for the job

There are hundreds of tools for both CSS and JavaScript out there that will optimise CSS and JavaScript for delivery. These tools apply all of the rules discussed in this article (and perhaps more) in order to achieve a valid CSS file that functions as normal but with all optimisations applied. The form of reducing the content of the file by using these rules is called minification.

Another option for reducing CSS download times is to use compression and caching within the web server.

Alternatively, let another company apply their minification tools to the code. This website uses the content delivery network CloudFlare for speed and performance.