Manual CSS optimization to improve website load time

The load time of a web has become one of the most important factors in recent years in web design and although there are many elements that can be optimized to lighten the total weight of downloaded files. In this article we are going to focus on optimizing CSS files, more specifically when writing CSS.

An improvement of UX (user experience) is that a website weighs little and loads fast so visitors reach content quickly and interact with it. But it also has associated other advantages, such as lower data consumption and even a saving in the battery of the device.

This was important some time ago. But it has been Google’s decision to include load time among the factors that determine the positioning within the search engine, which has made us all go crazy with SEO trying to reduce tenths in loading time and save some kb where we can.

This has led to what we call WPO (Web Performance Optimization,) a field of work where the goal is to optimize the load time of the web through compression techniques and optimization of content.

How to reduce the weight of your CSS files

There are many techniques to reduce the weight of CSS files. The best known are the ones that group all the styles sheets of your web in a single file, minifying it and serving it compressed with Gzip. Then we activate the cache of this file, so that when the visitor returns, they do not have to download the CSS file again.

However, today we are going to focus on the previous steps. We will detail some tips to integrate the optimization tasks from the layout phase when creating the CSS rules of our website.

All start from a very basic principle: each character weighs approximately 1byte. If we reduce the number of characters, we will be able to reduce the weight of the file. It seems easy! Let’s see how to achieve it. (Note: the rule of 1 character = 1 byte is not always like this, it is a much more complex topic where the type of coding and the type of character play together, but to illustrate the following points, we will consider this equivalence to be good.)

1. Shorthand properties in CSS

The Shorthand properties allow us to define several values in a single line. The clearest example is in the definition of margin or padding, where we can define the four values in a single line starting at the top and following the clockwise direction.

The reduction of characters and therefore of size is really important.

As a general rule, whenever we declare more than one value of a property that can be used as a shorthand, it will be worthwhile to use it.

2. Spaces and Tabs in CSS. Which one occupies less?

The eternal dilemma, tabulation or spaces in CSS? Personally I have always found it cleaner and tidier to use tabs. If we add to this the saving of bytes, the balance is clearly tilted on the side of the tabulations.
To get an idea, a tabulation counts as a character, so it would be 1byte to add to our total weight. A space also counts by 1byte, but to achieve the same level of indentation we need 4 spaces (4bytes.)

We can optimise without using spaces or tabs, but then the code would be unreadable and difficult to edit. It is best to let the spaces and tabulations be removed at a later stage, when we minify our style sheets.

3. Prefixes for browser compatibility that are no longer needed in CSS

When a new CSS property begins to be interpreted between browsers, it is normal to use certain prefixes to ensure compatibility in the largest number of browsers and versions.

.box {
	-webkit-transition: all .8s linear;
	-moz-transition: all .8s linear;
	-ms-transition: all .8s linear;
	-o-transition: all .8s linear;
	transition: all .8s linear;
}

/* Sin Prefijos innecesarios */
.box {
	transition: all .8s linear;
}

However, with the passage of time, these browsers integrate this property without being necessary to use any type of prefix. It is not a bad idea to check our CSS files for these prefixes that are no longer useful. A good tool to know the compatibility of the properties is Can I Use. In this example, the transition property no longer needs so many prefixes.

Can I Use is a good resource if you want to know the new features and compatibility of the so-called CSS4.

4. Ignorance of the CSS unit when the value is zero

In CSS, the value 0 is always 0. It does not matter which unit we are referring to since that information will be ignored. Here we can safely save some bytes.

.box {
	margin: 0px 15px 1.2em 0em;
	padding-top: 0rem;
}

/* Zero is always Zero */
.box {
	margin: 0 15px 1.2em 0;
	padding-top: 0;
}

5. Optimization of the decimal values in CSS

Here are two issues that we have to take into account. On the one hand, any decimal value less than 1 and greater than 0 does not require the use of 0 before the point indicating the beginning of the tens. On the other hand, any decimal value that has a 0 at the end can be reduced in order to save another byte.

.box {
	font-size: 0.75rem;
	padding-left: 1.50em;
}

/* Zero in decimal values */
.box {
	font-size: .75rem;
	padding-left: 1.5em;
}

6. Code of shorter colours in CSS

We have several ways to declare a value for CSS colours: RGB, HEX or the name of the colour. The ideal here would be to use the one that occupies less bytes.

.box {
	background-color: #ffffff; /* white */
	color: rgb(0,0,0); /* black */
	border-color: #ff0000; /* red */
}

/* Smaller color codes */
.box {
	background-color: #fff; /* white */
	color: #000; /* black */
	border-color: red; /* red */
}

Conclusion: Integrating the WPO tasks from the layout phase

I think it is important that all people working with CSS have clear from the layout phase that our style sheets are part of a final package where SEO and WPO have the same importance for the success of the project as any other element.

Having this in mind helps us to better integrate with the rest of the team and to optimize from minute 1 all the style sheets that we are creating.

Perhaps some of the tips listed in this article are very evident, but it is never wrong to review them to have more control over the CSS we write. If you want to review other basic CSS concepts, I recommend this article about what CSS is. In addition, if you are looking for something more advanced, you can start with this article about CSS Grid or about CSS media queries.

What other tips and rules do you know to reduce the weight of our CSS files?