The loading speed of a website 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.
That a website weighs little and loads fast is an obvious improvement of the UX (user experience), because visitors get to reach the content before and interact with it. But it also has other associated advantages, such as lower data consumption and even saving in the device’s battery.
his was already important some time ago. But it has been Google’s decision to include load speed among the factors that determine the positioning within the search engine, which has made us crazy with SEO trying to reduce the tenths in the load time and save some kb when possible.
This has led to what we call WPO (Web Performance Optimization), a field of work where the goal is to optimize the maximum load of the web through compression techniques and content optimization.
How to reduce the weight of your CSS files
There are many techniques to reduce the weight of CSS files. The best known are to group all the styles sheets of the web in a single file, minimize it and serve it compressed using Gzip. Then we could activate the cache of that 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 we are creating the CSS rules of our website.
All start from a very basic principle: each character weighs approximately 1 byte. If we reduce the number of characters, we will be able to reduce the weight of the file, not easy? Let’s see how to achieve it. (Note: really the rule of 1 character = 1 byte is not always the case, it is a much more complex topic where the type of coding and the type of character are included, but to illustrate the following points, we will consider this equivalence to be good).
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 from the upper side and following the clockwise direction.
The reduction of characters and therefore of size is considerable.
That’s 87 characters, totaling 87 bytes.
padding: 5px 10px 10px 5px;
That’s 37 characters, totaling 37 bytes.
On the left, we define the padding using 4 properties. On the right, we define the padding of the element in a single line with a shorthand property.
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.
Spaces and Tabs in CSS. Which occupies less?
The eternal dilemma, tabulation or spaces in CSS? Personally, I have always found it clean and tidy 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 1 byte to add to our total weight. A space also counts as1 byte, but to achieve the same level of indentation we need 4 spaces (4 bytes).
If we want to optimize to the maximum, we can not use spaces or tabs, but then the code would be very unreadable and difficult to edit. It is better to let spaces and tabulations be removed at a later stage, when we minimize our style sheets.
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 as many browsers and their different versions.
-webkit-transition: all .8s linear;
-moz-transition: all .8s linear;
-ms-transition: all .8s linear;
-o-transition: all .8s linear;
transition: all .8s linear;
/* Without unnecessary prefixes */
transition: all .8s linear;
However, with the passage of time, these browsers integrate this property without it 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.
Ignore the CSS unit when the value is zero
In CSS, the value 0 is always 0. It doesn’t matter which unit we refer to, since this information will be ignored. Here we can save some bytes safely.
margin: 0px 15px 1.2em 0em;
/* Zero is always Zero */
margin: 0 15px 1.2em 0;
Optimize 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. Similarly, any decimal value that has a 0 at the end can be reduced in order to save another byte.
/* Zero in decimal values */
Code of shorter colors in CSS
We have several ways to declare a value for CSS colors: RGB, HEX or the name of the color. The ideal here would be to use what occupies less bytes.
background-color: #ffffff; /* white */
color: rgb(0,0,0); /* black */
border-color: #ff0000; /* red */
/* Smaller color codes */
background-color: #fff; /* white */
color: #000; /* black */
border-color: red; /* red */
Conclusion: Integrate the WPO tasks from the layout phase
I think it is important that everyone who works with CSS is clear from the design phase that our style sheets are part of a final package in which SEO and WPO have the same importance for the success of the project as any other task.
Keeping this in mind helps us to integrate better with the rest of the team and optimize from minute 1 all the style sheets that we are creating.
Perhaps some of the advice given in this article is very evident, but it is never bad to review them to have greater control over the CSS that we wrote.
What other principles and rules do you know to reduce the weight of CSS files?