How to compress CSS for consistent loading times

Cascading Style Sheets (CSS) is a style sheet language that helps website content and design settings (e.g. colours and layout) to be defined separately. The HTML and XML documents only contain information on the content, the internal structure, or individual website components, while the design elements are listed separately in CSS files. If style sheets are used, the web server has to pass these onto the browser each time a site is called up. This is all done in addition to the HTML document and the implemented multimedia content (images, videos, etc.), which has an effect on the loading time. The more complex and larger the CSS files are, the longer the visitor has to wait until the site has completely finished loading. By compressing the CSS, you can reduce the size of the CSS file and increase the performance of your website.

The possibilities of CSS optimisation

Loading time is an increasingly significant issue, particularly when it comes to mobile devices and data transfer. This has led to an increase in the range of functions of CSS. As a result, the style sheet language is adopting more and more JavaScript features. Templates from content management systems, like WordPress, are often forced to wait for overloaded CSS files that impede website performance. We’ve laid out some tips and tricks that you can use to compress your CSS and enjoy shorter loading times.

  1. Avoid the excessive use of inline-CSS (styles directly housed on the HTML element) if it’s not at the beginning of the HTML page. The same goes for style tags (individual CSS properties that deviate from the standard of the respective style sheets).  

  2. Combine multiple CSS files in a PHP script. This way the client only has to call up the PHP file instead of having to send a HTTP request for each style sheet and then having to wait for it. 

  3. Use abbreviated forms if possible:

    body { margin: 20px 10px 5px 10px }

    instead of lengthy formulas such as:

    body { margin-top: 20px;
    margin-right: 10px;
    margin-bottom: 5px;
    margin-left: 10px }

  4. Avoid overuse. If certain tags appear exclusively in an element (e.g. in a list), the element doesn’t have to be mentioned a second time.

  5. Use HEX values for colours rather than the RGB notation.

  6. The universal selector ‘*’ should only be used in emergencies. A design setting with the universal selector applies to every element so that the browser has to first provide all elements with the respective requirements.

  7. Minimise the CSS file by deleting unnecessary spaces, blank rows, and comments. No spaces are needed after the colon or the semicolon, for example. The final semicolon after the last character of the list can also be left out. By carrying out this process, the CSS file loses its systematic structure and clarity, but will be read considerably faster by the browser.

  8. Since minimising a CSS file is quite complicated, you should definitely make sure you have a backup copy while the CSS is still clear. This way you can make small changes or rectify errors retrospectively.

CSS compression: online and offline tools

There are various online and offline applications for users that want to avoid the hassle of manually optimising their CSS. With their help, you can compress your CSS. The tools take on the painstaking task of removing spaces, tabs, comments, and line breaks. Most programs are also able to convert the colour code. You can directly download the result as a CSS file or copy it by using the copy and paste feature. Here are three applications:

CSS Minifier

The online application CSS Minifier can be found on this website https://cssminifier.com/. Simply copy your CSS code into the ‘Input CSS’ field and click on ‘Minify’ to start the process. In the ‘Minified Output’ field, you will see the result, which can either be manually copied or downloaded by clicking on the ‘Download as file’ button. CSS Minifier shortens the code by removing line breaks and spaces as well as deleting the final semicolon in the list. The tool can also easily convert the RGB code to the compressed HEX variant.

CSS Compressor

The web application CSS Compressor is slightly different to the CSS Minifier since there are several more options for compressing the code. Pull up the website http://csscompressor.com/ and paste your CSS into the ‘CSS Source Code Input’. You can then choose the degree of compression. Under ‘Show advanced options’ you can tick which box you want to compress, such as ‘Compress colours’ or ‘Remove last semicolons’. Click on ‘Compress’ to start the process with CSS Compressor. In addition to the results in the ‘Compressed JavaScript’ field, the tool also provides information about the input and output size of your CSS file as well as the percentage of the obtained minimisation.

Free CSS Toolbox

Free CSS Toolbox is a free software for web developers and can be downloaded from the site of the developers Blumentals Software. Just as the name implies, it involves a collection of tools and can perform many tasks including the formatting and verifying of CSS codes. In the ‘CSS Formatting Options’ menu tab, select the CSS parameter that you want to optimise and start the compression by clicking on ‘Re-format now’. Free CSS Toolbox removes blank spaces and the final semicolon hassle-free; it also minimises the colour size. This program runs on all Windows operating systems from XP onwards.

Faster loading times thanks to optimised CSS

The more extensive your website or online store is, the more reliant you are on style sheets, which in most cases are CSS. It’s no wonder that the burden on your web server constantly grows when the amount and size of CSS files both increase. If a site is opened via the client (browser), all CSS data has to be called up and passed on. This is why it’s highly recommended to optimise your style sheets. Online and offline tools (such as the examples mentioned above) enable even beginner web developers to get rid of unimportant information from the CSS files. Maximising optimisation can’t be done with an application; carrying out the task yourself or hiring an expert are the only truly full-proof options.

Was this article helpful?