Improving website performance compressing CSS files

Cascading Style Sheets, better known by its acronym CSS, is a language used to display the design elements of a web page, which generally must be defined separately.

Image for post
Image for post

Why is CSS loading performance important?

HTML and XML documents contain information only about the content or semantics of some of the components of a website, while design resources are found separately in so-called CSS files. If Stylesheets are used, the server has to access them (where multimedia content such as photos, videos, etc. is stored) each time the web is visited, which clearly has an impact on load times. The larger and more complex the CSS files are, the longer the visitor will have to wait to see the contents of a website. By compressing the code of the desired CSS file, the size of the files is reduced and therefore the performance of the web is improved.

Advantages of compressing CSS

The loading time of a web page is a fundamental factor, especially with the increase in the use of mobile devices and data connections. At the same time, CSS language skills have been growing, eg. taking over the JavaScript functions. It is common for some content management system templates like WordPress to deal with overloaded CSS data that unnecessarily slows down the creation of a web page. Here are some tips and tricks to compress your CSS and speed up the loading speed of your website:

Image for post
Image for post

Since minimizing CSS code can be difficult, it’s always recommended to create backup copies before making any changes. This makes it easier to closely track changes and easily correct errors.

Tools to compress CSS

For those who do not want to optimize the CSS code manually, there are several online application tools, as well as offline programs that are responsible for compressing the CSS files. Most are tools that save tedious work and effectively eliminate extra spaces, indents, comments, and line breaks. These also allow you to convert the color code. Once the process is complete, the code can be downloaded directly as a CSS file, or it can be copied and pasted directly. A summary of three of the most common applications:

CSS Minifier

The CSS Minifier online application can be used directly from the website. Once there, it is only necessary to copy the CSS code in the “Input CSS” field and start the process by clicking on “Minify”. The minimized code will then appear in the “Minified Output” field and this can be copied manually or downloaded via “Download as file”. CSS Minifier removes the semicolon at the end of the numberings, and shortens the code at all line breaks and spaces. The tool also converts RGB codes into their compressed hexagonal variant.

CSS Compressor

The CSS Compressor is a web application that differs from the CSS Minifier in terms of the options it offers when compressing the CSS code. The first step is to go to csscompressor.com and copy the code into the “CSS Source Code Imput” field. Now you can specify the compression level. In “Show advanced options” you will have a look at the desired optimization variables, such as colors (“Compress colors”) or remove spaces (“Remove unnecessary backslashes”). By pressing the “Compress” button, CSS Compressor will start the process. Once completed, you will receive the result in the “Compressed JavaScript” field, along with information about the input and output size of the CSS file, as well as the minimization percentage reached.

Free CSS Toolbox

Free CSS Toolbox is free software for web developers that can be downloaded from the Blumentals Software website. As its name indicates, it is a collection of tools that allow, among other things, the modification of the format or the validation of CSS codes. In the “CSS Formating Options” menu it is possible to select the CSS parameters to be optimized and start the compression by clicking on “Re-Format Now”. Free CSS Toolbox minimizes the size of colors and eliminates spaces, and semicolons at the end of numbering. The program is executable on all Windows operating systems since XP.

Image for post
Image for post

Conclusion

The larger and more complex the structure of a web page, the greater the dependence on style sheets, which in most cases are CSS files. With this it is not surprising that load times increase as CSS code does. When the user accesses to a website through a client (browser) all CSS files must be retrieved and sent, so compressing the CSS is pretty recommended for any website. There are online tools on the market, as well as offline programs like the ones mentioned above, that allow beginners and experts to remove irrelevant information from their CSS files in just a few minutes. Unfortunately, although these tools are of great help, to reach the maximum level of optimization it will be necessary to modify it manually.

Written by

Machine Learning and Frontend padawan, on the open source side of the force.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store