How to compress your CSS and improve per­form­ance

Op­tim­ising your website’s loading speed relies heavily on the effective man­age­ment of CSS files. With strategic com­pres­sion and adherence to best practices, you can greatly enhance per­form­ance—resulting in quicker load times and an improved user ex­per­i­ence.

What is CSS?

Cascading Style Sheets—commonly known as CSS—are a stylesheet language used to separate web content from its present­a­tion (such as colours, layout, or fonts). While HTML and XML documents define the structure and meaning of web content, visual design is handled sep­ar­ately in CSS files. When stylesheets are used, the web server must send them to the browser in addition to the HTML document and any embedded media (images, videos, etc.). This can affect page load times.

The larger and more complex the CSS files are, the longer users may have to wait for the page to fully load. By com­press­ing your CSS code, you can sig­ni­fic­antly reduce file size and improve your website’s per­form­ance. Another option for speeding up load times is lazy loading, which loads CSS files only when needed. This reduces initial loading time, since not all stylesheets are delivered upfront—only when they’re actually required.

The pos­sib­il­it­ies of CSS op­tim­isa­tion

The loading time of a website is becoming in­creas­ingly important—es­pe­cially with the rise of mobile devices and limited data con­nec­tions. At the same time, the role of CSS has expanded and the stylesheet language is now in­creas­ingly taking on functions that were once handled by JavaS­cript. Many templates from content man­age­ment systems like WordPress come with bloated CSS files, which can un­ne­ces­sar­ily slow down the page load process. In this article, we’ll share a few tips and tricks to help you compress your CSS and improve your website’s loading speed.

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 (in­di­vidu­al CSS prop­er­ties that deviate from the standard of the re­spect­ive style sheets).

2. Combine multiple CSS files into a single PHP script. This way, the client only needs to request the PHP file, instead of sending an HTTP request for each stylesheet and waiting for the response. However, HTTP/2 now allows multiple parallel requests to be managed ef­fi­ciently, which means in­di­vidu­al CSS files can be loaded faster without the need for merging them be­fore­hand.

3. Whenever possible, use shorthand prop­er­ties like:
   body { margin: 20px 10px 5px 10px; }
   instead of longer de­clar­a­tions such as:
   body { margin-top: 20px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px; }

4. Avoid over-qual­i­fy­ing selectors. If certain tags only ever appear within a specific element (e.g., within a list), there’s no need to include the parent element in the selector.

5. Use hexa­decim­al values for colours instead of the RGB notation.

6. Only use the universal selector * as a last resort. Style rules applied via the* universal selector* affect every single element on the page, which forces the browser to apply the styles broadly, slowing down rendering.

7. Reduce the file size of your CSS by removing un­ne­ces­sary spaces, blank lines, and comments. For instance, you don’t need a space after colons or semi­colons. You can also omit the final semicolon in a rule set. While this might make the CSS harder to read and less struc­tured, the browser will process it sig­ni­fic­antly faster.

Since min­im­ising a CSS file can make it difficult to read and edit, you should always create a backup copy while the CSS is still well-struc­tured. This makes it easier to make changes or fix errors later on.

Free online tools for CSS com­pres­sion

There are various online ap­plic­a­tions for users that want to avoid the hassle of manually op­tim­ising their CSS. With their help, you can compress your CSS. The tools take on the painstak­ing 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 ap­plic­a­tions:

CSS Minifier

The online ap­plic­a­tion CSS Minifier can be found on css­mini­fi­er.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’ll see the result, which you can copy and download directly. 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 com­pressed HEX variant.

CSS Com­pressor

The web ap­plic­a­tion CSS Com­pressor differs from CSS Minifier in that it offers a few options for cus­tom­ising code com­pres­sion. First, visit csscom­pressor.com and paste your CSS into the ‘CSS Source Code Input’ field. You can now set the com­pres­sion level. There are four different preset options to choose from, depending on how readable you want the com­pressed CSS to remain. By clicking ‘Show advanced options’, you can also manually check the desired op­tim­isa­tion settings, such as ‘Compress colors’ and ‘Remove un­ne­ces­sary back­slashes’. Click ‘Compress’ to start the com­pres­sion with CSS Com­pressor. In addition to the result shown in the ‘Com­pressed JavaS­cript’ field, the tool also provides in­form­a­tion about the input and output size of your CSS file as well as the per­cent­age of com­pres­sion achieved.

Static.app CSS Minifier

Static.app CSS Minifier is a free and easy-to-use online tool designed to compress your CSS code quickly and ef­fi­ciently. By removing un­ne­ces­sary char­ac­ters, whitespace, and comments, it helps reduce the file size of your stylesheets, leading to faster website load times and improved per­form­ance. The interface is clean and straight­for­ward—simply paste your CSS code into the provided field, and the tool instantly delivers a minified version that you can copy or download.

Quicker 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 con­stantly 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 re­com­men­ded to optimise your style sheets. Online (such as the examples mentioned above) enable even beginner web de­velopers to get rid of un­im­port­ant in­form­a­tion from the CSS files. Max­im­ising op­tim­isa­tion can’t be done with an ap­plic­a­tion; carrying out the task yourself or hiring an expert are the only truly full-proof options.