This site uses cookies and other tracking technologies to make possible your usage of the website, assist with navigation and your ability to provide feedback, analyse your use of our products and services, assist with our promotional and marketing efforts, and provide better user experience.

By using the website, you agree to our Privacy policy

Accept and continue

Report a bug

Cancel
34
How-to 7 min read October 2, 2019

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:
1
Open the style.css file through Notepad ++ or another text editor.
2
Highlight the desired identifier, click "Search" and "Find in files".
Search in css code Notepad ++
3
In the website backup, select the folder with your theme by clicking on the ellipsis button.
Folder selection in Notepad ++
4
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

1
Delete comments — tips that were created when writing code — or replace them with short versions.
2
Clear lines from spaces leaving the code suitable for reading and editing.
3
Simplify shade definition commands. For example:
Simplify color tones in CSS
4
Optimize paddings in lines:
CSS Indentation Optimization

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
SEO Audit in Serpstat
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

Share this article with your friends

Sign In Free Sign Up

You’ve reached your query limit.

Or email
Forgot password?
Or email
Back To Login

Don’t worry! Just fill in your email and we’ll send over your password.

Are you sure?

Awesome!

To complete your registration you need to enter your phone number

Back

We sent confirmation code to your phone number

Your phone Resend code Queries left

Something went wrong.

Contact our support team
Or confirm the registration using the Telegram bot Follow this link
Please pick the project to work on

Personal demonstration

Serpstat is all about saving time, and we want to save yours! One of our specialists will contact you and discuss options going forward.

These may include a personal demonstration, a trial period, comprehensive training articles & webinar recordings, and custom advice from a Serpstat specialist. It is our goal to make you feel comfortable while using Serpstat.

Name

Email

Phone

We are glad of your comment
Upgrade your plan

Upgrade your plan

Export is not available for your account. Please upgrade to Lite or higher to get access to the tool. Learn more

Sign Up Free

Спасибо, мы с вами свяжемся в ближайшее время

Invite
View Editing

E-mail
Message
Optional
E-mail
Message
Optional

You have run out of limits

You have reached the limit for the number of created projects. You cannot create new projects unless you increase the limits or delete existing projects.

I want more limits