Unminified CSS: How To Pass the Audit and Minify CSS Files?

Does your website have a high enough performance? How many seconds does your site load? How about your Google Pagespeed values? Answering all these questions may be more difficult than you think. With Screpy, you can put each page on your website separately for page speed tests and perform monitoring. At the end of the audits you conduct, you may come across with “Unminified CSS” warning that will appear as a result of Google Lighthouse integrated audits. This warning can be a very important message that your web pages are loading much slower than necessary.

Today we will talk with you about what CSS files are used for, why CSS and HTML minifying should be done, and the basic logic of Pagepeed audits. In this way, we will ensure that your website has a stronger performance.

What is CSS?

CSS, called Cascading Style Sheets, can be defined as a markup language that serves to present a document within a web page. This language, which is at least as common as HTML or Javascript in the internet world, can be used to add the following elements to your website in particular:

1. Shading
2. Horizontal and vertical added menus
3. Page layout
4. Operations related to visuals and colors on the page
5. Different heading styles within the page
6. Text sizing options
7. Codes to make tables and forms more interactive

It is possible to say that Bootstrap and Foundation are the most popular libraries of the CSS language, which is widely used worldwide. You can use them to get strong CSS codes on your website. However, there will still be some things to watch out for in order to get rid of the unminified CSS alert.

See unminified CSS files and all other issues!

Try for free to boost your website traffic! No credit card required.

Register Now

What is Minifying? What Do Google Mean By Saying ‘’Unminified CSS’’?

Editing, reorganizing, categorizing CSS files on a web page to take up less space, and deleting excess spaces in the file is called CSS minification.

The minification process can make it possible to reduce the CSS files in question by approximately 20 percent. The smaller CSS file takes less time to be read and loaded by the browser. At the end of the job, the page speed reflected to the end user is also increased considerably. As Google’s user experience-focused updates have increased, especially since 2018, practices that positively affect page speed values ​​have been encouraged. You can also try to shrink your files using various CSS minifying tools.

So, using which tools will we do the CSS minification process?

Let’s say right away: According to what Google suggests on the official Pagespeed Insight page, CSSNano and CSSO can be used to minify CSS files. Both applications allow you to perform your transaction securely.

Why Should We Minify CSS Files?

When the user clicks on a page, a browser sends a request to be able to load the content of the site. It takes a certain time for the site to transmit these resources to the browser and for the browser to read and load them. If the size of the files decreases, this time will also be shorter.

Generally, a user cannot see any content on the web page until a browser has built CSSOM. -Hey, you know what CSSOM is: It means a DOM tree with CSS information inside. The user, who has to wait until all documents in the CSS file are scanned, is more likely to bounce, and a potential customer or visitor is lost.

So instead of waiting for users for unwanted file loads – whitespace, for example – it might make perfect sense to deliver the results users really need and do it faster.

Click to view the relationship between bounce rate and page speed.

Is Minifying CSS is Same Thing with Compressing?

You now know very well the main reason for using CSS minification: Reducing the size of a file so it loads faster. However, this is not the same as “compression”, which is also often performed.

But why?

Let’s answer right away: Compression and minification are basically carried out for the same purpose.

• The basic logic of minification is to delete unnecessary and unwanted blank spaces, remove special characters, reduce or completely remove formatting within the code resource. Such changes reduce the file size and shorten the scanning time of the file. Meanwhile, the type of the file does not change or there is no difference in the external structure of the contents in the file -but make some inside changes.
• Compression does not usually make any changes to the content in the CSS file. This process makes the file compact in order to reduce it to file size as a whole. This ensures that the file takes up very little space until the browser requests it, and the content of the file is loaded only when the browser requests it.

So, what to do if you got a Pagespeed Insights alert due to the large size of your CSS files? Which of these should you perform?

Let’s put it this way: Actually, both of these methods can be used at the same time because they reduce the file size by using completely different methods.

Minifying CSS by Using WordPress Plugins

We will briefly talk about what you need to do about this. First of all, we mentioned that you can do CSS minifying using certain online tools. There is one more way to do this: using WordPress plugins! Here are a few different CSS minifier free WordPress Plugin options we can recommend for you:

1. Autoptimize: The main feature of this plugin, which is very popular with those who want to optimize CSS, is that it can easily minify quite different elements from images to Google Fonts. After logging into your site via WordPress, all you have to do is click on the Plugin option and go to Add New. You can easily download this plugin and start the process.

