How to truncate the CSS code and speed up a website

Shortening the CSS code helps to reduce server response time. As a result, a server responds faster and the page loading speed increases. You can truncate the CSS code manually or using special tools.

What is the CSS code

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.

How to reduce the size of 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.

How to truncate the CSS code size even more

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:

Open the style.css file through Notepad ++ or another text editor.

Highlight the desired identifier, click "Search" and "Find in files".

In the website backup, select the folder with your theme by clicking on the ellipsis button.

Click the "Find All" button. You will see a window with found matches:

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.

Additional ways to truncate the CSS code

Delete comments — tips that were created when writing code — or replace them with short versions.

Clear lines from spaces leaving the code suitable for reading and editing.

Simplify shade definition commands. For example:

Optimize paddings in lines:

Conclusion

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.

This article is a part of Serpstat's "Site Audit" tool

Audit all the site or page in one click. A complete list of errors, sorted by severity, ways to resolve them and recommendations. Any frequency of verification and automatic email reports.

Run Site Audit

Learn how to get the most out of Serpstat

Want to get a personal demo, trial period or bunch of successful use cases?

Send a request and our expert will contact you ;)

Rate the article on a five-point scale

The article has already been rated by 0 people on average out of 5

Found an error? Select it and press Ctrl + Enter to tell us