|How-to||– 7 min read –||October 2, 2019|
How to truncate the CSS code and speed up a website
What is the CSS code
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
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:
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
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:
Another manual cleaning method involves a thorough check of each class:
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
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.
|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 ;)
Cases, lifehacks, researches and useful articles
Don’t you have time to follow the news? No worries!
Our editor Stacy will choose articles that will definitely help you with your work. Join our cozy community :)