How-to 7 min read

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:
CSS compressor online
Here is how the code looks before and after the maximum compression:
CSS code compression online
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:
CSS weight reduction
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:
link rel stylesheet in page code
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".
Search in css code Notepad ++
In the website backup, select the folder with your theme by clicking on the ellipsis button.
Folder selection in Notepad ++
Click the "Find All" button. You will see a window with found matches:
Search for styles.css
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:
Simplify color tones in CSS
Optimize paddings in lines:
CSS Indentation Optimization


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
SEO Audit in Serpstat" title = "How to truncate the CSS code and speed up a website 16261788348278" />
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

Speed up your search marketing growth with Serpstat!

Keyword and backlink opportunities, competitors' online strategy, daily rankings and SEO-related issues.

A pack of tools for reducing your time on SEO tasks.

Get free 7-day trial

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

Share this article with your friends

Are you sure?

Introducing Serpstat

Find out about the main features of the service in a convenient way for you!

Please send a request, and our specialist will offer you education options: a personal demonstration, a trial period, or materials for self-study and increasing expertise — everything for a comfortable start to work with Serpstat.




We are glad of your comment
I agree to Serpstat`s Privacy Policy.

Thank you, we have saved your new mailing settings.

Report a bug

Open support chat
mail pocket flipboard Messenger telegramm