This plugin works perfectly not only for CSS files, but also for HTML and Javascript files. You can easily start by choosing which file types you want to minify.

• Fast Velocity Minify: How would you like to check out another plugin that is completely free and easily performs the minify CSS process? What Velocity Minify does is combine your CSS and Javascript files. In this way, HTPP requests that are likely to come to your server will be reduced to the lowest level. This means a higher loading speed of your page. Easily download the plugin to get better page load time rates. Start the download immediately by clicking on the Plugin on WordPress and then on Add New.

• W3 Total Cache: Completely free and capable of minifying all HTML, JS, CSS files! All you have to do is click on the ” enable ” option in the ” Minify ” tab after you get to the performance tab. This process works powerfully enough to decrease the size of all file types. The plugin’s promise to you is a file size reduction of around 10 percent. But if you are lucky, this rate may increase even more.

• WP Fastest Cache: One of the plugins you can easily use on WordPress for a much better page loading time is WP Fastest Cache. This is a plugin that also works completely free of charge. Therefore, it is very popular. You can choose which files you want to be minimized through the plugin. Choose from CSS, HTML and JS files. If you wish, check ‘Combine CSS’ to save more space in the minifying CSS process. In this way, CSS files will be combined with JS files and the number of HTTP requests will be reduced.

CSS Minification Example – Before and After Minification

Would you like to see how much a CSS file shrinks after minification? Hey, we really want to show you this too. Here is a standard CSS file code with 16 lines for you. Then its minified version!

After minification:

.ui-helper-hidden{display:none}.ui-helper-hidden accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}

As you can imagine, loading the first of these files in front of the user will be much more difficult than doing the second.

Minify CSS Checklist: How to Minify CSS Files?

Restart the Google Lighthouse Pagespeed Insights audit by minifying the CSS files found on your web page. We are sure the results you will get will be a higher page load speed and a lower wait time. So how do online tools minify codes? In other words, how to minify CSS? Let’s create a little checklist with you, folks!

1. There may be white spaces, indentation characters, and line breaks in the CSS file code. All of these should be removed.
2. All comments in the code should be stripped.
3. CSS files often contain colons for style decoration. Removing the last semi-colon of a style declaration and extra semi-colons from the code will provide a significant size reduction.
4. If it does not cause trouble for the code to run, the values ​​should not be converted to 0.
5. There may be blank ones between CSS declarations. These should be detected and removed from the code.
6. Colors with #AABBCC pattern are reduced to # ABC. This results in much stronger file size.
7. RGB color values ​​are optimized and a shorter hexadecimal format is obtained.
8. If zero values ​​are used in the code, units are not required. By removing these, the code can be minified.
9. Within a code resource, the float value can be less than 1. In this case, leading 0 should be removed.

Pagespeed Insights, CSS Minify and Page Load Speed

There is a lot you need to do in order to have a strong User Experience score on your website.

• According to the latest research, many users expect a site they click to load in 2 seconds maximum.
• What’s more, when this time is 3 seconds or more, the bounce rates increase very rapidly.

But what exactly does that mean?

Let’s say it right away: if you have a website that causes delayed loading of items on your site, you will have to gradually lose the masses that you have somehow persuaded to come to your site. This does not give a very good message to Google either. Remember, every user who bounced off from you to your competitor site that is different from the SERP means a message to Google: ‘’There’s something here that negatively affects the user experience.’’

How Can Screpy Help?

Screpy is a very powerful tool that works with a perfect integration with Google Lighthouse. With this tool, you can perform Google Lighthouse audits quickly and easily. Moreover, the special algorithm we offer for you allows you to get warnings in this direction by making a special audit for each page.

Did you see a sentence like “unminified CSS” among the warnings? Click on the Unminified CSS task now and find out how you can fix it. Yes, you heard that right! We explain step by step the methods for solving each shortcoming for you. To be honest, we will soon be introducing very detailed task tutorials with video tutorials.

We care about providing content that will give you full control over your website!

FAQ

Test Your Website Performance!

You can quickly analyze your site in a minute

Analyze!

You May Also Like

• Unminified CSS
• Unminified Javascript
• Remove unused CSS
• How to speed up your website?
• Best 11 WordPress Plugins for Your Project!