Compress CSS to reduce loading times

Optimizing the loading of your websites also requires effective management of CSS files. Through targeted compression and the application of certain best practicesperformance can be significantly improved, resulting in faster loading times and a better user experience.

What is CSS?

Cascading style sheets, generally called CSS (from English Cascading Style Sheets), constitute a computer language whose aim is to define web content and its visual stylesuch as color or layout. HTML and XML documents only contain data regarding complex content (tree structures, rich texts, etc.) while layout elements are presented in CSS data. If style sheets are used during a page load, the Web server must transfer them to the browser including the implemented multimedia content. This action has a direct impact on the page load time.

The larger and more complex the CSS data, the more patient the user will have to be while loading the page. By compressing the codes of CSS files, you can significantly reduce the size of these files and thus improve the performance of your website. Another way to improve loading times is something called lazy loadingin which CSS files are only loaded when necessary. This reduces initial loading time, because not all stylesheets need to be loaded immediately, but only when they are actually needed.

We are giving more and more importance to loading a website, particularly since the growth of the smartphone and tablet market. The field of activity of the CSS language has expanded and uses more and more JavaScript features. Content management system templates such as WordPress are particularly affected by these overloaded CSS files, which cause websites to load slowly. Here we present some tips and tricks that will help you compress your CSS files and improve the loading performance of your website:

1. Avoid excessive use of CSS values inline (styles stored directly in an HTML element) as long as it is not the start of the HTML page. The same goes for style tags (individual CSS elements that differ from standard style sheets).
2. Combine multiple CSS files into a PHP script. So the PHP file is the only element to be loaded by the client. Normally this should send an HTTP request via stylesheet and wait. Note that HTTP/2 now makes it possible to efficiently handle multiple parallel requests, in order to load individual CSS files more quickly without the need for a prior merge.
3. If possible, use the following codes: body { margin: 20px 10px 5px 10px } instead of a complete formulation like body { margin-top: 20px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px; }.
4. Avoid writing too much. If certain tags already appear in an element (such as a list), there is no need to mention them again.
5. Use Hex codes for colors instead of RGB notations.
6. Do not use the universal selector * only when absolutely necessary. This applies to all elements, which means that the browser must check them all.
7. Shrink CSS files by removing unnecessary spaces, lines and comments. For example, there should be no spaces behind a colon and a semicolon. You can also remove the semicolon after the last period of the enumeration. In this way, the CSS file will lose its systematic construction as well as its clarity, but will be much more quickly interpreted by your browser.

Since minifying a CSS file is complex, it is advisable in any case to create a copy while the CSS file is not yet clear. This way, you can make small changes or even repair errors.

CSS compression: free online tools

It is possible to bypass the effort of manual CSS file optimization by using free web applications. These tools are very effective in removing spaces, tabs, comments and line breaks. Most of these programs also take into account color code transformation. You can download the result directly as a CSS file or by simply copying and pasting. Here is a selection of three applications:

CSS Minifier

This online application is available on cssminifier.com. Copy your CSS code into the “Input CSS” field and start the process by clicking “Minify”. In the “Minify Output” field you will find the result which you can then copy and download directly. CSS Minifier shortens code for newlines and spaces and also removes semicolons in enumerations. Furthermore, the tool transforms RGB codes in its compressed variant in Hex.

CSS Compressor

The CSS Compressor web application differs from CSS Minifier by offering more options for compressing codes. Open the site csscompressor.com and copy your CSS file into the “CSS Source Code input” field. Then set the compression level. There are four pre-configured options to choose from, depending on how readable you want your compressed CSS code to be. By clicking on the “Show advanced options” link, check the desired options such as compression sizes, colors (Compress colors), the characters (Remove unnecessary backslashes), etc. By clicking on “Compress”, you start the CSS Compressor process. In addition to the result in the “Compressed JavaScript” field, the tool also allows you to receive information about the input and output size of your CSS file as well as its minimization as a percentage.

CSS Compressor from Gilmeister Software

THE CSS Compressor from Gilmeister Software is a free tool for web developers that allows you to easily compress CSS codes. The compressor easily removes spaces and the last semicolon. Comments are automatically removed from the CSS code. According to the publisher, the overall code reduction can be up to 30%.

Optimized CSS for faster loading time

If your website or online store is content-rich, you need to use a lot of style sheets. The fact that your web server is increasingly overloaded by the growing number of CSS files is not surprising. If a page is opened via a client (browser), all CSS data must be loaded and transferred. It is for this reason that optimizing style sheets is more than recommended. The online tools we have presented are intended for both beginners and experts and allow you to remove unnecessary information from your CSS file. However, you will not be able to achieve the maximum level of optimization with applications. To do this, you will have to get to work or resort to expert services.