How to truncate the CSS code and speed up a website

When opening any website, a user sees the arrangement of blocks with text, images, and other content in a certain order in front of them. Each feature, up to the definition of the shade and size of the frames, is described in the form of a cascading style sheet.

This is the CSS code that is usually stored in the style.css file (sometimes it may have a different name). Style.css contains a large number of selectors and is responsible for the external editing of website pages.

Some style.css lines are not used but are stored in a sheet. The more there are, the longer a server responds, as a result, page loading slows down. Low speed of information display directly affects user loyalty and search engine ranking. This is why PageSpeed Insights often recommends shortening the CSS code.

It is recommended to manipulate the compression of the CSS sheet after finishing work on a website. Shortening the code will make it inconvenient for editing. Therefore, first, bring the website in proper form and only then proceed to minimize the cascading sheet.

The fastest way to reduce the CSS code is to use special tools. For example, CssCompressor. Paste the contents of the style.css file into the empty field and select the code compression level.

The Highest level will cause the code to be transformed into a single very long line. For a server, this is a plus, since it will be easier for it to read the information in this form. But if you need to edit the code, finding the right item will be difficult.

Here is how the code input field looks before compression:

Here is how the code looks before and after the maximum compression:

If you select the High level, the separation between the classes will be preserved, but extra spaces, line breaks, and separators will be deleted. As a result, the tool produces ready-made code indicating its size:

In this case, the code was reduced by one and a half times. Now you need to copy and transfer it to the source file. In order not to take risks, before doing this, it is advisable to backup the original version of the sheet and save it to your computer.

If everything works fine after compression, you can proceed to the manual processing of styles. Here are alternative tools for the code compression: CSSResizer, Refresh-SF, CSSMinifer.

For manual cleaning of commands in the style.css file, you need to understand technical optimization. One mistake can lead to incorrect display of styles on the website pages.

Then, you will have to look for the reason and start all over again. Tip: after each change, check the appearance of the pages, and only after that work on further compressing the CSS.

The simplest thing you can do is combine the classes with the same properties. Copy the data of several classes into one and add the command to connect to only one of them:

After checking the website pages for the correct loading of scripts and content, delete the copied lines from the old classes.

Another manual cleaning method involves a thorough check of each class:

The more such matches, the more commands are used with this identifier.

If there are no matches or there are very few of them, the verified identifier can be deleted with all its values. One match was found in the screenshot. So lines 99-104 can be safely cleaned.

The CSS code represents a file with a list of selectors for displaying the appearance of the website's pages. Font size, background tone, frame color — they are all determined by the style.css file. You can optimize its value manually or automatically.

In the first case, you need to independently view each identifier and check if it has been actively used. You should also remove extra spaces, combine classes by properties, optimize the font.

The CSS code can be reduced several times using online tools. You need to insert the entire list of commands from the style.css file and compress it according to the specified parameters. Keep in mind that in the future you will probably have to make changes to the code. Therefore, it is important for a beginner to keep the code format for convenient reading and editing.

The most effective way to reduce the CSS code is to use preprocessors such as Sass, Less, and Stylus. With their help, the code becomes more readable.